@extends('layouts.app')

@section('content')
    <div class="flex justify-center mt-10">

        <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-lg max-w-md w-full">

            <h5 class="mb-6 text-2xl font-bold tracking-tight text-gray-900 text-center">Jana Simulasi</h5>

            <form method="GET" action="{{ route('wtd.simulasi.show') }}">
                @csrf

                <div class="mb-4">
                    <label for="branch" class="block mb-2 text-sm font-medium text-gray-900">Sila Pilih Cawangan</label>
                    <select id="branch" name="kodcaw" required
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                        <option disabled {{ old('kodcaw') ? '' : 'selected' }}>Pilih Cawangan</option>
                        @foreach ($cawangan as $cawanganItem)
                            <option value="{{ $cawanganItem['kodcaw'] }}"
                                {{ old('kodcaw') == $cawanganItem['kodcaw'] ? 'selected' : '' }}>
                                {{ $cawanganItem['details_caw'] }}
                            </option>
                        @endforeach
                    </select>

                    @error('kodcaw')
                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="year" class="block mb-2 text-sm font-medium text-gray-900">Sila Pilih Tahun</label>
                    <select id="year" name="tahun" required
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                        <option disabled {{ old('tahun') ? '' : 'selected' }}>Pilih Tahun</option>
                        @for ($year = 2020; $year <= now()->year; $year++)
                            <option value="{{ $year }}" {{ old('tahun') == $year ? 'selected' : '' }}>
                                {{ $year }}</option>
                        @endfor
                    </select>
                    @error('tahun')
                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <button type="submit"
                    class="w-full px-4 py-2 text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 focus:ring-4 focus:ring-yellow-300">
                    Submit
                </button>
            </form>
        </div>
    </div>

    <script>
        // let branch = document.getElementById('branch');
        // // alert(branch);
        // branch.addEventListener('change',function(){
        //     alert('Hello');
        // } )

        // Ensure the DOM is fully loaded before accessing elements
        // document.addEventListener('DOMContentLoaded', function() {
        //     let branch = document.getElementById('branch');

        //     // Check if the element exists
        //     if (branch) {
        //         branch.addEventListener('change', function(e) {
        //             alert('Hello');
        //             alert(branch.value);
        //             let q = document.getElementById('cawangan_selector')
        //             console.log(e);
        //             q.innerText = branch.value;
        //         });
        //     } else {
        //         console.error('Element with ID "branch" not found.');
        //     }
        // });


        // function updateHeaderCawangan(selectedCawangan) {
        //     alert('hello');
        //     let componentElement = document.querySelector('cawangan-component');

        //     // Create a custom event
        //     let event = new CustomEvent('clickEvent_', {
        //     detail: 'Some data', // Pass any data you need
        //     });

        //     // Dispatch the event on the component's DOM element
        //     componentElement.dispatchEvent(event);
            
        //     axios.post('/update-cawangan', {
        //         kodcaw: selectedCawangan
        //     }).then(response => {
        //         console.log('Cawangan updated successfully');
        //     }).catch(error => {
        //         console.error('Error updating cawangan:', error);
        //     });
        // }


    </script>

    @include('layouts.footer')
@endsection