@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>{{ __('Equipment Management') }}</h2></div>
        <div class="col-md-6 float-end">
            @can('export equipment')
            <a data-url="{{ route('equipment_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 equipment')
            <a href="{{ route('equipment_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 equipment')
                <a href="#" class="floatrght btn btn-sm btn-primary gapbtn" data-size="lg"
                    data-url="{{ route('equipment.create') }}" data-ajax-popup="true" data-bs-toggle="tooltip"
                    title="{{ __('Create Equipment Management') }}" data-title="{{ __('Create Equipment 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>{{ __('Equipment Name') }}</th>
                    <th>{{ __('Project') }}</th>
                    <th>{{ __('Unit') }}</th>
                    <th>{{ __('Rate') }}</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() {
            equipment_datatable();
        });

        function equipment_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_equipment') }}",
                    data: {
                        _token: tempcsrf,
                    },
                    error: function(xhr, error, thrown) {
                        setTimeout(function() {
                            // location.reload();
                        }, 2000);
                    }
                },
                columns: [
                    { data: 'equipment_name',name: 'equipment_name',orderable: true,searchable: true },
                    { data: 'projects',name: 'projects',orderable: true,searchable: true },
                    { data: 'unit',name: 'unit',orderable: true,searchable: true },
                    { data: 'rate',name: 'rate',orderable: true,searchable: true },
                    { data: 'created_at',name: 'created_at',orderable: true,searchable: true },
                    { data: 'action',name: 'action',orderable: true,searchable: true }
                ]
            });
        }

        function equipment_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('equipment')}}/" + 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
                                equipment_datatable();
                            } else {
                                swal.fire("Error!", results.message, "error");
                            }
                        }
                    });
                } else {
                    e.dismiss;
                }
                
            }, function (dismiss) {
                return false;
            })
        }
    </script>