@include('new_layouts.header')

<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;
    }
    .bg-primary {
        --tblr-bg-opacity: 1;
        background-color:  rgb(34 108 197) !important;
    }
</style>
<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" />
@include('context_management.topbar')
<div class="row">
    <div class="col-md-6">
        <h2>{{ __('Material Management') }}</h2>
    </div>
    <div class="col-md-6 float-end">
        @can('import material')
        <a data-url="{{ route('material_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('export material')
        <a href="{{ route('material_export') }}"
            class="floatrght btn btn-sm btn-primary gapbtn" title="Excel Export" 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 material')
            <a data-url="{{ route('material.create') }}" class="floatrght btn btn-sm btn-primary gapbtn"
                data-ajax-popup="true" data-bs-toggle="tooltip" title="{{ __('Create Material Management') }}"
                data-title="{{ __('Create Material Management') }}" data-bs-toggle="tooltip" aria-label="Create"
                data-bs-original-title="Create">
                <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>{{ __('Material Name') }}</th>
                <th>{{ __('Category') }}</th>
                <th>{{ __('Division') }}</th>
                <th>{{ __('Project') }}</th>
                <th>{{ __('Varient') }}</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() {
        material_datatable();
    });

    function material_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_material') }}",
                data: {
                    _token: tempcsrf,
                },
                error: function(xhr, error, thrown) {


                    setTimeout(function() {
                        // location.reload();
                    }, 2000);
                }
            },
            columns: [

                {
                    data: 'material_name',
                    name: 'material_name',
                    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: 'varient',
                    name: 'varient',
                    orderable: true,
                    searchable: true
                },
                // {
                //     data: 'created_at',
                //     name: 'created_at',
                //     orderable: true,
                //     searchable: true
                // },
                {
                    data: 'action',
                    name: 'action',
                    orderable: true,
                    searchable: true
                }
            ]
        });
    }

    function material_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('material')}}/" + 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
                            material_datatable();
                        } else {
                            swal.fire("Error!", results.message, "error");
                        }
                    }
                });
            } else {
                e.dismiss;
            }

        }, function (dismiss) {
            return false;
        })
    }
</script>