@extends('layout.admin')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Dokumen Polis dan Klaim</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dokumen Polis dan Klaim</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">


                            <div class="row mb-4"> 
                                <div class="col-md-3">
                                    <label for="filter-type">Filter Berdasarkan:</label>
                                    <select id="filter-type" class="form-control text-center" name="filter_type">
                                        <option value="">--Pilih--</option>
                                        <option value="QuotationNo" {{ request('filter_type') == 'QuotationNo' ? 'selected' : '' }}>Quotation No</option>
                                        <option value="CINo" {{ request('filter_type') == 'CINo' ? 'selected' : '' }}>CINo</option>
                                        <option value="Last_Update" {{ request('filter_type') == 'Last_Update' ? 'selected' : '' }}>Tanggal</option>
                                        <option value="DocumentNo" {{ request('filter_type') == 'DocumentNo' ? 'selected' : '' }}>Document No</option>
                                        <option value="Title" {{ request('filter_type') == 'Title' ? 'selected' : '' }}>Title</option>
                                    </select>
                                </div>
                                <div class="col-md-3" id="filter-input-container">
                                    <label for="filter-input">Search:</label>
                                    <input type="text" id="filter-input" class="form-control" name="filter_input" value="{{ request('filter_input') }}" placeholder="Masukkan tanggal">
                                </div>
                                <div class="col-md-1 d-flex align-items-end">
                                    <button type="button" class="btn btn-success w-100" id="apply-filter">
                                        <i class="fas fa-filter"></i> Filter
                                    </button>
                                </div>
                                <div class="col-md-1 d-flex align-items-end">
                                    <button type="button" class="btn btn-secondary w-100" id="reset-filter">
                                        <i class="fas fa-sync-alt"></i> Reset
                                    </button>
                                </div>
                            </div>

                            <br><br><br>
                            
                            <div class="d-flex justify-content-center">
                                <div class="spinner-grow text-success loading-spinner" role="status"
                                    style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-border text-danger loading-spinner" role="status"
                                    style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-grow text-warning loading-spinner" role="status"
                                    style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-border text-info loading-spinner" role="status"
                                    style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>


                            <table id="document-table" class="table table-hover table-bordered table-striped document nowrap bg-cyan">
                                <thead class="text-center">
                                    <tr>
                                        <th>Action</th>
                                        <th>Quotation No</th>
                                        <th>CINo</th>
                                        <th>Document No</th>
                                        <th>Title</th>
                                        <th>Remark</th>
                                        <th>Ref No</th>
                                        <th>Last Operation</th>
                                        <th>Last Update</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection


    @push('js')
    <script>
    $(function () {
        

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        var table = $('#document-table').DataTable({
            lengthChange: false,
            select: true,
            bFilter: false,
            autoWidth: false,
            scrollY: '310px',
            scrollX: true,
            scroller: {
                loadingIndicator: false,
            },
            searching: false,
            cache: true,
            destroy: true,
            deferRender: true,
            processing: true,
            serverSide: true,
            pageLength: -1,
            ordering: false,
            paging: true,
            ajax: {
                url: "{{ route('document') }}",
                beforeSend: function () {
                    $(".loading-spinner").show();

                },
                complete: function () {
                    $(".loading-spinner").hide();

                },
                data: function (d) {
                // Mengirimkan parameter filter ke server
                var filterType = $('#filter-type').val();
                var filterInput = $('#filter-input').val();
                d.filter_type = filterType;
                d.filter_input = filterInput;
             },
                dataSrc: function (json) {
                    $('#createNewdocument').data('latest-id', json.latestId);
                    return json.data;
                }
            },
            columns: [
                { data: 'aksi', name: 'aksi', orderable: false, searchable: false },
                { data: 'QuotationNo', name: 'QuotationNo' },
                { data: 'CINo', name: 'CINo' },
                { data: 'DocumentNo', name: 'DocumentNo' },
                { data: 'Title', name: 'Title' },
                { data: 'Remark', name: 'Remark' },
                { data: 'RefNo', name: 'RefNo' },
                { data: 'Last_Opr', name: 'Last_Opr' },
                { data: 'Last_Update', name: 'Last_Update', render: DataTable.render.datetime('YYYY-MM-DD') },
            ],
                initComplete: function () {
                table.columns.adjust().draw(); 
    }
        });
        

            // Filter input berdasarkan jenis filter
       $('#filter-type').change(function () {
    var selectedFilter = $(this).val();
    var filterInputContainer = $('#filter-input-container');
    
    if (selectedFilter === 'QuotationNo') {
        filterInputContainer.html(`
            <label for="filter-input">Masukkan QuotationNo:</label>
            <input type="text" id="filter-input" class="form-control" placeholder="Masukkan quotation no">
        `); 
    } else if (selectedFilter === 'CINo') {
        filterInputContainer.html(`
            <label for="filter-input">Masukkan CINo:</label>
            <input type="text" id="filter-input" class="form-control" placeholder="Masukkan CINo">
        `); 
    } else if (selectedFilter === 'Last_Update') {
        filterInputContainer.html(`
            <label for="filter-input">Pilih Tanggal:</label>
            <input type="text" id="filter-input" class="form-control" placeholder="Pilih tanggal" readonly>
        `);
        $('#filter-input').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true
        });
    } else if (selectedFilter === 'DocumentNo') {
        filterInputContainer.html(`
            <label for="filter-input">Masukkan Dokumen No:</label>
            <input type="text" id="filter-input" class="form-control" placeholder="Masukkan document no">
        `);
    } else {
        filterInputContainer.html(`
            <label for="filter-input">Masukkan Title:</label>
            <input type="text" id="filter-input" class="form-control" placeholder="Masukkan title">
        `);
    }
});


        
    $('#apply-filter').click(function() {
    // Update the hidden input fields with the selected filter values
    $('#hidden-filter-type').val($('#filter-type').val());
    $('#hidden-filter-input').val($('#filter-input').val());

    // Reload the DataTable with the selected filter
    table.ajax.reload();
    });

    $('#reset-filter').click(function() {
        // Clear filter inputs
        $('#filter-type').val('');
        $('#filter-input').val('');

        // Reset hidden inputs for filter
        $('#hidden-filter-type').val('');
        $('#hidden-filter-input').val('');

        // Reload the DataTable with no filter
        table.ajax.reload();
    });


});
        



    </script>
    @endpush