@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')
                            
                            <button class="btn btn-primary mb-0" id="btn-preview" onclick="showPreviewModal(event)">
                                <i class="fas fa-save 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">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                    enctype="multipart/form-data" class="needs-validation" novalidate>
                    @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_vendor }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <div class="invalid-feedback">
                                                        Supplier tidak boleh kosong.
                                                    </div>
                                                @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>
                                                <div class="invalid-feedback">
                                                    Email PIC 1 tidak boleh kosong.
                                                </div>
                                                @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>
                                                <div class="invalid-feedback">
                                                    Nama PIC 1 tidak boleh kosong.
                                                </div>
                                                @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 pattern="^0\d{9,12}$"
                                                    inputmode="tel">
                                                <div class="invalid-feedback">
                                                    Nomor Telepon PIC 1 tidak boleh kosong (contoh 08231231231).
                                                </div>
                                                @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') }}" pattern="^0\d{9,12}$"
                                                    inputmode="tel">
                                                @error('nomor_telepon_pic2')
                                                    <div class="text-danger text-xs">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="horizontal dark mt-3">
                                    <div class="form-group">
                                        <label class="form-control-label mb-2">Tujuan Pengiriman Kredensial
                                            <span class="text-danger">*</span>
                                        </label>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="card h-100 credential-option border-primary"
                                                    for="delivery-direct" style="cursor: pointer;">
                                                    <div class="card-body p-3">
                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input credential-method" type="radio"
                                                                name="credential_delivery_method" id="delivery-direct"
                                                                value="direct_supplier"
                                                                {{ old('credential_delivery_method', 'direct_supplier') === 'direct_supplier' ? 'checked' : '' }}>
                                                            <span class="form-check-label font-weight-bold">
                                                                Kirim langsung ke Supplier
                                                            </span>
                                                        </div>
                                                        <p class="text-xs text-secondary mb-0">
                                                            Kredensial dikirim ke email PIC Supplier yang diisi pada form.
                                                        </p>
                                                        <span class="badge bg-gradient-success mt-2">Disarankan</span>
                                                    </div>
                                                </label>
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="card h-100 credential-option" for="delivery-internal"
                                                    style="cursor: pointer;">
                                                    <div class="card-body p-3">
                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input credential-method" type="radio"
                                                                name="credential_delivery_method" id="delivery-internal"
                                                                value="internal_purchasing"
                                                                {{ old('credential_delivery_method') === 'internal_purchasing' ? 'checked' : '' }}>
                                                            <span class="form-check-label font-weight-bold">
                                                                Kirim ke Internal Purchasing
                                                            </span>
                                                        </div>
                                                        <p class="text-xs text-secondary mb-0">
                                                            Kredensial diterima staf internal untuk diteruskan secara manual.
                                                        </p>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>

                                        <div id="internal-recipient-wrapper" class="p-3 bg-gray-100 rounded"
                                            style="display: none;">
                                            <label for="procurement_email_recipient" class="form-control-label">
                                                Penerima Internal <span class="text-danger">*</span>
                                            </label>
                                            <input type="email"
                                                class="form-control @error('procurement_email_recipient') is-invalid @enderror"
                                                id="procurement_email_recipient" name="procurement_email_recipient"
                                                value="{{ old('procurement_email_recipient') }}"
                                                placeholder="Contoh: purchasing@perusahaan.com"
                                                autocomplete="email">
                                            <div class="invalid-feedback">
                                                Masukkan alamat email internal yang valid.
                                            </div>
                                            <small class="form-text text-muted">
                                                Kredensial supplier akan dikirim ke alamat email ini.
                                            </small>
                                            @error('procurement_email_recipient')
                                                <div class="text-danger text-xs">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        @error('credential_delivery_method')
                                            <div class="text-danger text-xs">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content border-0 shadow-lg overflow-hidden">
                <div class="modal-header bg-gradient-primary border-0 px-4 py-3">
                    <div class="d-flex align-items-center">
                        <div class="d-flex align-items-center justify-content-center bg-white rounded-circle me-3 flex-shrink-0"
                            style="width: 42px; height: 42px;">
                            <i class="fas fa-user-check text-primary" style="position: static;"></i>
                        </div>
                        <div>
                            <h5 class="modal-title text-white mb-0" id="previewModalLabel">Konfirmasi Penetapan Supplier</h5>
                            <p class="text-white text-xs opacity-8 mb-0">
                                Periksa data supplier dan tujuan pengiriman kredensial
                            </p>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Tutup"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="alert alert-light border d-flex align-items-start mb-4">
                        <i class="fas fa-info-circle text-info me-3 mt-1"></i>
                        <p class="text-sm mb-0">
                            Setelah disimpan, akun supplier akan dibuat dan kredensial dikirim sesuai tujuan yang
                            dipilih.
                        </p>
                    </div>

                    <div class="card border-0 bg-gray-100 mb-3">
                        <div class="card-body p-3">
                            <p class="text-xs text-uppercase font-weight-bold text-secondary mb-3">
                                <i class="fas fa-box text-primary me-2"></i>Material dan Supplier
                            </p>
                            <div class="row">
                                <div class="col-md-6 mb-3 mb-md-0">
                                    <span class="text-xs text-secondary d-block">Material</span>
                                    <h6 class="mb-0 text-break" id="preview-material">-</h6>
                                </div>
                                <div class="col-md-3 mb-3 mb-md-0">
                                    <span class="text-xs text-secondary d-block">Supplier</span>
                                    <h6 class="mb-0 text-break" id="preview-supplier">-</h6>
                                </div>
                                <div class="col-md-3">
                                    <span class="text-xs text-secondary d-block">Produsen</span>
                                    <h6 class="mb-0 text-break" id="preview-produsen">-</h6>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="card border h-100">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="d-flex align-items-center justify-content-center bg-gradient-primary rounded-circle me-2"
                                            style="width: 34px; height: 34px;">
                                            <i class="fas fa-user text-white" style="position: static; font-size: .8rem;"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">PIC Utama</h6>
                                            <span class="badge bg-gradient-danger">Wajib</span>
                                        </div>
                                    </div>
                                    <div class="mb-2">
                                        <span class="text-xs text-secondary d-block">Nama</span>
                                        <span class="text-sm font-weight-bold text-dark text-break"
                                            id="preview-nama-pic1">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <span class="text-xs text-secondary d-block">Email</span>
                                        <span class="text-sm font-weight-bold text-dark text-break"
                                            id="preview-email1">-</span>
                                    </div>
                                    <div>
                                        <span class="text-xs text-secondary d-block">Nomor Telepon</span>
                                        <span class="text-sm font-weight-bold text-dark" id="preview-telp1">-</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3" id="preview-pic2-wrapper" style="display: none;">
                            <div class="card border h-100">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="d-flex align-items-center justify-content-center bg-gradient-info rounded-circle me-2"
                                            style="width: 34px; height: 34px;">
                                            <i class="fas fa-user text-white" style="position: static; font-size: .8rem;"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">PIC Kedua</h6>
                                            <span class="badge bg-gradient-secondary">Opsional</span>
                                        </div>
                                    </div>
                                    <div class="mb-2">
                                        <span class="text-xs text-secondary d-block">Nama</span>
                                        <span class="text-sm font-weight-bold text-dark text-break"
                                            id="preview-nama-pic2">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <span class="text-xs text-secondary d-block">Email</span>
                                        <span class="text-sm font-weight-bold text-dark text-break"
                                            id="preview-email2">-</span>
                                    </div>
                                    <div>
                                        <span class="text-xs text-secondary d-block">Nomor Telepon</span>
                                        <span class="text-sm font-weight-bold text-dark" id="preview-telp2">-</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card border border-success mb-0">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-start">
                                <div class="d-flex align-items-center justify-content-center bg-gradient-success rounded me-3 flex-shrink-0"
                                    style="width: 40px; height: 40px;">
                                    <i class="fas fa-envelope text-white" style="position: static;"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="text-xs text-uppercase font-weight-bold text-secondary d-block">
                                        Tujuan Pengiriman Kredensial
                                    </span>
                                    <h6 class="mb-1" id="preview-delivery-method">-</h6>
                                    <span class="text-sm text-secondary text-break" id="preview-delivery-email">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-gray-100 px-4 py-3">
                    <button type="button" class="btn btn-outline-secondary mb-0" data-bs-dismiss="modal">
                        <i class="fas fa-pencil-alt me-2"></i>Periksa Kembali
                    </button>
                    <button type="submit" form="{{ $dmenu }}-form" class="btn btn-primary mb-0">
                        <i class="fas fa-save me-2"></i>Simpan dan Kirim Kredensial
                    </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 --"
            });

            function updateCredentialDelivery() {
                const method = $('input[name="credential_delivery_method"]:checked').val();
                const isInternal = method === 'internal_purchasing';

                $('#internal-recipient-wrapper').toggle(isInternal);
                $('#procurement_email_recipient').prop('required', isInternal);

                $('.credential-option').removeClass('border-primary shadow-sm');
                $('input[name="credential_delivery_method"]:checked')
                    .closest('.credential-option')
                    .addClass('border-primary shadow-sm');
            }

            $('.credential-method').on('change', updateCredentialDelivery);
            updateCredentialDelivery();

            // 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
            const form = $('#{{ $dmenu }}-form');
            let isFormValid = true;

            // 1. Hapus semua status validasi (merah/hijau) sebelumnya
            form.find('.form-control').removeClass('is-invalid is-valid');

            // 2. Cek semua field yang WAJIB (required)
            form.find('input[required], select[required]').each(function () {
                if (!this.checkValidity()) {
                    $(this).addClass('is-invalid'); // Kasih border merah
                    isFormValid = false;
                } else {
                    $(this).addClass('is-valid'); // Kasih ceklis hijau
                }
            });
            // Jika form tidak valid, jangan lanjutkan
            if (!isFormValid) {
                return;
            }
            // Ambil data dari form
            const materialName = $('input[name="nama_material"]').val();
            const supplierName = $('#supplier-select option:selected').text().trim() || '-';
            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();
            const deliveryMethod = $('input[name="credential_delivery_method"]:checked').val();
            const internalEmail = $('#procurement_email_recipient').val();
            const deliveryMethodLabel = deliveryMethod === 'internal_purchasing'
                ? 'Internal Purchasing'
                : 'Langsung ke Supplier';
            const deliveryEmail = deliveryMethod === 'internal_purchasing'
                ? internalEmail
                : pic1Email;

            // 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-delivery-method').text(deliveryMethodLabel);
            $('#preview-delivery-email').text(deliveryEmail || '-');

            // 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