@extends('layouts.app')

@section('title', 'Tambah Paket - INUFA')

@section('header', 'Tambah Paket Baru')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="bg-white rounded-lg shadow-md p-6 max-w-4xl mx-auto">
        <form action="{{ route('paket.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            
            <!-- Informasi Paket -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-gray-800">Informasi Paket</h3>
                    
                    <!-- Nama Paket -->
                    <div class="mb-4">
                        <label for="nama_paket" class="block text-gray-700 font-medium mb-2">Nama Paket <span class="text-red-500">*</span></label>
                        <input type="text" id="nama_paket" name="nama_paket" value="{{ old('nama_paket') }}" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: Paket Sound System Wedding" required>
                        @error('nama_paket')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <!-- Jenis Paket -->
                    <div class="mb-4">
                        <label for="jenis_paket" class="block text-gray-700 font-medium mb-2">Jenis Paket <span class="text-red-500">*</span></label>
                        <select id="jenis_paket" name="jenis_paket" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                            <option value="">Pilih Jenis Paket</option>
                            <option value="wedding" {{ old('jenis_paket') == 'wedding' ? 'selected' : '' }}>Wedding</option>
                            <option value="seminar" {{ old('jenis_paket') == 'seminar' ? 'selected' : '' }}>Seminar/Meeting</option>
                            <option value="outdoor" {{ old('jenis_paket') == 'outdoor' ? 'selected' : '' }}>Outdoor/Karnaval</option>
                            <option value="custom" {{ old('jenis_paket') == 'custom' ? 'selected' : '' }}>Custom</option>
                        </select>
                        @error('jenis_paket')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <!-- Harga Sewa -->
                    <div class="mb-4">
                        <label for="harga" class="block text-gray-700 font-medium mb-2">Harga Sewa (Rp) <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500">Rp</span>
                            </div>
                            <input type="number" id="harga" name="harga" value="{{ old('harga') }}" class="w-full border border-gray-300 rounded-md pl-10 pr-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: 5000000" required>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Harga per hari untuk sewa paket ini</p>
                        @error('harga')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Ongkir per KM -->
                    <!-- <div class="mb-4">
                        <label for="ongkir_km" class="block text-gray-700 font-medium mb-2">Ongkir per KM (Rp)</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500">Rp</span>
                            </div>
                            <input type="number" id="ongkir_km" name="ongkir_km" value="{{ old('ongkir_km', 5000) }}" class="w-full border border-gray-300 rounded-md pl-10 pr-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: 5000">
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Biaya pengiriman per kilometer (kosongkan jika tidak ada)</p>
                        @error('ongkir_km')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div> -->

                    <!-- Minimal Jarak Ongkir -->
                    <!-- <div class="mb-4">
                        <label for="min_jarak" class="block text-gray-700 font-medium mb-2">Minimal Jarak Ongkir (KM)</label>
                        <input type="number" id="min_jarak" name="min_jarak" value="{{ old('min_jarak', 0) }}" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: 5">
                        <p class="text-xs text-gray-500 mt-1">Jarak minimal sebelum dikenakan ongkir (0 untuk tidak ada minimum)</p>
                        @error('min_jarak')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div> -->

                    <!-- Stok -->
                    <div class="mb-4">
                        <label for="stok" class="block text-gray-700 font-medium mb-2">Stok Paket <span class="text-red-500">*</span></label>
                        <input type="number" id="stok" name="stok" value="{{ old('stok', 1) }}" min="1" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        <p class="text-xs text-gray-500 mt-1">Jumlah paket yang tersedia untuk disewa</p>
                        @error('stok')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Ongkir per Kota -->
                    <div class="mb-4">
                        <label class="block text-gray-700 font-medium mb-2">Ongkir per Kota</label>
                        <div id="ongkir-container">
                            <div class="ongkir-form mb-2 p-4 border rounded-lg bg-gray-50">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-600">Nama Kota</label>
                                        <input type="text" name="ongkir[0][nama_kota]" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-600">Biaya Ongkir (Rp)</label>
                                        <input type="number" name="ongkir[0][biaya_ongkir]" min="0" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                </div>
                                <button type="button" class="mt-2 text-red-600 hover:text-red-800 delete-ongkir" style="display: none;">
                                    <i class="fas fa-trash mr-1"></i> Hapus
                                </button>
                            </div>
                        </div>
                        <button type="button" id="tambah-ongkir" class="mt-2 text-sm bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded">
                            <i class="fas fa-plus mr-1"></i> Tambah Kota
                        </button>
                    </div>
                </div>
                
                <div>
                    <!-- Gambar Paket -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-4 text-gray-800">Gambar Paket</h3>
                        <div class="mb-4">
                            <label for="image" class="block text-gray-700 font-medium mb-2">Upload Gambar</label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md relative"
                                id="drop-zone">
                                <div class="space-y-1 text-center">
                                    <img id="preview-image" src="#" alt="Preview" class="mx-auto h-32 w-auto hidden" style="display: none;">
                                    <svg id="preview-placeholder" class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <div class="flex text-sm text-gray-600 justify-center">
                                        <label for="image" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
                                            <span>Upload gambar</span>
                                            <input id="image" name="image" type="file" class="sr-only" accept="image/*">
                                        </label>
                                        <p class="pl-1">atau drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF sampai 10MB</p>
                                </div>
                            </div>
                            @error('image')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Deskripsi Paket -->
                    <div class="mb-4">
                        <label for="keterangan" class="block text-gray-700 font-medium mb-2">Deskripsi Paket</label>
                        <textarea id="keterangan" name="keterangan" rows="5" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Deskripsi lengkap tentang paket ini...">{{ old('keterangan') }}</textarea>
                        @error('keterangan')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
            
            <!-- Pilihan Barang Paket -->
            <div class="mt-6">
                <h3 class="text-lg font-semibold mb-4 text-gray-800">Pilih Barang untuk Paket</h3>
                <p class="text-sm text-gray-600 mb-4">Pilih barang yang akan dimasukkan ke dalam paket</p>
                
                @if($barangs->isEmpty())
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-yellow-700">
                                    Tidak ada barang yang tersedia saat ini.
                                </p>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="overflow-x-auto bg-white rounded-lg shadow">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pilih</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Barang</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Detail Barang</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stok Tersedia</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($barangs as $barang)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" 
                                               name="barang_ids[]" 
                                               value="{{ $barang->id }}" 
                                               class="barang-checkbox focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
                                               data-barang-id="{{ $barang->id }}">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ $barang->nama_barang }}</div>
                                        <div class="text-xs text-gray-500">Kode: {{ $barang->kode_barang }}</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm text-gray-900">
                                            <div class="mb-1"><span class="font-medium">Kategori:</span> {{ $barang->kategori }}</div>
                                            <div class="text-xs text-gray-500">{{ $barang->deskripsi }}</div>
                                            <div class="text-xs text-gray-500 mt-1">

                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $barang->stok > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ $barang->stok }} unit
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="number" 
                                               name="jumlah_{{ $barang->id }}" 
                                               id="jumlah_{{ $barang->id }}"
                                               min="1" 
                                               max="{{ $barang->stok }}" 
                                               value="1" 
                                               class="border border-gray-300 rounded-md px-3 py-2 w-24 focus:outline-none focus:ring-2 focus:ring-blue-500 text-center"
                                               data-max-stok="{{ $barang->stok }}"
                                               data-barang-id="{{ $barang->id }}">
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
            
            <!-- Tombol Submit dan Batal -->
            <div class="flex justify-end space-x-4 pt-6 border-t">
                <a href="{{ route('paket') }}" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition duration-300">
                    Batal
                </a>
                <button type="submit" class="px-6 py-2 bg-blue-700 text-white rounded-md hover:bg-blue-800 transition duration-300">
                    Simpan Paket
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Tunggu sampai DOM selesai dimuat
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM Content Loaded');

        // Ambil referensi elemen-elemen yang dibutuhkan
        const fileInput = document.getElementById('image');
        const previewImage = document.getElementById('preview-image');
        const previewPlaceholder = document.getElementById('preview-placeholder');
        const dropZone = document.getElementById('drop-zone');

        // Log status elemen
        console.log('Elements found:', {
            fileInput: !!fileInput,
            previewImage: !!previewImage,
            previewPlaceholder: !!previewPlaceholder,
            dropZone: !!dropZone
        });

        // Fungsi untuk menangani preview file
        function handleFileSelect(file) {
            console.log('Handling file:', file);

            if (file) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    console.log('File loaded');
                    if (previewImage && previewPlaceholder) {
                        previewImage.src = e.target.result;
                        previewImage.style.display = 'block';
                        previewImage.classList.remove('hidden');
                        previewPlaceholder.classList.add('hidden');
                        console.log('Preview updated');
                    }
                };
                
                reader.onerror = function(error) {
                    console.error('Error reading file:', error);
                };

                reader.readAsDataURL(file);
            }
        }

        // Event listener untuk file input
        if (fileInput) {
            fileInput.addEventListener('change', function(e) {
                console.log('File input change event');
                const file = e.target.files[0];
                if (file) {
                    handleFileSelect(file);
                }
            });
        }

        // Event listeners untuk drag & drop
        if (dropZone) {
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log(eventName + ' event handled');
                });
            });

            // Styling saat drag
            dropZone.addEventListener('dragenter', function(e) {
                console.log('Drag enter');
                this.classList.add('border-blue-500', 'bg-blue-50');
            });

            dropZone.addEventListener('dragover', function(e) {
                console.log('Drag over');
                this.classList.add('border-blue-500', 'bg-blue-50');
            });

            dropZone.addEventListener('dragleave', function(e) {
                console.log('Drag leave');
                this.classList.remove('border-blue-500', 'bg-blue-50');
            });

            // Handle file drop
            dropZone.addEventListener('drop', function(e) {
                console.log('File dropped');
                this.classList.remove('border-blue-500', 'bg-blue-50');
                
                const file = e.dataTransfer.files[0];
                if (file) {
                    fileInput.files = e.dataTransfer.files;
                    handleFileSelect(file);
                }
            });
        }

        // Fungsi untuk mengaktifkan input saat checkbox dicentang
        function toggleInput(checkbox) {
            const barangId = checkbox.dataset.barangId;
            const input = document.getElementById('jumlah_' + barangId);
            if (input) {
                input.disabled = !checkbox.checked;
                if (!checkbox.checked) {
                    input.value = 1;
                }
            }
        }

        // Event listener untuk checkbox
        document.querySelectorAll('.barang-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                toggleInput(this);
            });
        });

        // Event listener untuk input jumlah
        document.querySelectorAll('input[name^="jumlah_"]').forEach(input => {
            // Nonaktifkan input saat awal
            input.disabled = true;

            // Validasi saat input berubah
            input.addEventListener('input', function() {
                const maxStok = parseInt(this.dataset.maxStok);
                let value = parseInt(this.value);

                // Jika input kosong, biarkan
                if (this.value === '') return;

                // Jika nilai lebih dari stok maksimum
                if (value > maxStok) {
                    this.value = maxStok;
                    alert('Jumlah tidak boleh melebihi stok tersedia (' + maxStok + ' unit)');
                }
                
                // Jika nilai kurang dari 1
                if (value < 1) {
                    this.value = 1;
                }
            });
        });

        // Ongkir dynamic form
        const ongkirContainer = document.getElementById('ongkir-container');
        const tambahOngkirBtn = document.getElementById('tambah-ongkir');
        let ongkirCount = 1;

        // Fungsi untuk menambah form ongkir baru
        tambahOngkirBtn.addEventListener('click', function() {
            const template = ongkirContainer.children[0].cloneNode(true);
            
            // Update nama field
            const inputs = template.querySelectorAll('input');
            inputs.forEach(input => {
                input.name = input.name.replace('[0]', `[${ongkirCount}]`);
                input.value = '';
            });

            // Tampilkan tombol hapus
            const deleteBtn = template.querySelector('.delete-ongkir');
            deleteBtn.style.display = 'inline-flex';
            
            // Tambahkan event listener untuk tombol hapus
            deleteBtn.addEventListener('click', function() {
                template.remove();
                updateDeleteButtons();
            });

            ongkirContainer.appendChild(template);
            ongkirCount++;
            updateDeleteButtons();
        });

        // Tampilkan/sembunyikan tombol hapus
        const updateDeleteButtons = () => {
            const forms = ongkirContainer.children;
            const deleteButtons = ongkirContainer.querySelectorAll('.delete-ongkir');
            
            deleteButtons.forEach((btn, index) => {
                if (forms.length > 1) {
                    btn.style.display = 'inline-flex';
                } else {
                    btn.style.display = 'none';
                }
            });
        };

        // Event delegation untuk tombol hapus
        ongkirContainer.addEventListener('click', function(e) {
            if (e.target.classList.contains('delete-ongkir')) {
                e.target.closest('.ongkir-form').remove();
                updateDeleteButtons();
            }
        });
    });
</script>
@endpush