@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">
                            <a href="{{ route('forecasts.create') }}" class="btn btn-sm btn-warning mb-2 mb-md-0 mr-2 button-cek-permission" data-permission="forecasts.create" data-toggle="tooltip" title="Unggah Forecast">
                                <i class="fas fa-upload"></i><span class="d-none d-sm-inline ml-1">Unggah Forecast</span>
                            </a>
                            <button type="button" class="btn btn-sm btn-warning mb-2 mb-md-0 mr-2 button-cek-permission" data-permission="forecasts.download_template" id="download-template-btn" data-toggle="tooltip" title="Unduh Template">
                                <i class="fas fa-download"></i><span class="d-none d-sm-inline ml-1">Unduh Template</span>
                            </button>
                            <button type="button" class="btn btn-sm btn-warning mb-2 mb-md-0 button-cek-permission" data-permission="forecasts.export_horizontal" id="export-horizontal-btn" data-toggle="tooltip" title="Ekspor Data">
                                <i class="fas fa-file-export"></i><span class="d-none d-sm-inline ml-1">Ekspor Data</span>
                            </button>
                        </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>Dibuat</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 class="text-sm"><i class="fas fa-info-circle"></i> Ini akan mengekspor 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 form-control-sm select2 select2-warning" data-dropdown-css-class="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 form-control-sm select2 select2-warning" data-dropdown-css-class="select2-warning" name="month" required>
                                    @for($month = 1; $month <= 12; $month++)
                                        <option value="{{ $month }}" {{ $month == date('n') ? 'selected' : '' }}>
                                        {{ date('F', mktime(0, 0, 0, $month, 1)) }}
                                        </option>
                                        @endfor
                                </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 form-control-sm select2 select2-warning" data-dropdown-css-class="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 form-control-sm select2 select2-warning" data-dropdown-css-class="select2-warning" name="month" required>
                                    @for($month = 1; $month <= 12; $month++)
                                        <option value="{{ $month }}" {{ $month == date('n') ? 'selected' : '' }}>
                                        {{ date('F', mktime(0, 0, 0, $month, 1)) }}
                                        </option>
                                        @endfor
                                </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() {
        // Initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();
        
        $('#id_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route("forecasts.index") }}',
            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(settings) {
                $('[data-toggle="tooltip"]').tooltip();
            }
        }).buttons().container().appendTo('#id_data_table_wrapper .col-md-6:eq(0)');


        // 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();

            const url = '{{ route("forecasts.download_template") }}?year=' + year + '&month=' + month;
            window.location.href = url;

            $('#downloadTemplateModal').modal('hide');
        });

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

        $('#exportHorizontalForm').submit(function(e) {
            e.preventDefault();

            const formData = $(this).serialize();
            const url = '{{ route("forecasts.export_horizontal") }}?' + formData;

            // Create a temporary form to submit as POST
            const form = $('<form>', {
                'method': 'POST',
                'action': '{{ route("forecasts.export_horizontal") }}',
                'target': '_blank'
            });

            // Add CSRF token
            form.append($('<input>', {
                'type': 'hidden',
                'name': '_token',
                'value': $('meta[name="csrf-token"]').attr('content')
            }));

            // Add form data
            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