@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;
    }
</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>{{ __('Manage Overheads') }}</h2>
    </div>
    <div class="col-md-6 float-end">
        @can('create overheads')
            <a href="#" class="btn btn-sm btn-primary mb-3 floatrght" data-size="lg"
                data-url="{{ route('overheads.create') }}" data-ajax-popup="true" data-bs-toggle="tooltip"
                title="{{ __('Create Overheads') }}" data-title="{{ __('Create Overheads') }}">
                <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>{{ __('Overheads Name') }}</th>
                <th>{{ __('Rate') }}</th>
                <th>{{ __('Percentage') }}</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() {
        user_datatable();
    });

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


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

                {
                    data: 'overheads_name',
                    name: 'overheads_name',
                    orderable: true,
                    searchable: true
                },
                {
                    data: 'rate',
                    name: 'rate',
                    orderable: true,
                    searchable: true
                },
                {
                    data: 'percentage',
                    name: 'percentage',
                    orderable: true,
                    searchable: true
                },
                
                {
                    data: 'created_at',
                    name: 'created_at',
                    orderable: true,
                    searchable: true
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: true,
                    searchable: true
                }
            ]
        });
    }

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

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