@extends('layouts.app')
@section('title', 'List Konsinyasi - Dazry Laundry App')
@section('page_title', 'List Konsinyasi')

@section('content')

<section class="bg-white text-sm">

    <div class="flex justify-between items-center mb-4">
        <a href="{{ route('penjualan-konsinyasi.create') }}" class="bg-blue-700 hover:bg-blue-500 text-white font-bold py-2 px-4  transition duration-300 ease-in-out transform hover:scale-105">
            <i class="fa-solid fa-plus mr-2"></i> Add
        </a>
        <div class="flex items-center space-x-2">
            <span class="text-gray-700">Filter Status:</span>
            <select id="statusFilter" class="form-select border-gray-300 ">
                <option value="pending" {{ $status == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="terjual_sebagian" {{ $status == 'terjual_sebagian' ? 'selected' : '' }}>Terjual Sebagian</option>
                <option value="selesai" {{ $status == 'selesai' ? 'selected' : '' }}>Selesai</option>
            </select>
        </div>
    </div>

    <div class="bg-white  py-3">
        @if($penjualans->isEmpty())
            <p class="text-gray-500 text-center">Belum ada data konsinyasi yang tercatat.</p>
        @else
            <div class="overflow-x-auto min-h-[400px]">
                <table class="min-w-full leading-normal ">
                    <thead class="bg-blue-700 text-white">
                        <tr>
                            <th scope="col" class="px-3 py-3 border-b-2  text-left text-xs font-semibold  uppercase tracking-wider">No.</th>
                            <th class="px-3 py-3 border-b-2  text-left text-xs font-semibold  uppercase tracking-wider">
                                Tanggal Kirim
                            </th>
                            <th class="px-3 py-3 border-b-2  text-left text-xs font-semibold  uppercase tracking-wider">
                                Pelanggan
                            </th>
                            <th class="px-3 py-3 border-b-2  text-left text-xs font-semibold  uppercase tracking-wider">
                                Status
                            </th>
                            <th class="px-3 py-3 border-b-2  text-left text-xs font-semibold  uppercase tracking-wider">
                                Total Terjual
                            </th>
                            
                            <th class="px-3 py-3 border-b-2  text-right text-xs font-semibold  uppercase tracking-wider">
                                Aksi
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($penjualans as $konsinyasi)
                            <tr>
                                <td class="px-3 border-b border-gray-200 bg-white text-sm">{{ $loop->iteration }}</td>
                                <td class="px-3 border-b border-gray-200 bg-white text-sm">
                                    <p class="text-gray-900 whitespace-no-wrap">{{ \Carbon\Carbon::parse($konsinyasi->tanggal_kirim)->format('d F Y') }}</p>
                                </td>
                                <td class="px-3 border-b border-gray-200 bg-white text-sm">
                                    <p class="text-gray-900 whitespace-no-wrap">{{ $konsinyasi->pelanggan->nama ?? 'N/A' }}</p>
                                </td>
                                <td class="px-3 border-b border-gray-200 bg-white text-sm">
                                    <span class="relative inline-block px-3 py-1 font-semibold text-white leading-tight">
                                        <span aria-hidden="true" class="absolute inset-0 opacity-50 
                                           {{ $status == 'pending' ? 'bg-yellow-500' : '' }}
                                             {{ $status == 'proses' ? 'bg-blue-500' : '' }}
                                             {{ $status == 'terjual_sebagian' ? 'bg-orange-500' : '' }}
                                             {{ $status == 'retur' ? 'bg-red-500' : '' }}
                                            {{ $status == 'proses' ? 'bg-blue-500' : '' }}
                                            {{ $status == 'selesai' ? 'bg-green-500' : '' }}
                                        "></span>
                                        <span class="relative">{{ ucfirst($status) }}</span>
                                    </span>
                                </td>
                                <td class="px-3 border-b border-gray-200 bg-white text-sm">
                                    <p class="text-gray-900 whitespace-no-wrap">Rp {{ number_format($konsinyasi->total_terjual, 2, ',', '.') }}</p>
                                </td>
                                {{-- <td class="px-3 border-b border-gray-200 bg-white text-sm text-right">
                                   <a href="{{ route('penjualan-konsinyasi.show', $konsinyasi->id) }}" class="text-blue-600 hover:text-blue-900 mr-3">Detail</a>
                                    @if($konsinyasi->status == 'pending' || $konsinyasi->status == 'terjual_sebagian')
                                        <button onclick="openModal('{{ $konsinyasi->id }}', 'penjualan')" class="text-green-600 hover:text-green-900 mr-3">Proses Penjualan</button>
                                        <button onclick="openModal('{{ $konsinyasi->id }}', 'retur')" class="text-indigo-600 hover:text-indigo-900 mr-3">Proses Retur</button>
                                    @endif
                                    <form action="{{ route('penjualan-konsinyasi.destroy', $konsinyasi->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Apakah Anda yakin ingin menghapus catatan konsinyasi ini? Ini akan mengembalikan stok produk yang belum terjual.');">Hapus</button>
                                    </form>

                                </td> --}}
                                <td class="px-3 border-b border-gray-200 bg-white text-sm text-right">
                                <div class="relative inline-block text-left">
                                    <button type="button" class="dropdown-toggle btn-action btn-setting text-gray-600 hover:text-blue-600 p-2 rounded-full hover:bg-gray-100" 
                                            onclick="toggleDropdown('dropdown-1')">
                                        <i class="fas fa-cog"></i>
                                    </button>
                                    
                                    <div id="dropdown-1" class="dropdown-aksi dropdown-hidden absolute right-0 z-10 mt-2 w-48 origin-top-right  bg-white  ring-1 ring-black ring-opacity-5 focus:outline-none">
                                        <div class="py-1">
                                            <a href="{{ route('penjualan-konsinyasi.show', $konsinyasi->id) }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <i class="fas fa-eye mr-2 text-blue-500"></i> Detail
                                            </a>
                                            <a href="{{ route('penjualan-konsinyasi.edit', $konsinyasi->id) }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <i class="fas fa-edit mr-2 text-blue-500"></i> Edit
                                            </a>

                                            <a href="#" onclick="openModal('{{ $konsinyasi->id }}', 'penjualan')" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <i class="fas fa-cash-register mr-2 text-green-500"></i> Proses Penjualan
                                            </a>
                                            <a href="#" onclick="openModal('{{ $konsinyasi->id }}', 'retur')" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <i class="fas fa-undo mr-2 text-indigo-500"></i> Proses Retur
                                            </a>

                                            {{-- Tambahkan tautan Cetak Nota Penjualan --}}
                                            <a href="{{ route('penjualan-konsinyasi.cetakNota', $konsinyasi->id) }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" target="_blank">
                                               <i class="fas fa-print mr-2 text-indigo-500"></i> Cetak Nota
                                            </a>
                                            
                                            {{-- Link untuk melihat/mencetak jika surat jalan sudah ada --}}
                                            @if ($konsinyasi->suratJalan)
                                                <a href="{{ route('surat-jalan.show', $konsinyasi->suratJalan->id) }}" title="{{ $konsinyasi->suratJalan->nomor_surat_jalan }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                    <i class="fas fa-download mr-2 text-indigo-500"></i> Lihat Surat Jalan
                                                </a>
                                            @else
                                                <a href="{{ route('penjualan-konsinyasi.cetakSuratJalan', $konsinyasi->id) }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" target="_blank">
                                                     <i class="fas fa-download mr-2 text-indigo-500"></i> Cetak Surat Jalan
                                                </a>
                                            @endif

                                            <form action="{{ route('penjualan-konsinyasi.destroy', $konsinyasi->id) }}" method="POST" class="border-t border-gray-100">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-gray-100" 
                                                        onclick="return confirm('Apakah Anda yakin ingin menghapus?')">
                                                    <i class="fas fa-trash-alt mr-2"></i> Delete
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>

    {{-- Dalam kolom aksi di tabel index atau tombol di halaman show --}}
    {{-- <a href="{{ route('surat-jalan.create', ['penjualan_id' => $konsinyasi->id, 'penjualan_type' => get_class($konsinyasi)]) }}" class="text-purple-600 hover:text-purple-900 ml-2">
        Buat Surat Jalan
    </a> --}}

    
    
                            </td>


                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $penjualans->appends(['status' => $status])->links() }}
            </div>
        @endif
    </div>

    <!-- Modal untuk Proses Penjualan dan Retur -->
    <div id="modal-container" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2   bg-white">
            <h3 class="text-lg font-bold mb-4" id="modal-title"></h3>
            <form id="modal-form" method="POST" action="">
                @csrf
                <input type="hidden" name="penjualan_konsinyasi_id" id="modal-konsinyasi-id">
                <div id="modal-content"></div>
                <div class="mt-4 text-right">
                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4  mr-2"><i class="fa-solid fa-pen-to-square mr-2"></i> Proses</button>
                    <button type="button" onclick="closeModal()" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 "> <i class="fa-solid fa-xmark mr-2"></i>Cancel</button>
                </div>
            </form>
        </div>
    </div>
