@extends('layouts.base_view')
@section('title')
<li class="breadcrumb-item">Reports</li>
<li class="breadcrumb-item active">DOI Report</li>
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-end">
                            <div class="col-md-auto">
                                <label class="col-form-label">From</label>
                                <input type="date" id="start_date" class="form-control" value="{{ date('Y-m-01') }}">
                            </div>
                            <div class="col-md-auto">
                                <label class="col-form-label">Until</label>
                                <input type="date" id="end_date" class="form-control" value="{{ date('Y-m-d') }}">
                            </div>
                            <div class="col-md-auto">
                                <label class="col-form-label">Store</label>
                                <select id="filter_store" class="form-control">
                                    <option value="">-- All Stores --</option>
                                    @foreach($stores as $store)
                                    <option value="{{ $store->id }}">{{ $store->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-auto">
                                <label class="col-form-label">DOI Status</label>
                                <select id="filter_doi_status" class="form-control">
                                    <option value="">-- All --</option>
                                    <option value="Critical">Critical</option>
                                    <option value="Normal">Normal</option>
                                    <option value="Overstock">Overstock</option>
                                    <option value="No Target">No Target</option>
                                </select>
                            </div>
                            <div class="col-md-auto">
                                <button id="btn_search" class="btn btn-outline-info btn-sm">
                                    <i class="fa fa-search"></i> Find
                                </button>
                                <button id="btn_export" class="btn btn-outline-success btn-sm button-cek-permission" data-permission="reports.doi_report__export">
                                    <i class="fa fa-download"></i> Export Excel
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="doi_table" class="table w-100 table-sm table-hover">
                            <thead class="bg-warning">
                                <tr>
                                    <th>No</th>
                                    <th>SO Number</th>
                                    <th>Store Name</th>
                                    <th>SO Date</th>
                                    <th>Material Code</th>
                                    <th>Material Name</th>
                                    <th>UOM</th>
                                    <th>Ending Stock</th>
                                    <th>Avg Forecast 7d</th>
                                    <th>DOI</th>
                                    <th>DOI Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(function() {
    $('body').addClass('sidebar-collapse');
    const link = '{{ route("reports.doi_report") }}';

    const table = $('#doi_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: link,
            type: 'POST',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
                d.type = 'list';
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
                d.store_id = $('#filter_store').val();
                d.doi_status = $('#filter_doi_status').val();
            }
        },
        columns: [
            { data: 0, orderable: false, searchable: false, className: 'text-center' },
            { data: 1 },
            { data: 2 },
            { data: 3, className: 'text-center' },
            { data: 4 },
            { data: 5 },
            { data: 6, className: 'text-center' },
            { data: 7, className: 'text-right' },
            { data: 8, className: 'text-right' },
            { data: 9, className: 'text-right' },
            { data: 10, className: 'text-center' },
        ],
        order: [[0, 'default_']],
        responsive: true,
        lengthChange: true,
        autoWidth: false,
    });

    $('#btn_search').click(function() { table.ajax.reload(); });

    $('#btn_export').click(function() {
        postToNewTab(link, {
            type: 'excel',
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            store_id: $('#filter_store').val(),
            doi_status: $('#filter_doi_status').val(),
        });
    });

    function postToNewTab(url, data) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        form.target = '_blank';
        const csrf = document.createElement('input');
        csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        for (const key in data) {
            const input = document.createElement('input');
            input.type = 'hidden'; input.name = key; input.value = data[key] ?? '';
            form.appendChild(input);
        }
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
});
</script>
@endsection