@extends('layouts.app')

@section('title')
    {{ $pageInfo['title'] }}
@endsection

@section('admin-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
                    </ol>
                </div>
            </div>

            {{-- Filter Filter Generator Jurnal - Sinkron 11 s/d 13 Bulan Berikut --}}
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card shadow-sm border-0" style="border-radius: 15px;">
                        <div class="card-body">
                            <form action="{{ route('reports.jurnal.generate') }}" method="GET" id="formGenerateJurnal">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted" for="region">Pilih Region</label>
                                            <select name="region" id="region" class="form-control select2">
                                                <option value="">Semua Region</option>
                                                @foreach ($regions as $region)
                                                    <option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
                                                        {{ $region->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted" for="cabang">Pilih Cabang <span class="text-danger">*</span></label>
                                            <select name="cabang" id="cabang" class="form-control select2" required>
                                                <option value="">Semua Cabang</option>
                                                {{-- Data diisi via JavaScript --}}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted" for="month">Periode Bulan</label>
                                            <select name="month" id="month" class="form-control">
                                                <option value="">Pilih Bulan</option>
                                                @php
                                                    $months = ['january' => 'Januari', 'february' => 'Februari', 'march' => 'Maret', 'april' => 'April', 'may' => 'Mei', 'june' => 'Juni', 'july' => 'Juli', 'august' => 'Agustus', 'september' => 'September', 'october' => 'Oktober', 'november' => 'November', 'december' => 'Desember'];
                                                @endphp
                                                @foreach($months as $key => $val)
                                                    <option value="{{ $key }}" {{ (request()->month ?? strtolower(date('F'))) == $key ? 'selected' : '' }}>{{ $val }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted" for="year">Periode Tahun</label>
                                            <select name="year" id="year" class="form-control">
                                                <option value="">Pilih Tahun</option>
                                                @for ($i = 2024; $i <= date('Y'); $i++)
                                                    <option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-group mb-3">
                                            <label class="small fw-bold text-muted" for="accounting_period">Periode Accounting</label>
                                            <input type="text" name="accounting_period" id="accounting_period" class="form-control" placeholder="Contoh: 2026/04" value="{{ request()->accounting_period ?? date('Y/m') }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <div class="form-group mt-2">
                                            <button type="submit" class="btn btn-primary px-4 shadow-sm">
                                                <i class="fas fa-filter mr-1"></i> Generate Jurnal
                                            </button>
                                            <a href="{{ route('reports.jurnal') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Fungsi untuk memuat cabang berdasarkan region
        function loadCabang(regionCode, selectedCabang = null) {
            const cabangSelect = $('#cabang');
            if (regionCode) {
                fetch(`/api/cabang-by-region/${regionCode}`)
                    .then(response => response.json())
                    .then(data => {
                        cabangSelect.html('<option value="">Semua Cabang</option>');
                        data.forEach(cabang => {
                            const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
                            cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
                        });
                    })
                    .catch(error => console.error('Error fetching cabang:', error));
            } else {
                cabangSelect.html('<option value="">Semua Cabang</option>');
            }
        }

        // Trigger saat region diubah
        $('#region').on('change', function() {
            loadCabang(this.value);
        });

        // Jalankan saat halaman pertama kali dimuat (untuk persistence filter)
        const initialRegion = '{{ request()->region }}';
        const initialCabang = '{{ request()->cabang }}';
        if (initialRegion) {
            loadCabang(initialRegion, initialCabang);
        }

        // Otomatis sinkronisasi ketikan field 'Periode Accounting' saat Dropdown Bulan/Tahun diubah oleh user
        $('#month, #year').on('change', function() {
            const yearVal = $('#year').val();
            const monthSelect = document.getElementById('month');
            const monthIdx = monthSelect.selectedIndex;
            
            if(yearVal && monthIdx > 0) {
                // Merubah index bulan menjadi format 2 digit pad string (ex: April -> "04")
                const paddedMonth = String(monthIdx).padStart(2, '0');
                $('#accounting_period').val(`${yearVal}/${paddedMonth}`);
            }
        });
    });
</script>
@endsection