@include('new_layouts.header')
    <link rel="stylesheet" href="{{ asset('assets/css/datatables.min.css') }}">
    <link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet"/>

    <style>
         .ms-2 {
        background: #fff !important;
    }

    .ti.ti-caret-right.text-white {
        color: #000 !important;
        font-size: 18px;
    }

    .ms-2 {
        background: blue;
    }

    i.ti.ti-pencil {
        color: white !important;
    }

    i.ti.ti-trash.text-white {
        color: white !important;
    }

    table.dataTable {
        box-shadow: #bbbbbb 0px 0px 5px 0px;
    }

    thead {
        background-color: var(--theadColor);
    }

    thead>tr,
    thead>tr>th {
        background-color: transparent !important;
        color: #fff !important;
        font-weight: normal;
        text-align: start;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        border-bottom: 0px solid #111 !important;
    }

    .dataTables_wrapper>div {
        margin: 5px;
    }

    table.dataTable.display tbody tr.even>.sorting_1,
    table.dataTable.order-column.stripe tbody tr.even>.sorting_1,
    table.dataTable.display tbody tr.even,
    table.dataTable.display tbody tr.odd>.sorting_1,
    table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
    table.dataTable.display tbody tr.odd {
        background-color: #ffffff;
    }

    table.dataTable thead th {
        position: relative;
        background-image: none !important;
    }

    table.dataTable thead th.sorting:after,
    table.dataTable thead th.sorting_asc:after,
    table.dataTable thead th.sorting_desc:after {
        position: absolute;
        top: 12px;
        right: 8px;
        display: block;
        font-family: "Font Awesome\ 5 Free";
    }

    table.dataTable thead th.sorting:after {
        content: "\f0dc";
        color: #ddd;
        font-size: 0.8em;
        padding-top: 0.12em;
    }

    table.dataTable thead th.sorting_asc:after {
        content: "\f0de";
    }

    table.dataTable thead th.sorting_desc:after {
        content: "\f0dd";
    }

    table.dataTable.display tbody tr:hover>.sorting_1,
    table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {
        background-color: #f2f2f2 !important;
        color: #000;
    }

    tbody tr:hover {
        background-color: #f2f2f2 !important;
        color: #000;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: none !important;
        border-radius: 50px;
        background-color: var(--theadColor) !important;
        color: #fff !important
    }

    .paginate_button.current:hover {
        background: none !important;
        border-radius: 50px;
        background-color: var(--theadColor) !important;
        color: #fff !important
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        border: 1px solid #979797;
        background: none !important;
        border-radius: 50px !important;
        background-color: #000 !important;
        color: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        cursor: default;
        color: #fff !important;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
    }

    </style>
    @include('context_management.topbar')

    <div class="row">
        <div class="col-md-6"><h2>{{ __('Labour Management') }}</h2></div>
        <div class="col-md-6 float-end">
            @can('export labour')
            <a data-url="{{ route('labour_import') }}" title="Excel Bulk Import" data-ajax-popup="true" data-bs-toggle="tooltip"
                class="floatrght btn btn-sm btn-primary" data-bs-toggle="tooltip" aria-label="Excel Bulk Import"
                data-bs-original-title="Excel Bulk Import">
                 <i class="ti ti-file-export"></i>
            </a>
            @endcan
            @can('import labour')
            <a href="{{ route('labour_export') }}"
                class="floatrght btn btn-sm btn-primary gapbtn" title="" aria-label="Excel Export" data-bs-original-title="Excel Export">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-excel" viewBox="0 0 16 16">
                    <path d="M5.18 4.616a.5.5 0 0 1 .704.064L8 7.219l2.116-2.54a.5.5 0 1 1 .768.641L8.651 8l2.233 2.68a.5.5 0 0 1-.768.64L8 8.781l-2.116 2.54a.5.5 0 0 1-.768-.641L7.349 8 5.116 5.32a.5.5 0 0 1 .064-.704"/>
                    <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1"/>
                  </svg>
            </a>
            @endcan
            @can('create labour')
                <a href="#" class="floatrght btn btn-sm btn-primary gapbtn" data-size="lg"
                    data-url="{{ route('labour.create') }}" data-ajax-popup="true" data-bs-toggle="tooltip"
                    title="{{ __('Create Labour Management') }}" data-title="{{ __('Create Labour Management') }}">
                     <i class="ti ti-plus"></i>
                </a>
            @endcan
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-vcenter card-table" width="100%" id="user_table">
            <thead>
                <tr>
                    <th>{{ __('Worker Position') }}</th>
                    <th>{{ __('Category') }}</th>
                    <th>{{ __('Division') }}</th>
                    <th>{{ __('Project') }}</th>
                    <th>{{ __('Date') }}</th>
                    <th>{{ __('Action') }}</th>
                </tr>
            </thead>
            <tbody>
                    
            </tbody>
        </table>
    </div>
</div>
</div>

@include('new_layouts.footer')
    <script src="{{ asset('datatable/jquery.dataTables.min.js') }}"></script>
    <script>
        $(document).on('keypress', function(e) {
            if (e.which == 13) {
                swal.closeModal();
            }
        });

        var tempcsrf = '{!! csrf_token() !!}';

        $(document).ready(function() {
            labour_datatable();
        });

        function labour_datatable() {
            $('#user_table').dataTable().fnDestroy();
            $('#user_table').DataTable({
                searching: true,
                ordering: true,
                dom: 'lfrtip',
                info: true,
                iDisplayLength: 10,
                lengthMenu: [
                    [10, 50, 100, -1],
                    [10, 50, 100, "All"]
                ],
                ajax: {
                    url: "{{ route('get_all_labour') }}",
                    data: {
                        _token: tempcsrf,
                    },
                    error: function(xhr, error, thrown) {
                        setTimeout(function() {
                            // location.reload();
                        }, 2000);
                    }
                },
                columns: [
                    { data: 'worker_position',name: 'worker_position',orderable: true,searchable: true },
                    { data: 'cat_id',name: 'cat_id',orderable: true,searchable: true },
                    { data: 'division_id',name: 'division_id',orderable: true,searchable: true },
                    { data: 'projects',name: 'projects',orderable: true,searchable: true },
                    { data: 'created_at',name: 'created_at',orderable: true,searchable: true },
                    { data: 'action',name: 'action',orderable: true,searchable: true }
                ]
            });
        }

        function labour_delete(id) {
            swal.fire({
                title: "Delete?",
                icon: 'question',
                text: "Please ensure and then confirm!",
                type: "warning",
                showCancelButton: !0,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                reverseButtons: !0
            }).then(function (e) {
                if (e.value === true) {
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'DELETE',
                        url: "{{url('labour')}}/" + id,
                        data: {_token: CSRF_TOKEN},
                        dataType: 'JSON',
                        success: function (results) {
                            if (results.success === true) {
                                swal.fire("Done!", results.message, "success");
                                // refresh page after 2 seconds
                                labour_datatable();
                            } else {
                                swal.fire("Error!", results.message, "error");
                            }
                        }
                    });
                } else {
                    e.dismiss;
                }
                
            }, function (dismiss) {
                return false;
            })
        }
    </script>