@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- Bagian Header dengan Tombol Kembali dan Preview --}}
    <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-arrow-left me-1"></i><span class="font-weight-bold">Kembali</button>
                        @if ($authorize->add == '1')
                            {{-- Tombol Simpan diubah menjadi Preview --}}
                            <button class="btn btn-primary mb-0" id="btn-preview" onclick="showPreviewModal(event)">
                                <i class="fas fa-eye me-1"></i><span class="font-weight-bold">Preview</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                    enctype="multipart/form-data">
                    @csrf
                    {{-- Kirim material_id secara tersembunyi --}}
                    <input type="hidden" name="material_id" value="{{ $material->material_id }}">

                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Input Supplier</p>
                            <hr class="horizontal dark mt-0">
                            @include('components.alert')

                            <div class="row">
                                {{-- Kolom Kiri --}}
                                <div class="col-md-6">
                                    {{-- Nama Material (Read-only) --}}
                                    <div class="form-group">
                                        <label class="form-control-label">Nama Material</label>
                                        <input class="form-control" type="text" name="nama_material"
                                            value="{{ $material->nama_material }}" readonly
                                            style="background-color: #e9ecef;">
                                    </div>

                                    <div class="row">
                                        {{-- Supplier --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">Supplier <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-control @error('supplier_id') is-invalid @enderror"
                                                    name="supplier_id" id="supplier-select" required>
                                                    <option></option> {{-- Dibiarkan kosong untuk placeholder Select2 --}}
                                                    @foreach($suppliers as $supplier)
                                                        <option value="{{ $supplier->supplier_id }}" {{ old('supplier_id') == $supplier->supplier_id ? 'selected' : '' }}>
                                                            {{ $supplier->nama_supplier }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('supplier_id') <div class="text-danger text-xs">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Produsen (input text biasa) --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">Produsen</label>
                                                <input class="form-control @error('produsen') is-invalid @enderror"
                                                    type="text" name="produsen" value="{{ old('produsen') }}">
                                                @error('produsen') <div class="text-danger text-xs">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        {{-- Email 1 --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">Email 1 <span
                                                        class="text-danger">*</span></label>
                                                <input class="form-control @error('email_pic') is-invalid @enderror"
                                                    type="email" name="email_pic" value="{{ old('email_pic') }}" required>
                                                @error('email_pic') <div class="text-danger text-xs">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Email 2 (Opsional) --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">Email 2 (Opsional)</label>
                                                <input class="form-control" type="email" name="email_pic2"
                                                    value="{{ old('email_pic2') }}">
                                                @error('email_pic2')
                                                    <div class="text-danger text-xs">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        {{-- Nama PIC 1 --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">Nama PIC 1 <span
                                                        class="text-danger">*</span></label>
                                                <input class="form-control @error('nama_pic') is-invalid @enderror"
                                                    type="text" name="nama_pic" value="{{ old('nama_pic') }}" required>
                                                @error('nama_pic') <div class="text-danger text-xs">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Nama PIC 2 (Opsional) --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">Nama PIC 2 (Opsional)</label>
                                                <input class="form-control" type="text" name="nama_pic2"
                                                    value="{{ old('nama_pic2') }}">
                                                @error('nama_pic2')
                                                    <div class="text-danger text-xs">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        {{-- No Telepon 1 --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">No Telepon 1 <span
                                                        class="text-danger">*</span></label>
                                                <input class="form-control @error('nomor_telepon_pic') is-invalid @enderror"
                                                    type="text" name="nomor_telepon_pic"
                                                    value="{{ old('nomor_telepon_pic') }}" required>
                                                @error('nomor_telepon_pic') <div class="text-danger text-xs">{{ $message }}
                                                </div> @enderror
                                            </div>
                                        </div>

                                        {{-- No Telepon 2 (Opsional) --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-control-label">Nomor Telepon 2 (Opsional)</label>
                                                <input class="form-control" type="text" name="nomor_telepon_pic2"
                                                    value="{{ old('nomor_telepon_pic2') }}">
                                                    @error('nomor_telepon_pic2')
                                                        <div class="text-danger text-xs">{{ $message }}</div>
                                                    @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>
    {{-- =============================================== --}}
    {{-- === MODAL UNTUK PREVIEW DATA (SESUAI PERMINTAAN) === --}}
    {{-- =============================================== --}}
    <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">Konfirmasi Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Mohon periksa kembali data yang akan Anda simpan:</p>
                    <ul class="list-group">
                        <li class="list-group-item"><strong>Nama Material:</strong> <span id="preview-material"></span></li>
                        <li class="list-group-item"><strong>Supplier:</strong> <span id="preview-supplier"></span></li>
                        <li class="list-group-item"><strong>Produsen:</strong> <span id="preview-produsen"></span></li>
                        <li class="list-group-item"><strong>Nama PIC 1:</strong> <span id="preview-nama-pic1"></span></li>
                        <li class="list-group-item"><strong>Email 1:</strong> <span id="preview-email1"></span></li>
                        <li class="list-group-item"><strong>No Telepon 1:</strong> <span id="preview-telp1"></span></li>
                        <li class="list-group-item"><strong>Nama PIC 2:</strong> <span id="preview-nama-pic2"></span></li>
                        <li class="list-group-item"><strong>Email 2:</strong> <span id="preview-email2"></span></li>
                        <li class="list-group-item"><strong>No Telepon 2:</strong> <span id="preview-telp2"></span></li>
                        {{-- <li class="list-group-item" id="preview-pic2-wrapper" style="display: none;">
                            <strong>Data PIC 2:</strong>
                            <ul class="list-unstyled ms-3 mt-2">
                                <li>Nama: <span id="preview-nama-pic2"></span></li>
                                <li>Email: <span id="preview-email2"></span></li>
                                <li>No Telepon: <span id="preview-telp2"></span></li>
                            </ul>
                        </li> --}}
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    {{-- Tombol Simpan Final ada di sini --}}
                    <button type="button" class="btn btn-primary" id="final-save-button">Ya, Simpan Data</button>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- PENTING: Tambahkan link JS Select2 di layout utama Anda (layouts/app.blade.php) sebelum </body> --}}
{{--
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> --}}

@push('js')
    <script>
        $(document).ready(function () {
            // Inisialisasi Select2 pada dropdown supplier
            $('#supplier-select').select2({
                theme: "bootstrap-5",
                placeholder: "-- Cari atau Pilih Supplier --"
            });

            // Event listener untuk tombol simpan di dalam modal
            $('#final-save-button').on('click', function () {
                // Submit form utama
                $('#{{ $dmenu }}-form').submit();
            });
        });

        // Fungsi untuk menampilkan modal preview
        function showPreviewModal(event) {
            event.preventDefault(); // Mencegah form submit

            // Ambil data dari form
            const materialName = $('input[name="nama_material"]').val();
            const supplierName = $('input[name="supplier_id"]').val() || $('#supplier-select option:selected').text();
            const producerName = $('input[name="produsen"]').val() || '-';
            const pic1Name = $('input[name="nama_pic"]').val();
            const pic1Email = $('input[name="email_pic"]').val();
            const pic1Telp = $('input[name="nomor_telepon_pic"]').val();
            const pic2Name = $('input[name="nama_pic2"]').val();
            const pic2Email = $('input[name="email_pic2"]').val();
            const pic2Telp = $('input[name="nomor_telepon_pic2"]').val();

            // Masukkan data ke dalam modal
            $('#preview-material').text(materialName);
            $('#preview-supplier').text(supplierName);
            $('#preview-produsen').text(producerName);
            $('#preview-nama-pic1').text(pic1Name);
            $('#preview-email1').text(pic1Email);
            $('#preview-telp1').text(pic1Telp);
            $('#preview-nama-pic2').text(pic2Name);
            $('#preview-email2').text(pic2Email);
            $('#preview-telp2').text(pic2Telp);

            // Jika ada PIC 2, tampilkan informasinya
            if (pic2Name || pic2Email || pic2Telp) {
                $('#preview-nama-pic2').text(pic2Name || '-');
                $('#preview-email2').text(pic2Email || '-');
                $('#preview-telp2').text(pic2Telp || '-');
                $('#preview-pic2-wrapper').show();
            } else {
                $('#preview-pic2-wrapper').hide();
            }

            // Tampilkan modal
            $('#previewModal').modal('show');
        }
    </script>
@endpush