@extends('layouts.base_view')
@section('title')
<li class="breadcrumb-item">Reports</li>
<li class="breadcrumb-item active">LSM 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">
                                <button id="btn_search" class="btn btn-outline-info btn-sm">
                                    <i class="fa fa-search"></i> Find
                                </button>
                                <button id="btn_export_summary" class="btn btn-outline-success btn-sm button-cek-permission" data-permission="reports.lsm_report__export">
                                    <i class="fa fa-download"></i> Export Summary
                                </button>
                                <button id="btn_export_detail" class="btn btn-outline-primary btn-sm button-cek-permission" data-permission="reports.lsm_report__export">
                                    <i class="fa fa-file-excel"></i> Export Detail
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="lsm_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>PIC Input</th>
                                    <th>Total Items</th>
                                    <th>Items Empty</th>
                                    <th>Items Suggested</th>
                                    <th>Items Adjusted</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(function() {
    $('body').addClass('sidebar-collapse');

    const link = '{{ route("reports.lsm_report") }}';

    const table = $('#lsm_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();
            }
        },
        columns: [
            { data: 0, orderable: false, searchable: false, className: 'text-center' },
            { data: 1 },
            { data: 2 },
            { data: 3 },
            { data: 4 },
            { data: 5, className: 'text-center' },
            { data: 6, className: 'text-center' },
            { data: 7, className: 'text-center' },
            { data: 8, className: 'text-center' },
            { data: 9, className: 'text-center' },
            { data: 10 },
        ],
        order: [[0, 'default_']],
        responsive: true,
        lengthChange: true,
        autoWidth: false,
    });

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

    $('#btn_export_summary').click(function() {
        postToNewTab(link, {
            type: 'excel_summary',
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            store_id: $('#filter_store').val(),
        });
    });

    $('#btn_export_detail').click(function() {
        postToNewTab(link, {
            type: 'excel_detail',
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            store_id: $('#filter_store').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