@extends('layouts.app')

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

@section('header', 'Edit Paket Sound System')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-6">
    <form action="{{ route('paket.update', $paket->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Nama Paket -->
            <div class="space-y-2">
                <label for="nama_paket" class="block text-sm font-medium text-gray-700">Nama Paket</label>
                <input type="text" name="nama_paket" id="nama_paket" 
                       value="{{ old('nama_paket', $paket->nama_paket) }}"
                       class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">
                @error('nama_paket')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <!-- Jenis Paket -->
            <div class="space-y-2">
                <label for="jenis_paket" class="block text-sm font-medium text-gray-700">Jenis Paket</label>
                <select name="jenis_paket" id="jenis_paket" 
                        class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">
                    <option value="wedding" {{ $paket->jenis_paket == 'wedding' ? 'selected' : '' }}>Wedding</option>
                    <option value="seminar" {{ $paket->jenis_paket == 'seminar' ? 'selected' : '' }}>Seminar</option>
                    <option value="outdoor" {{ $paket->jenis_paket == 'outdoor' ? 'selected' : '' }}>Outdoor</option>
                    <option value="custom" {{ $paket->jenis_paket == 'custom' ? 'selected' : '' }}>Custom</option>
                </select>
                @error('jenis_paket')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <!-- Harga -->
            <div class="space-y-2">
                <label for="harga" class="block text-sm font-medium text-gray-700">Harga</label>
                <input type="number" name="harga" id="harga" 
                       value="{{ old('harga', $paket->harga) }}"
                       class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">
                @error('harga')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <!-- Stok -->
            <div class="space-y-2">
                <label for="stok" class="block text-sm font-medium text-gray-700">Stok</label>
                <input type="number" name="stok" id="stok" 
                       value="{{ old('stok', $paket->stok) }}"
                       class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">
                @error('stok')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <!-- Gambar -->
            <div class="space-y-2">
                <label for="image" class="block text-sm font-medium text-gray-700">Gambar Paket</label>
                @if($paket->image)
                    <div class="mb-2">
                        <img src="{{ Storage::url($paket->image) }}" alt="Preview" class="w-32 h-32 object-cover rounded-lg">
                    </div>
                @endif
                <input type="file" name="image" id="image" 
                       class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">
                @error('image')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                @enderror
            </div>

            <!-- Ongkir per Kota -->
            <div class="space-y-2 md:col-span-2">
                <label class="block text-sm font-medium text-gray-700">Ongkir per Kota</label>
                <div id="ongkir-container">
                    @forelse($paket->ongkirKota as $index => $ongkir)
                    <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[{{ $index }}][nama_kota]" value="{{ $ongkir->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[{{ $index }}][biaya_ongkir]" value="{{ $ongkir->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">
                            <i class="fas fa-trash mr-1"></i> Hapus
                        </button>
                    </div>
                    @empty
                    <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>
                    @endforelse
                </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>

            <!-- Keterangan -->
            <div class="space-y-2 md:col-span-2">
                <label for="keterangan" class="block text-sm font-medium text-gray-700">Keterangan</label>
                <textarea name="keterangan" id="keterangan" rows="4"
                          class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">{{ old('keterangan', $paket->keterangan) }}</textarea>
                @error('keterangan')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Tombol Submit -->
        <div class="mt-6 flex justify-end space-x-3">
            <a href="{{ route('paket') }}" 
               class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition duration-200">
                Batal
            </a>
            <button type="submit" 
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>
@endsection 

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ongkirContainer = document.getElementById('ongkir-container');
        const tambahOngkirBtn = document.getElementById('tambah-ongkir');
        let ongkirCount = document.querySelectorAll('.ongkir-form').length;

        // 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(/\[\d+\]/, `[${ongkirCount}]`);
                input.value = '';
            });

            // Tampilkan tombol hapus
            const deleteBtn = template.querySelector('.delete-ongkir');
            deleteBtn.style.display = 'inline-flex';
            
            ongkirContainer.appendChild(template);
            ongkirCount++;
            updateDeleteButtons();
        });

        // Event delegation untuk tombol hapus
        ongkirContainer.addEventListener('click', function(e) {
            if (e.target.classList.contains('delete-ongkir') || 
                e.target.closest('.delete-ongkir')) {
                e.target.closest('.ongkir-form').remove();
                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';
                }
            });
        };

        // Initialize delete buttons
        updateDeleteButtons();
    });
</script>
@endpush