@extends('layouts.master')

@section('content')
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0 font-weight-bold">{{ $title }}</h5>
            <a href="{{ route($route.'.create') }}" class="btn btn-sm btn-primary float-right">Upload</a>
        </div>

        <div class="card-body">
    
            <div class="row">
                <div class="col-md-2 pr-1" id="inventoryYearContainer">
                    <div class="form-group">
                        <label for="inventoryYear">Filter Tahun Inventory:</label>
                        <div class="input-group">
                            <select name="inventoryYear" id="inventoryYear" class="form-control">
                                @for ($year = date('Y'); $year >= 2000; $year--)
                                    <option value="{{ $year }}"
                                        {{ request('inventoryYear', date('Y')) == $year ? 'selected' : '' }}>
                                        {{ $year }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 pr-1" id="sectorContainer">
                    <div class="form-group">
                        <label for="sector">Filter Sektor:</label>
                        <select id="sector" name="sector" class="form-control">
                            <option value="">SEMUA SEKTOR</option>
                            @foreach ($sectors as $sector)
                                <option value="{{ $sector->code }}"
                                    {{ request('sector', null) == $sector->code ? 'selected' : '' }}>
                                    {{ $sector->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Sub-Sector Filter (Container hidden initially) -->
                <div class="col-md-2 pr-1" id="subSectorContainer" style="visibility: hidden; height: 0;">
                    <div class="form-group">
                        <label for="subSector">Filter Sub Sektor:</label>
                        <select id="subSector" name="subSector" class="form-control w-100">
                            <option value="">SEMUA SUB SEKTOR</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table w-100" 
                    data-search="true"
                    data-toggle="table"
                    data-pagination="true"
                    data-toolbar="#toolbar"
                    data-show-refresh="false"
                    data-url="{{route($route.'.grid')}}"
                    data-ajax-options='{"xhrFields": {"withCredentials": true}}'
                    data-sort-name="ids"
                    data-sort-order="desc"
                    data-page-size="10"
                    data-id-field="id"
                    id="grid-data">
                        <thead class="table-primary text-primary">
                        <tr>
                            <th data-width="150" data-field="action">#</th>
                            <th data-field="sector">Sektor</th>
                            <th data-field="inventory_year">Tahun Inventory</th>
                            <th data-field="name">Judul</th>
                            <th data-field="agency">Instansi</th>
                            <th data-field="file">File</th>
                            <th data-field="created_at">Tgl Upload</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            $('#sector').select2({
                placeholder: 'Pilih Kategori',
                allowClear: true
            });
            $('#subSector').select2({
                placeholder: 'Pilih Sub Sektor',
                allowClear: true 
            });
            $('#inventoryYear').select2({
                placeholder: 'Pilih Tahun',
            });

            var table = $('#data-table');

            // Handle sector change and fetch sub-sectors dynamically
            $('#sector').on('change', function() {
                var sectorCode = $(this).val();
                fetchSubSectors(sectorCode);
                table.draw();
            });

            // Handle sub-sector change
            $('#subSector').on('change', function() {
                table.draw();
            });

            // Handle inventory year change
            $('#inventoryYear').on('change', function() {
                table.draw();
            });

            // Function to fetch sub-sectors based on the selected sector
            function fetchSubSectors(sectorCode) {
                $('#subSector').empty().append('<option value="">SEMUA SUB SEKTOR</option>').addClass('form-control');

                if (sectorCode) {
                    $.ajax({
                        url: '{{ route('modules.subsectors.fetch') }}', // Define route to fetch sub-sectors
                        method: 'GET',
                        data: {
                            sector_code: sectorCode
                        },
                        success: function(data) {
                            if (data.length > 0) {
                                // Make the sub-sector container visible while keeping layout intact
                                $('#subSectorContainer').css({
                                    'visibility': 'visible',
                                    'height': 'auto'
                                });

                                $.each(data, function(index, subSector) {
                                    $('#subSector').append('<option value="' + subSector.code +
                                        '">' + subSector.name + '</option>');
                                });

                                // Reinitialize select2 for sub-sector after data is appended
                                $('#subSector').select2({
                                    placeholder: 'Pilih Sub Sektor',
                                    allowClear: true
                                });
                            } else {
                                // Hide the sub-sector container if no data
                                $('#subSectorContainer').css({
                                    'visibility': 'hidden',
                                    'height': '0'
                                });
                            }
                        },
                        error: function() {
                            alert('Error fetching sub-sectors.');
                        }
                    });
                } else {
                    // Hide sub-sector if no sector is selected
                    $('#subSectorContainer').css({
                        'visibility': 'hidden',
                        'height': '0'
                    });
                }
            }
        });
    </script>
@endsection