@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
        <div class="pb-2.5 border card border-agi-100">
            <div class="card-header bg-agi-50" id="basic_settings">
                <div class="flex flex-row gap-1.5 card-title">
                    Tambah Pembayaran
                </div>
                <div class="flex gap-2 items-center">
                    <a href="{{ route('pembayaran.index') }}" class="btn btn-xs btn-info"><i
                            class="ki-filled ki-exit-left"></i> Back</a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('pembayaran.store') }}" method="POST" class="grid gap-5"
                    enctype="multipart/form-data" id="pembayaranForm">
                    @csrf

                    <!-- Hidden fields untuk menyimpan ID yang dipilih -->
                    <input type="hidden" name="permohonan_id" id="permohonan_id" value="{{ old('permohonan_id') }}">
                    <input type="hidden" name="penawaran_id" id="penawaran_id" value="{{ old('penawaran_id') }}">
                    <input type="hidden" name="debitur_id" id="debitur_id" value="{{ old('debitur_id') }}">
                    <input type="hidden" name="type" id="create" value="create">
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Debitur <span class="text-danger">*</span>
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <select name="debitur_search" id="debitur_search"
                                class="input w-full @error('debitur_id') border-danger bg-danger-light @enderror"
                                placeholder="Cari debitur berdasarkan kode atau nama...">
                                <option value="">Pilih Debitur</option>
                            </select>
                            @error('debitur_id')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Nomor Registrasi
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="text" name="nomor_registrasi" id="nomor_registrasi"
                                class="input w-full @error('nomor_registrasi') border-danger bg-danger-light @enderror"
                                value="{{ old('nomor_registrasi') }}" placeholder="Nomor Registrasi">
                            @error('nomor_registrasi')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Nomor Tiket
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="text" name="nomor_tiket" id="nomor_tiket"
                                class="input w-full @error('nomor_tiket') border-danger bg-danger-light @enderror"
                                value="{{ old('nomor_tiket') }}" placeholder="Nomor Tiket">
                            @error('nomor_tiket')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Nominal Bayar <span class="text-danger">*</span>
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="number" name="nominal_bayar" id="nominal_bayar"
                                class="input w-full @error('nominal_bayar') border-danger bg-danger-light @enderror"
                                value="{{ old('nominal_bayar') }}" placeholder="Masukkan nominal bayar" min="0"
                                step="0.01">
                            @error('nominal_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Bukti Bayar <span class="text-danger">*</span>
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="file" name="bukti_bayar" id="bukti_bayar"
                                class="file-input w-full @error('bukti_bayar') border-danger bg-danger-light @enderror"
                                accept=".pdf,.jpg,.jpeg,.png">
                            <small class="mt-1 text-gray-600">Format yang diizinkan: PDF, JPG, JPEG, PNG (Max: 2MB)</small>
                            @error('bukti_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Catatan
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <textarea name="catatan" id="catatan" rows="4"
                                class="textarea w-full @error('catatan') border-danger bg-danger-light @enderror"
                                placeholder="Masukkan catatan (opsional)">{{ old('catatan') }}</textarea>
                            @error('catatan')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex gap-2 justify-end">
                        <a href="{{ route('pembayaran.index') }}" class="btn btn-secondary">
                            Batal
                        </a>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="ki-filled ki-check"></i> Simpan Pembayaran
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        /**
         * Inisialisasi TomSelect untuk pencarian debitur dengan AJAX
         * Menggunakan autocomplete untuk mencari berdasarkan kode atau nama debitur
         */
        document.addEventListener('DOMContentLoaded', function() {
            // Inisialisasi TomSelect untuk field debitur
            const debiturSelect = new window.TomSelect('#debitur_search', {
                valueField: 'id',
                labelField: 'display_name',
                searchField: ['kode_debitur', 'name'],
                placeholder: 'Ketik kode atau nama debitur untuk mencari...',
                load: function(query, callback) {
                    // Minimal 2 karakter untuk mulai pencarian
                    if (query.length < 2) {
                        callback();
                        return;
                    }

                    // Tampilkan loading state
                    this.loading = true;

                    // AJAX request untuk mencari debitur
                    fetch(`{{ route('api.debitur.search') }}?q=${encodeURIComponent(query)}`, {
                            method: 'GET',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json',
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            // Log untuk debugging
                            console.log('Debitur search results:', data);

                            // Format data untuk TomSelect
                            const formattedData = data.data.map(item => ({
                                id: item.id,
                                display_name: `${item.kode_debitur} - ${item.name}`,
                                kode_debitur: item.kode_debitur,
                                name: item.name
                            }));

                            callback(formattedData);
                            this.loading = false;
                        })
                        .catch(error => {
                            console.error('Error fetching debitur data:', error);
                            callback();
                            this.loading = false;

                            // Tampilkan pesan error ke user
                            alert(
                                'Terjadi kesalahan saat mencari data debitur. Silakan coba lagi.'
                            );
                        });
                },
                render: {
                    option: function(data, escape) {
                        return `<div class="px-3 py-2 hover:bg-gray-50">
                    <div class="font-medium text-gray-900">${escape(data.kode_debitur)}</div>
                    <div class="text-sm text-gray-600">${escape(data.name)}</div>
                </div>`;
                    },
                    item: function(data, escape) {
                        return `<div>${escape(data.kode_debitur)} - ${escape(data.name)}</div>`;
                    }
                },
                onChange: function(value) {
                    // Log untuk debugging
                    console.log('Debitur selected:', value);

                    if (value) {
                        const selectedOption = this.options[value];
                        if (selectedOption) {
                            // Set hidden field untuk debitur_id
                            document.getElementById('debitur_id').value = value;

                            // Jika ada data permohonan, isi field terkait
                            if (selectedOption.permohonan) {
                                const permohonan = selectedOption.permohonan;

                                // Set hidden fields
                                document.getElementById('permohonan_id').value = permohonan.id || '';
                                document.getElementById('penawaran_id').value = permohonan
                                    .penawaran_id || '';

                                // Set visible fields
                                document.getElementById('nomor_registrasi').value = permohonan
                                    .nomor_registrasi || '';
                                document.getElementById('nomor_tiket').value = permohonan.nomor_tiket ||
                                    '';

                                // Set nominal bayar jika ada dari penawaran
                                if (permohonan.nominal_penawaran) {
                                    document.getElementById('nominal_bayar').value = permohonan
                                        .nominal_penawaran;
                                }
                            } else {
                                // Clear fields jika tidak ada data permohonan
                                document.getElementById('permohonan_id').value = '';
                                document.getElementById('penawaran_id').value = '';
                                document.getElementById('nomor_registrasi').value = '';
                                document.getElementById('nomor_tiket').value = '';
                            }
                        }
                    } else {
                        // Clear semua field jika tidak ada yang dipilih
                        document.getElementById('debitur_id').value = '';
                        document.getElementById('permohonan_id').value = '';
                        document.getElementById('penawaran_id').value = '';
                        document.getElementById('nomor_registrasi').value = '';
                        document.getElementById('nomor_tiket').value = '';
                    }
                }
            });

            /**
             * Validasi form sebelum submit
             * Memastikan field wajib sudah diisi
             */
            document.getElementById('pembayaranForm').addEventListener('submit', function(e) {
                const debiturId = document.getElementById('debitur_id').value;
                const nominalBayar = document.getElementById('nominal_bayar').value;
                const buktiBayar = document.getElementById('bukti_bayar').files[0];

                let errors = [];

                // Validasi debitur
                if (!debiturId) {
                    errors.push('Debitur harus dipilih');
                }

                // Validasi nominal bayar
                if (!nominalBayar || parseFloat(nominalBayar) <= 0) {
                    errors.push('Nominal bayar harus diisi dan lebih dari 0');
                }

                // Validasi bukti bayar
                if (!buktiBayar) {
                    errors.push('Bukti bayar harus diupload');
                } else {
                    // Validasi ukuran file (max 2MB)
                    if (buktiBayar.size > 2 * 1024 * 1024) {
                        errors.push('Ukuran file bukti bayar maksimal 2MB');
                    }

                    // Validasi tipe file
                    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
                    if (!allowedTypes.includes(buktiBayar.type)) {
                        errors.push('Format file bukti bayar harus PDF, JPG, JPEG, atau PNG');
                    }
                }

                // Tampilkan error jika ada
                if (errors.length > 0) {
                    e.preventDefault();
                    alert('Terdapat kesalahan:\n\n' + errors.join('\n'));
                    return false;
                }

                // Disable submit button untuk mencegah double submit
                const submitBtn = document.getElementById('submitBtn');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="ki-filled ki-loading"></i> Menyimpan...';

                // Log untuk debugging
                console.log('Form submitted with data:', {
                    debitur_id: debiturId,
                    permohonan_id: document.getElementById('permohonan_id').value,
                    penawaran_id: document.getElementById('penawaran_id').value,
                    nominal_bayar: nominalBayar
                });
            });

            // Re-enable submit button jika ada error dari server
            @if ($errors->any())
                const submitBtn = document.getElementById('submitBtn');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="ki-filled ki-check"></i> Simpan Pembayaran';
            @endif
        });
    </script>
@endpush