@extends('workshops.jobcards.includes.jobcard_tabs')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Workshops</a> <span class="divider">/</span></li>
        <li><a href="{{route('workshops.jobs_cards.index')}}">Job-cards</a> <span class="divider">/</span></li>
        <li><a  href="{{route('workshops.jobs_cards.show',['id'=>$job_card->id])}}">{{$job_card_number}}</a> <span class="divider">/</span></li>
        <li class="active">Work Orders</li>
    </ul>
@stop
@section('jobcards')
    <style type="text/css">
        input.invalid, textarea.invalid {
            border: 2px solid red;
        }

        input.valid, textarea.valid {
            border: 2px solid green;
        }
    </style>
    <h4 class="widgettitle form-inline">
        <a href="javascript:;">Labour Services</a>
        <button onclick="modelShow('addJobCardLabourService')" class=" btn pull-right"><span class="icon-plus"></span> Add
            Labour Service</button>
    </h4>
    <table class="table table-bordered table-condensed logistics_table"
           id="job_card_labour_service_list">
        <colgroup>
            <col class="con0" style="align: center; width: 4%"/>
            <col class="con1"/>
            <col class="con0"/>
            <col class="con1"/>
            <col class="con0"/>
            <col class="con1"/>
        </colgroup>
        <thead>
        <tr>
            <th class="head0 nosort"><input type="checkbox" class="checkall"/></th>
            <th class="head0">Labour Name</th>
            <th class="head0">Job Card Services</th>
            <th class="head1" width="20">Action</th>
        </tr>
        </thead>

    </table>
    
    
    
    
    <div id="addJobCardLabourService" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Add Service To Labour</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">
    
  
        <form method="POST" action="{{ route('workshops.jobs_cards.work_orders.store') }}" accept-charset="UTF-8" autocomplete="off">
            {{ csrf_field() }}
            
                <div class="row-fluid">
                    <div class="span12">

                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th> Labour </th><th> Service</th><th></th>
                            </tr>
                            <tr style="display: none" class="job_card_labour_service_row_template">
                                <td class="span6">
                                    <select style="width: 100%" name="job_card_employee_id[]" >
                                        <option value="">Select Jobcard Labour</option>
                                        @foreach($job_card_emplyees as $job_card_emplyee)
                                            <option value="{{$job_card_emplyee->id}}">{{$job_card_emplyee->employee->employee_name.''.$job_card_emplyee->employee->last_name }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" value="{{$job_card->id}}" name="job_card_id">
                                </td>
                                <td class="span6">
                                    <select style="width: 100%" name="job_card_service_id[]" >
                                        <option value="">Select Jobcard Service</option>
                                        @foreach($job_card_services as $job_card_service)
                                            <option value="{{$job_card_service->id}}">{{$job_card_service->service->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <button title="Remove Row" type="button" class="btn btn-sm btn-danger labour_service_row_remover">
                                        <i class="fa fa-close"></i></button>
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="span6">
                                    <select style="width: 100%" class="searchable_select" name="job_card_employee_id[]" required>
                                        <option value="">Select Jobcard Labour</option>
                                        @foreach($job_card_emplyees as $job_card_emplyee)
                                            <option value="{{$job_card_emplyee->id}}">{{$job_card_emplyee->employee->employee_name.''.$job_card_emplyee->employee->last_name }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" value="{{$job_card->id}}" name="job_card_id">
                                </td>
                                <td class="span6">
                                    <select style="width: 100%" class="searchable_select" name="job_card_service_id[]" required >
                                        <option value="">Select Jobcard Service</option>
                                        @foreach($job_card_services as $job_card_service)
                                            <option value="{{$job_card_service->id}}">{{$job_card_service->service->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <button title="Remove Row" type="button" class="btn btn-sm btn-danger labour_service_row_remover">
                                        <i class="fa fa-close"></i></button>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="8">
                                    <button type="button" class="btn btn-default btn-xs job_card_labour_service_row_adder pull-right">Add Row</button>
                                    <span class="pull-right">&nbsp;</span>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn " data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>

    <script>
    
     $('.searchable_select').select2();

        jQuery('.job_card_labour_service_row_adder').each(function () {
            jQuery(this).click(function () {
                var tbody = jQuery(this).closest('table').find('tbody');
                var new_row = tbody.closest('table').find('.job_card_labour_service_row_template').clone().removeAttr('style')
                    .removeClass('job_card_labour_service_row_template').addClass('labour_service_artificial_row').appendTo(tbody);
                     new_row.find('select[name="job_card_service_id[]"]').select2();
                     new_row.find('select[name="job_card_employee_id[]"]').select2();
                new_row.find('.labour_service_row_remover').click(function () {
                    jQuery(this).closest('tr').remove();
                });
            });
        });

        jQuery('.labour_service_row_remover').click(function () {
            jQuery(this).closest('tr').remove();
        });

        var oTable = jQuery('#job_card_labour_service_list').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No any labour service records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('workshops.jobs_cards.work_orders.datatable',['id'=>$job_card->id])}}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [

                    {data: 'checkbox'},
                    {"class": "link", data: 'labour'},
                    {"class": "link", data: 'service'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });



    </script>

@stop