@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" onclick="validateAndSubmit()">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Input {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Nomor Surat</label>
                                        <input type="text" class="form-control" name="nomor_surat" value=""
                                            placeholder="-" readonly>
                                        @error('nomor_surat')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">ID Temuan</label>
                                        <select class="form-select" name="id_temuan" id="select-temuan" required>
                                            <option value="">Pilih Temuan</option>
                                            @foreach ($temuan as $t)
                                                <option value="{{ $t->id_temuan }}" data-tanggal="{{ $t->tanggal_temuan }}"
                                                    data-jenis="{{ $t->complain }}"
                                                    {{ request()->get('id_temuan') == $t->id_temuan ? 'selected' : '' }}>
                                                    {{ $t->id_temuan }} - {{ $t->complain }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_temuan')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">Tanggal Temuan</label>
                                        <input type="date" class="form-control" name="tanggal_temuan" id="input-tanggal"
                                            required>
                                        @error('tanggal_temuan')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Surat Peringatan Ke - </label>

                                        <select class="form-select" name="sp_ke" id="sp_ke" required>
                                            <option value="">-</option>

                                            @foreach ($spke as $sk)
                                                <option value="{{ $sk->value }}">
                                                    {{ $sk->name }}
                                                </option>
                                            @endforeach
                                    </div>

                                    <div class="form-group">
                                        {{-- <label class="form-control-label">Jenis Surat</label> --}}
                                        <input type="hidden" name="jenis_surat" value="Surat Peringatan">
                                        {{-- <p class="mb-2">Surat Peringatan</p> --}}
                                    </div>


                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Jenis Temuan</label>
                                        <textarea class="form-control" name="jenis_temuan" id="input-jenis" rows="3" maxlength="255"
                                            value="  {{ request()->get('id_temuan') == $t->id_temuan ? 'selected' : '' }}>
                                                    {{ $t->id_temuan }} - {{ $t->complain }}"></textarea>
                                        @error('jenis_temuan')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>



                                    <div class="form-group">
                                        <label class="form-control-label">Saran</label>
                                        <textarea class="form-control" name="saran" rows="3" maxlength="255"></textarea>
                                        @error('saran')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const select = document.getElementById('select-temuan');
            const inputTanggal = document.getElementById('input-tanggal');
            const inputJenis = document.getElementById('input-jenis');

            function updateFieldsFromSelectedOption() {
                const selectedOption = select.options[select.selectedIndex];
                const tanggal = selectedOption.getAttribute('data-tanggal');
                const jenis = selectedOption.getAttribute('data-jenis');

                if (tanggal) inputTanggal.value = tanggal;
                if (jenis) inputJenis.value = jenis;
            }

            // === Saat user mengubah pilihan
            select.addEventListener('change', updateFieldsFromSelectedOption);

            // === Saat halaman pertama kali load (jika ada id_temuan di URL)
            const urlParams = new URLSearchParams(window.location.search);
            const idTemuan = urlParams.get('id_temuan');

            if (idTemuan) {
                select.value = idTemuan;
                updateFieldsFromSelectedOption(); // langsung isi juga field lain
            }
        });
        $(document).ready(function() {
            // Ambil parameter id_temuan dari URL
            const urlParams = new URLSearchParams(window.location.search);
            const idTemuan = urlParams.get('id_temuan');

            // Jika ada id_temuan, set nilai select option
            if (idTemuan) {
                $('select[name="id_temuan"]').val(idTemuan);
            }
        });

        function validateAndSubmit() {
            const form = document.getElementById('{{ $dmenu }}-form');
            if (form.checkValidity()) {
                form.submit();
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: 'Mohon isi semua field yang wajib diisi',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        }
    </script>
@endsection