@extends('layouts.internal')

@section('content')
<div class="max-w-6xl mx-auto">
    {{-- Notifikasi --}}
    @if(session('success'))
        <div class="bg-green-500 text-white p-4 rounded-xl mb-6 shadow-lg animate-fade-in-down">
            {{ session('success') }}
        </div>
    @endif

    {{-- Form --}}
    <div class="bg-[#001040] border border-white/20 rounded-xl p-10 shadow-2xl mb-12 text-white">
        <h2 id="form-title" class="font-bold mb-6 flex items-center gap-2">
            <span id="title-indicator" class="w-2 h-6 bg-blue-500 rounded-full"></span>
            Tambah Proyek Baru
        </h2>
        <form action="{{ route('admin.portofolio.store') }}" method="POST" enctype="multipart/form-data" id="proyek-form">
            @csrf
            <div id="method-field"></div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-xs font-bold uppercase tracking-widest text-white/50">Nama Proyek</label>
                    <input type="text" name="nama_proyek" id="nama_proyek" required class="w-full text-black p-3 rounded outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: Pembangunan Jembatan">
                </div>
                <div class="space-y-2">
                    <label class="text-xs font-bold uppercase tracking-widest text-white/50">Lokasi</label>
                    <input type="text" name="lokasi" id="lokasi" required class="w-full text-black p-3 rounded outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: Cilacap">
                </div>
                <div class="space-y-2">
                    <label class="text-xs font-bold uppercase tracking-widest text-white/50">Tahun Selesai</label>
                    <input type="number" name="tahun_proyek_selesai" id="tahun" required class="w-full text-black p-3 rounded outline-none focus:ring-2 focus:ring-blue-500" placeholder="2025">
                </div>
                {{-- INPUT BARU: Nilai Kontrak --}}
                <div class="space-y-2">
                    <label class="text-xs font-bold uppercase tracking-widest text-white/50">Nilai Kontrak (Rupiah)</label>
                    <input type="number" name="nilai_kontrak" id="nilai_kontrak" class="w-full text-black p-3 rounded outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: 150000000">
                </div>
                <div class="space-y-2">
                    <label class="text-xs font-bold uppercase tracking-widest text-white/50">Gambar Portofolio</label>
                    <input type="file" name="gambar_portofolio" id="input-gambar" onchange="previewImage(this)" class="w-full p-2 bg-white/10 rounded text-sm">
                </div>
            </div>
            
            <div class="mt-4">
                <img id="preview-img" class="w-40 h-24 object-cover hidden rounded border border-white/20 shadow-lg">
            </div>

            <div class="mt-8 flex justify-between items-center border-t border-white/10 pt-6">
                <button type="button" onclick="resetForm()" class="text-white/50 hover:text-white text-xs font-bold uppercase tracking-widest transition-all">
                    Reset Form
                </button>
                <button type="submit" id="btn-submit" class="bg-blue-600 hover:bg-blue-500 text-white px-10 py-3 rounded-lg font-bold shadow-lg transition-all active:scale-95">
                    Simpan Portofolio
                </button>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="bg-white/5 border border-white/10 rounded-xl overflow-hidden text-white shadow-2xl">
        <table class="w-full text-left">
            <thead class="bg-white/10">
                <tr>
                    <th class="p-4 text-xs font-bold uppercase tracking-widest">Gambar</th>
                    <th class="p-4 text-xs font-bold uppercase tracking-widest">Judul Pekerjaan</th>
                    <th class="p-4 text-xs font-bold uppercase tracking-widest text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/10">
                @foreach($data as $p)
                <tr class="hover:bg-white/5 transition-all">
                    <td class="p-4">
                        <img src="{{ asset('storage/' . $p->gambar_portofolio) }}" class="w-20 h-12 object-cover rounded shadow-md border border-white/10">
                    </td>
                    <td class="p-4">
                        <div class="font-bold">{{ $p->judul_pekerjaan }}</div>
                        <div class="text-[10px] text-white/40 italic uppercase">{{ $p->lokasi_proyek }} — {{ $p->tahun_proyek_selesai }}</div>
                        <div class="text-[10px] text-orange-400 font-bold">Rp {{ number_format($p->nilai_kontrak, 0, ',', '.') }}</div>
                    </td>
                    <td class="p-4">
                        <div class="flex justify-center gap-4">
                            <button onclick="editProyek({{ json_encode($p) }})" class="text-green-400 hover:text-green-300 font-bold text-xs uppercase tracking-tighter">Edit</button>
                            <form action="{{ route('admin.portofolio.destroy', $p->id) }}" method="POST" onsubmit="return confirm('Hapus data ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-400 hover:text-red-300 font-bold text-xs uppercase tracking-tighter">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script>
    function previewImage(input) {
        const preview = document.getElementById('preview-img');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = e => { 
                preview.src = e.target.result; 
                preview.classList.remove('hidden'); 
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function editProyek(data) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        const form = document.getElementById('proyek-form');
        
        form.action = '/admin/portofolio/' + data.id; 
        document.getElementById('method-field').innerHTML = '<input type="hidden" name="_method" value="PUT">';
        
        document.getElementById('form-title').innerHTML = '<span class="w-2 h-6 bg-green-500 rounded-full"></span> Edit: ' + data.judul_pekerjaan;
        document.getElementById('nama_proyek').value = data.judul_pekerjaan;
        document.getElementById('lokasi').value = data.lokasi_proyek;
        document.getElementById('tahun').value = data.tahun_proyek_selesai;
        document.getElementById('nilai_kontrak').value = data.nilai_kontrak; // Isi nilai kontrak saat edit
        
        const btn = document.getElementById('btn-submit');
        btn.innerText = 'Update Portofolio';
        btn.classList.replace('bg-blue-600', 'bg-green-600');
        
        const preview = document.getElementById('preview-img');
        preview.src = '/storage/' + data.gambar_portofolio;
        preview.classList.remove('hidden');
        document.getElementById('input-gambar').required = false;
    }

    function resetForm() {
        const form = document.getElementById('proyek-form');
        form.action = "{{ route('admin.portofolio.store') }}";
        form.reset();
        
        document.getElementById('method-field').innerHTML = '';
        document.getElementById('form-title').innerHTML = '<span class="w-2 h-6 bg-blue-500 rounded-full"></span> Tambah Proyek Baru';
        document.getElementById('nilai_kontrak').value = ''; // Kosongkan nilai kontrak saat reset
        
        const btn = document.getElementById('btn-submit');
        btn.innerText = 'Simpan Portofolio';
        btn.classList.replace('bg-green-600', 'bg-blue-600');
        
        document.getElementById('preview-img').classList.add('hidden');
        document.getElementById('input-gambar').required = true;
    }
</script>
@endsection