</section>

<script>
    document.getElementById('statusFilter').addEventListener('change', function() {
        window.location.href = `{{ route('penjualan-konsinyasi.index') }}?status=${this.value}`;
    });

    const modalContainer = document.getElementById('modal-container');
    const modalTitle = document.getElementById('modal-title');
    const modalForm = document.getElementById('modal-form');
    const modalContent = document.getElementById('modal-content');
    const modalKonsinyasiId = document.getElementById('modal-konsinyasi-id');
    const konsinyasiData = @json($penjualans->items());

    function openModal(konsinyasiId, type) {
        const konsinyasi = konsinyasiData.find(k => k.id == konsinyasiId);

        if (!konsinyasi) {
            console.error('Data konsinyasi tidak ditemukan untuk ID:', konsinyasiId);
            // Ganti alert() dengan pesan yang lebih baik di UI
            alert('Data konsinyasi tidak ditemukan.');
            return;
        }

        modalKonsinyasiId.value = konsinyasi.id;

        let content = '';
        if (type === 'penjualan') {
            modalTitle.textContent = 'Proses Penjualan Konsinyasi';
            modalForm.action = `{{ url('penjualan-konsinyasi') }}/${konsinyasiId}/proses-penjualan`;
            
            content += `
                <div class="mb-4">
                    <label for="tanggal_penjualan" class="block text-gray-700 font-bold mb-2">Tanggal Penjualan:</label>
                    <input type="date" name="tanggal_penjualan" id="tanggal_penjualan" class="form-input w-full border-gray-300 " required>
                </div>
            `;
            //console.log(konsinyasi);
            // Tambahkan validasi di sini sebelum forEach
            if (konsinyasi.details && Array.isArray(konsinyasi.details)) {
                konsinyasi.details.forEach(detail => {
                    const sisa = detail.kuantitas_kirim - detail.kuantitas_terjual - detail.kuantitas_retur;
                    if (sisa > 0) {
                        content += `
                            <div class="mb-4 p-4 border  bg-gray-50">
                                <p class="font-semibold">${detail.produk_jadi.nama}</p>
                                <p class="text-sm text-gray-600">Dikirim: ${detail.kuantitas_kirim} | Sisa: ${sisa}</p>
                                <label for="kuantitas_jual_${detail.id}" class="block text-gray-700 font-bold mb-2 mt-2">Kuantitas Terjual:</label>
                                <input type="number" step="any" name="details_jual[${detail.id}][kuantitas_jual]" id="kuantitas_jual_${detail.id}" class="form-input w-full border-gray-300 " min="0" max="${sisa}" value="0">
                                <input type="hidden" name="details_jual[${detail.id}][id]" value="${detail.id}">
                            </div>
                        `;
                    }
                });
            } else {
                console.error('Properti `details` tidak ada atau bukan array.');
                content += '<p class="text-red-500">Detail produk tidak ditemukan.</p>';
            }

        } else if (type === 'retur') {
            modalTitle.textContent = 'Proses Retur Konsinyasi';
            modalForm.action = `{{ url('penjualan-konsinyasi') }}/${konsinyasiId}/proses-retur`;
            
            content += `
                <div class="mb-4">
                    <label for="tanggal_retur" class="block text-gray-700 font-bold mb-2">Tanggal Retur:</label>
                    <input type="date" name="tanggal_retur" id="tanggal_retur" class="form-input w-full border-gray-300 " required>
                </div>
            `;
            
            // Tambahkan validasi di sini sebelum forEach
            if (konsinyasi.details && Array.isArray(konsinyasi.details)) {
                konsinyasi.details.forEach(detail => {
                    const sisa = detail.kuantitas_kirim - detail.kuantitas_terjual - detail.kuantitas_retur;
                    if (sisa > 0) {
                        content += `
                            <div class="mb-4 p-4 border  bg-gray-50">
                                <p class="font-semibold">${detail.produk_jadi.nama}</p>
                                <p class="text-sm text-gray-600">Dikirim: ${detail.kuantitas_kirim} | Sisa: ${sisa}</p>
                                <label for="kuantitas_retur_${detail.id}" class="block text-gray-700 font-bold mb-2 mt-2">Kuantitas Diretur:</label>
                                <input type="number" step="any" name="details_retur[${detail.id}][kuantitas_retur]" id="kuantitas_retur_${detail.id}" class="form-input w-full border-gray-300 " min="0" max="${sisa}" value="0">
                                <input type="hidden" name="details_retur[${detail.id}][id]" value="${detail.id}">
                            </div>
                        `;
                    }
                });
            } else {
                 console.error('Properti `details` tidak ada atau bukan array.');
                content += '<p class="text-red-500">Detail produk tidak ditemukan.</p>';
            }
        }
        
        modalContent.innerHTML = content;
        modalContainer.classList.remove('hidden');
    }

    function closeModal() {
        modalContainer.classList.add('hidden');
    }

    
</script>



@endsection