@extends('layouts.genindex')

@section('title')
    <i class="fas fa-chalkboard-teacher filter-blue"></i> Bayaran KM / KPM (Lain-lain bayaran)
@endsection

@section('subtitle', 'Sila lengkapkan butiran berikut sebelum meneruskan pembayaran')

@section('list')
    <div class="fdb-box row mx-1 py-4">
        <div class="col-12">
            <form id="app" method="post" action="{{ action('CourseController@bllshow') }}" data-parsley-validate="">
                @csrf
                <div class="row mt-4">
                    <div class="col-12 col-md">
                        <label class="required">Jenis Institut</label>
                        <select id="institute_type" name="institute_type" class="form-control" required>
                            <option selected disabled>Sila pilih</option>
                            @foreach ($inst_type as $type)
                                <option value="{{ $type->code }}">{{ $type->code }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-12 col-md">
                        <label class="required">Institut</label>
                        <select id="kolej" name="kolej" class="form-control" required>
                            <option selected disabled>Sila pilih</option>
                            @foreach ($institutes as $inst)
                                <option data-type="{{ $inst->institute_type }}" value="{{ $inst->code }}">
                                    {{ $inst->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Level -->
                <div class="row mt-4">
                    <div class="col-12 col-md">
                        <label class="required">Peringkat Pengajian</label>
                        <select id="level" name="level" class="form-control" required>
                            <option selected disabled>Sila pilih</option>
                            @foreach ($level as $l)
                                <option data-type="{{ $l->code }}" value="{{ $l->id }}">{{ $l->description }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Year -->
                <div class="row mt-4">
                    <div class="col-12 col-md">
                        <label class="required">Sesi Pengajian</label>
                        <select id="year" name="year" class="form-control" required>
                            <option selected disabled>Sila pilih</option>
                            @foreach ($year as $session)
                                <option data-type="{{ $session->inst_code }}" value="{{ $session->id }}">
                                    {{ $session->sesi }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Semester -->
                <div class="row mt-4">
                    <div class="col-12 col-md">
                        <label class="required">Semester</label>
                        <select id="semester" name="semester" class="form-control" required>
                            <option selected disabled>Sila pilih</option>
                            @foreach ($semester as $s)
                                <option data-type="{{ $s->inst_code }}" value="{{ $s->semester }}">{{ $s->semester }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Fee -->
                <div class="row mt-4">
                    <div class="col-12 col-md">
                        <label class="required">Jenis Pembayaran</label>
                        <select id="yuran" name="yuran" class="form-control" required>
                            <option {{ old('yuran') !== null ? '' : 'selected' }} disabled>Sila pilih</option>
                            @foreach ($yuran as $y)
                                <option {{ strcmp(old('yuran'), $y->kod) == 0 ? 'selected' : '' }}
                                    value="{{ $y->kod }}">{{ $y->yuran }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Peralatan -->
                <div class="row mt-4" id="peralatan-section" style="display: none;">
                    <div class="col-12 col-md">
                        <label class="required">Peralatan</label>
                        <select id="peralatan" name="peralatan" class="form-control">
                            <option {{ old('peralatan') !== null ? '' : 'selected' }} disabled>Sila pilih</option>
                            @foreach ($yuran_peralatan as $peralatan)
                                <option value="{{ $peralatan->kod }}">{{ $peralatan->yuran }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Denda -->
                <div class="row mt-4" id="denda-section" style="display: none;">
                    <div class="col-12 col-md">
                        <label class="required">Jenis Kesalahan</label>
                        <select id="denda" name="denda" class="form-control">
                            <option {{ old('denda') !== null ? '' : 'selected' }} disabled>Sila pilih</option>
                            @foreach ($yuran_denda as $denda)
                                <option value="{{ $denda->kod }}">{{ $denda->yuran }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12 col-md text-right">
                        <button type="submit" class="btn btn-primary">Teruskan</button>
                    </div>
                </div>

            </form>
        </div>
    </div>

@endsection


@section('page_scripts')
    <script>
        var kolej_url = "{{ action('CourseController@bllindex') }}";
    </script>
    <script>
        $(document).ready(function() {
            // Function to handle yuran=10 visibility
            function updateYuran10Visibility() {
                var selectedKolej = $('#kolej').val();
                var selectedSemester = $('#semester').val();

                $('#yuran option').each(function() {
                    if ($(this).val() == '10') {
                        $(this).toggle(selectedKolej === '0130' && selectedSemester == '4');
                    }
                });

                // Reset yuran if the selected value is now hidden
                if ($('#yuran').val() == '10' && !(selectedKolej === '0130' && selectedSemester == '4')) {
                    $('#yuran').val('');
                }
            }

            // Function to handle level option visibility
            function updateLevelVisibility() {
                var selectedKolej = $('#kolej').val();

                $('#level option').each(function() {
                    var $option = $(this);
                    // Hide option with value 5 if kolej is not '0504'
                    if ($option.val() == '5') {
                        $option.toggle(selectedKolej === '0504');
                    }
                });

                // If currently selected level is 5 and it's now hidden, reset selection
                if ($('#level').val() == '5' && selectedKolej !== '0504') {
                    $('#level').val('');
                }
            }

            function updateYuran11Visibility() {
              var selectedKolej = $('#kolej').val();
              var selectedLevel = $('#level').val();

              $('#yuran option').each(function() {
                  var $option = $(this);
                  if ($option.val() === '11') {
                      // Show only if kolej is '0504' and level is '5'
                      $option.toggle(selectedKolej === '0504' && selectedLevel === '5');
                  }
              });

              // Reset yuran to empty if currently set to '11' but condition no longer matches
              if ($('#yuran').val() === '11' && !(selectedKolej === '0504' && selectedLevel === '5')) {
                  $('#yuran').val('');
              }
          }

            function updateYearVisibilityBasedOnLevel() {
                var selectedLevel = $('#level').val();
                var selectedInstitute = $('#institute_type').val(); // Get institute type

                $('#year option').each(function() {
                    var $option = $(this);
                    var optionValue = $option.val();

                    if (selectedInstitute === 'KM') {
                        // Only show year=1 if institute is KM
                        $option.toggle(optionValue === '1' || optionValue === '2');
                    } else if (selectedLevel == '5') {
                        // Show only year 12 or 13 if level is 5
                        $option.toggle(optionValue === '12' || optionValue === '13' || optionValue === '14' || optionValue === '17' || optionValue === '18');
                    } else {
                        // Otherwise, hide 12 and 13
                        $option.toggle(!(['1', '2', '12', '13','14','17','18'].includes(optionValue)));
                    }
                });

                // Reset selection if it's invalid based on current filtering
                var currentYear = $('#year').val();
                if (selectedInstitute === 'KM' && currentYear !== '1' && currentYear !== '2') {
                    $('#year').val('');
                } else if (selectedLevel != '5' && ['1', '2', '12', '13', '14','17','18'].includes(currentYear)) {
                    $('#year').val('');
                }
            }

            // Handle institute type change
            $('#institute_type').change(function() {
                var selectedType = $(this).val();
                console.log('Selected Type:', selectedType);

                // Filter options based on selected institute type
                $('#kolej option').each(function() {
                    var optionType = $(this).data('type');
                    $(this).toggle(optionType === selectedType || selectedType === undefined || $(
                        this).val() === '');
                });
                $('#kolej').val('');

                $('#level option').each(function() {
                    var optionType = $(this).data('type');
                    $(this).toggle(optionType === selectedType || selectedType === undefined || $(
                        this).val() === '');
                });
                $('#level').val('');

                $('#semester option').each(function() {
                    var optionType = $(this).data('type');
                    $(this).toggle(optionType === selectedType || selectedType === undefined || $(
                        this).val() === '');
                });
                $('#semester').val('');

                $('#year option').each(function() {
                    var optionType = $(this).data('type');
                    $(this).toggle(optionType === selectedType || selectedType === undefined || $(
                        this).val() === '');
                });

                updateYuran10Visibility();
                updateLevelVisibility();
                updateYearVisibilityBasedOnLevel();
                updateYuran11Visibility();
            });

            // Handle kolej change
            $('#kolej').change(function() {
                var selectedKolej = $(this).val();
                console.log('Selected Kolej:', selectedKolej);
                updateYuran10Visibility();
                updateLevelVisibility();
                updateYuran11Visibility();
            });

            // Handle semester change
            $('#semester').change(function() {
                var selectedSemester = $(this).val();
                console.log('Selected Semester:', selectedSemester);
                updateYuran10Visibility();
            });

            $('#level').change(function() {
                var selectedLevel = $(this).val();
                console.log('Selected Level:', selectedLevel);
                updateYearVisibilityBasedOnLevel();
                updateYuran11Visibility();
            });

            $('#year').change(function() {
                var selectedYear = $(this).val();
                console.log('Selected Year:', selectedYear);
            });

            // Handle yuran change
            $('#yuran').change(function() {
                var selectedYuran = $(this).val();
                console.log('Selected Yuran:', selectedYuran);

                // Hide both sections by default
                $('#peralatan-section').hide();
                $('#denda-section').hide();

                if (selectedYuran == '4') { // Assuming '4' is the code for peralatan
                    $('#peralatan-section').show();
                } else if (selectedYuran == '6') { // Assuming '6' is the code for denda
                    $('#denda-section').show();
                }
            });

            // Trigger change events to initialize options
            $('#institute_type').trigger('change');
            $('#kolej').trigger('change');
            $('#level').trigger('change');
            $('#year').trigger('change');
            $('#semester').trigger('change');
            $('#yuran').trigger('change');
        });
    </script>

@endsection