{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <form id="ImportExcelForm" action="{{route('master_invoice_payrates.import_excel')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <label for="excel_input" class="btn btn-primary m-3 excel_input">
                    <span class="svg-icon svg-icon-muted svg-icon-2x"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.3" d="M19 15C20.7 15 22 13.7 22 12C22 10.3 20.7 9 19 9C18.9 9 18.9 9 18.8 9C18.9 8.7 19 8.3 19 8C19 6.3 17.7 5 16 5C15.4 5 14.8 5.2 14.3 5.5C13.4 4 11.8 3 10 3C7.2 3 5 5.2 5 8C5 8.3 5 8.7 5.1 9H5C3.3 9 2 10.3 2 12C2 13.7 3.3 15 5 15H19Z" fill="currentColor"/>
                        <path d="M13 17.4V12C13 11.4 12.6 11 12 11C11.4 11 11 11.4 11 12V17.4H13Z" fill="currentColor"/>
                        <path opacity="0.3" d="M8 17.4H16L12.7 20.7C12.3 21.1 11.7 21.1 11.3 20.7L8 17.4Z" fill="currentColor"/>
                        </svg>
                    </span>
                    Import</label>
                <input type="file" name="file" id="excel_input" class="form-control d-none" accept=".xlsx" onchange="uploadExcelFile();">
                <a href="#" id="customExcelExportBtn" class="btn btn-lg btn-primary me-3"><i class="fas fa-file-excel fs-4"></i> Export</a>
                {!! Helper::getListAddBtn(route('master_invoice_payrates.export'), 'Download Sample File','download') !!}
            </form>
            {!!Helper::getListAddBtn(route("master_invoice_payrates.create"),"Add Payrate")!!}
            <!--end::Button -->
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        @include("backend.alerts")
        <!--begin: Datatable-->
        {!! $html->table() !!}
        <!--end: Datatable-->
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')

{!! $html->scripts() !!}
<script type="text/javascript">
    function actionDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('master_invoice_payrates.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    function uploadExcelFile() {
        $(this).prop('disabled', true);
        $('.excel_input').addClass('disabled');
        $('.excel_input').text('Uploading...');
        $('#ImportExcelForm').submit();
    }

    $(document).on('init.dt', function () {
        const table = $('#dataTableBuilder').DataTable();

        $('#customExcelExportBtn').on('click', function () {
            table.button('.buttons-excel').trigger();
        });
    });
</script>
@endsection