@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@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="d-flex flex-wrap align-items-center gap-2">
                            <a href="{{ route('forecasts.create') }}" class="btn btn-sm btn-info mb-2 mb-md-0 mr-2 button-cek-permission" data-permission="forecasts.create">
                                <i class="fas fa-file-upload"></i> Upload Excel
                            </a>
                            <button type="button" class="btn btn-sm btn-secondary mb-2 mb-md-0 mr-2 button-cek-permission" data-permission="forecasts.download_template" id="download-template-btn">
                                <i class="fas fa-file-download"></i> Download Template
                            </button>
                            <button type="button" class="btn btn-sm btn-success mb-2 mb-md-0 button-cek-permission" data-permission="forecasts.export_horizontal" id="export-horizontal-btn">
                                <i class="fas fa-file-excel"></i> Export Excel
                            </button>
                        </div>

                        <!-- Filter Row -->
                        <div class="d-flex flex-wrap align-items-end mt-3" style="gap:8px;">
                            <div>
                                <label class="mb-1 small font-weight-bold">Bulan</label>
                                <select id="filter-month" class="form-control form-control-sm select2 select2-warning" style="min-width:130px;">
                                    @foreach($months as $num => $name)
                                        <option value="{{ $num }}" {{ $num == $current_month ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="mb-1 small font-weight-bold">Tahun</label>
                                <select id="filter-year" class="form-control form-control-sm select2 select2-warning" style="min-width:90px;">
                                    @for($y = $current_year - 1; $y <= $current_year + 1; $y++)
                                        <option value="{{ $y }}" {{ $y == $current_year ? 'selected' : '' }}>{{ $y }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div style="min-width:220px; max-width:380px; flex:1;">
                                <label class="mb-1 small font-weight-bold">Store</label>
                                <select id="filter-stores" class="form-control form-control-sm select2 select2-warning" multiple style="width:100%;">
                                    @foreach($user_stores as $us)
                                        <option value="{{ $us->store_id }}"
                                            {{ in_array($us->store_id, $default_store_ids) ? 'selected' : '' }}>
                                            {{ $us->store->name ?? $us->store_id }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="id_data_table" class="table table-hover table-sm">
                                <thead class="bg-warning">
                                    <tr>
                                        <th width="5%">No</th>
                                        <th>Nomor Forecast</th>
                                        <th>Store</th>
                                        <th>Periode</th>
                                        <th>Tanggal Upload</th>
                                        <th>Status</th>
                                        <th width="15%">Diubah</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Export Horizontal Modal -->
<div class="modal fade" id="exportHorizontalModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ekspor Data Forecast</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="exportHorizontalForm">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <small><i class="fas fa-info-circle"></i> Ekspor data forecast untuk periode yang dipilih dari store saat ini.</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Tahun</label>
                                <select class="form-control select2 select2-warning" name="year" required>
                                    @for($year = date('Y'); $year <= date('Y') + 2; $year++)
                                        <option value="{{ $year }}" {{ $year == date('Y') ? 'selected' : '' }}>{{ $year }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Bulan</label>
                                <select class="form-control select2 select2-warning" name="month" required>
                                    @foreach($months as $num => $name)
                                        <option value="{{ $num }}" {{ $num == $current_month ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-warning" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-sm btn-warning button-cek-permission" data-permission="forecasts.export_horizontal">
                        <i class="fas fa-file-export"></i> Ekspor
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Download Template Modal -->
<div class="modal fade" id="downloadTemplateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Unduh Template</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="downloadTemplateForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Tahun</label>
                                <select class="form-control select2 select2-warning" name="year" required>
                                    @for($year = date('Y'); $year <= date('Y') + 2; $year++)
                                        <option value="{{ $year }}" {{ $year == date('Y') ? 'selected' : '' }}>{{ $year }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Bulan</label>
                                <select class="form-control select2 select2-warning" name="month" required>
                                    @foreach($months as $num => $name)
                                        <option value="{{ $num }}" {{ $num == $current_month ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-warning" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-sm btn-warning button-cek-permission" data-permission="forecasts.download_template">
                        <i class="fas fa-download"></i> Unduh
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<form action="" id="delete-form" method="post">
    @method('delete')
    @csrf
</form>

<script>
$(function() {
    // Init select2 for filters
    $('#filter-month, #filter-year').select2({ theme: 'bootstrap4', minimumResultsForSearch: -1 });
    $('#filter-stores').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih store...',
        allowClear: true
    });

    // DataTable
    var table = $('#id_data_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("forecasts.index") }}',
            data: function(d) {
                d.month     = $('#filter-month').val();
                d.year      = $('#filter-year').val();
                d.store_ids = $('#filter-stores').val(); // array
            }
        },
        columns: [
            { data: 0, name: 'no',              orderable: false, searchable: false },
            { data: 1, name: 'forecast_number' },
            { data: 2, name: 'store_id' },
            { data: 3, name: 'period' },
            { data: 4, name: 'upload_date' },
            { data: 5, name: 'status' },
            { data: 6, name: 'created_at' }
        ],
        responsive: false,
        lengthChange: true,
        autoWidth: false,
        language: {
            processing: "Memuat...",
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
            infoFiltered: "(difilter dari _MAX_ total data)",
            paginate: { first: "Pertama", last: "Terakhir", next: "Selanjutnya", previous: "Sebelumnya" },
            emptyTable: "Tidak ada data tersedia",
            zeroRecords: "Tidak ada data yang cocok"
        },
        drawCallback: function() {
            $('[data-toggle="tooltip"]').tooltip();
        }
    });

    // Reload table on filter change
    $('#filter-month, #filter-year, #filter-stores').on('change', function() {
        table.ajax.reload();
    });

    // Download Template
    $('#download-template-btn').click(function() {
        $('#downloadTemplateModal').modal('show');
    });

    $('#downloadTemplateForm').submit(function(e) {
        e.preventDefault();
        const year  = $(this).find('select[name="year"]').val();
        const month = $(this).find('select[name="month"]').val();
        window.location.href = '{{ route("forecasts.download_template") }}?year=' + year + '&month=' + month;
        $('#downloadTemplateModal').modal('hide');
    });

    // Export Horizontal
    $('#export-horizontal-btn').click(function() {
        $('#exportHorizontalModal').modal('show');
    });

    $('#exportHorizontalForm').submit(function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        const form = $('<form>', { method: 'POST', action: '{{ route("forecasts.export_horizontal") }}', target: '_blank' });
        form.append($('<input>', { type: 'hidden', name: '_token', value: $('meta[name="csrf-token"]').attr('content') }));
        const params = new URLSearchParams(formData);
        for (const [key, value] of params) {
            form.append($('<input>', { type: 'hidden', name: key, value: value }));
        }
        $('body').append(form);
        form.submit();
        form.remove();
        $('#exportHorizontalModal').modal('hide');
    });
});
</script>
@endsection