@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h5 class="mb-0">Filter {{ $title_menu }}</h5>
                    </div>
                    <hr class="horizontal light mt-0">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="frdate" class="form-control-label">Start Date</label> <code>*</code>
                                    <input class="form-control" type="date" id="frdate" name="frdate" value="{{ $filter['frdate'] ?? date('Y-m-01') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="todate" class="form-control-label">End Date</label> <code>*</code>
                                    <input class="form-control" type="date" id="todate" name="todate" value="{{ $filter['todate'] ?? date('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="customer" class="form-control-label">Customer</label>
                                    <select class="form-select select2" id="customer" name="customer">
                                        <option value="">-- Semua Customer --</option>
                                        @foreach($customers as $c)
                                            <option value="{{ $c->id }}"
                                            {{ ($filter['customer'] ?? '') == $c->nama ? 'selected' : '' }}>
                                            {{ $c->nama }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Hasil {{ $title_menu }}</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="rptqcg-report-table">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>ID SAMPLE</th>
                                        <th>SAMPLE DATE</th>
                                        <th>CUSTOMER</th>
                                        <th>APPLICATION</th>
                                        <th>DETAIL</th>
                                        <th>ITEM</th>
                                        <th>COLOR</th>
                                        <th>GSM</th>
                                        <th>LENGTH</th>
                                        <th>WIDTH</th>
                                        <th>QTY</th>
                                        <th>UOM</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
let table;

$(document).ready(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#customer').select2({
        width: '100%',
        placeholder: '-- Semua Customer --',
        allowClear: true
    });

    table = $('#rptqcg-report-table').DataTable({

        processing: true,
        serverSide: false,

        responsive: false,

        scrollX: true,
        scrollCollapse: true,

        autoWidth: false,

        fixedHeader: false,

        deferRender: true,

        language: {
            processing: `
                <div class="d-flex justify-content-center align-items-center p-4">
                    <div class="spinner-border text-primary"></div>
                </div>
            `,
            search: "Cari :",
            lengthMenu: "Tampilkan _MENU_ baris",
            zeroRecords: "Data tidak ditemukan",
            info: "Data _START_ - _END_ dari _TOTAL_",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(difilter dari _MAX_ data)"
        },

        dom:'Bfrtip',

        buttons:[
            {
                extend:'excelHtml5',
                text:'<i class="fas fa-file-excel text-success"></i> Excel',
                className: 'btn btn-success excel-button'
            },
            {
                extend:'pdfHtml5',
                text:'<i class="fas fa-file-pdf text-danger"></i> PDF',
                orientation:'landscape',
                pageSize:'A4',
                className: 'btn btn-danger pdf-button'
            },
            {
                extend:'print',
                text:'<i class="fas fa-print text-info"></i> Print',
                className: 'btn btn-info print-button'
            }
        ],

        ajax:{
            url:"{{ route('rptqcg.getDataResult') }}",
            type:"POST",

            data:function(d){

                d.customer=$('#customer').val();
                d.frdate=$('#frdate').val();
                d.todate=$('#todate').val();

            },

            dataSrc:function(json){

                return json.result;

            },

            complete:function(){

                table.columns.adjust();

            }

        },

        columns:[
            {data:'id_sample'},
            {data:'sample_date'},
            {data:'customer'},
            {data:'aplikasi'},
            {data:'detail'},
            {data:'item'},
            {data:'color'},
            {
                data:'size_gsm',
                className:'text-end'
            },
            {
                data:'size_length',
                className:'text-end'
            },
            {
                data:'size_width',
                className:'text-end'
            },
            {
                data:'qty',
                className:'text-end'
            },
            {data:'uom'}
        ]
    });


    $('#frdate,#todate,#customer').on('change', function(){

        table.ajax.reload();

    });

    $(window).on('resize', function(){

        setTimeout(function(){

            table.columns.adjust();

        },false);

    });

    @if ($authorize && $authorize->excel == '0')
        $('.buttons-excel').remove();
    @endif

    @if ($authorize && $authorize->pdf == '0')
        $('.buttons-pdf').remove();
    @endif

    @if ($authorize && $authorize->print == '0')
        $('.buttons-print').remove();
    @endif

});
</script>

<style>
    #rptqcg-report-table {
        width: 100% !important;
    }
    #rptqcg-report-table td{
        white-space: normal;
        word-break: break-word;
    }
    #rptqcg-report-table .dt-button.excel-button {
        background-color: #198754 !important;
        border-color: #198754 !important;
        color: #fff !important;
    }
    #rptqcg-report-table .dt-button.pdf-button {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #fff !important;
    }
    #rptqcg-report-table .dt-button.print-button {
        background-color: #0dcaf0 !important;
        border-color: #0dcaf0 !important;
        color: #000 !important;
    }
</style>
@endpush