@extends('layouts.internal')

@section('content')
<div class="max-w-6xl mx-auto" x-data="{ 
    rows: {{ $proyek->count() > 0 ? $proyek->map(function($item, $key) {
        return [
            'no' => $key + 1,
            'paket' => $item->nama_paket_pekerjaan,
            'lokasi' => $item->lokasi_proyek,
            'pemberi' => $item->ppk_proyek,
            'kontrak' => $item->kontrak,
            'tahun' => $item->tahun_proyek
        ];
    })->toJson() : '[{no: 1, paket: \'\', lokasi: \'\', pemberi: \'\', kontrak: \'\', tahun: \''.date('Y').'\'}]' }},
    
    addRow() {
        this.rows.push({no: this.rows.length + 1, paket: '', lokasi: '', pemberi: '', kontrak: '', tahun: '{{ date('Y') }}'});
    },
    removeRow(index) {
        if(this.rows.length > 1) this.rows.splice(index, 1);
    }
}">
    <div class="flex justify-between items-end mb-8">
        <div>
            <h1 class="text-4xl font-bold text-white tracking-tight">Pekerjaan <span class="text-orange-500">On Progress</span></h1>
        </div>
        <button @click="addRow()" type="button" class="bg-green-600 hover:bg-green-700 text-white font-bold px-5 py-2.5 rounded-xl text-xs shadow-lg transition-all flex items-center gap-2 active:scale-95">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Tambah Baris
        </button>
    </div>

    @if(session('success'))
        <div class="bg-green-500 text-white p-4 rounded-xl mb-6 shadow-lg text-sm">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-[#001040] border border-white/20 rounded-2xl p-8 shadow-2xl">
        <form action="{{ route('admin.proyek.update') }}" method="POST">
            @csrf
            <div class="bg-white rounded-xl overflow-hidden shadow-inner overflow-x-auto border border-gray-200">
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="text-[#001040] font-black text-[10px] uppercase bg-gray-100 border-b border-gray-300">
                            <th class="p-4 w-12 text-center border-r">No.</th>
                            <th class="p-4 border-r">Nama Paket Pekerjaan</th>
                            <th class="p-4 border-r">Lokasi</th>
                            <th class="p-4 border-r">Pemberi Tugas/PPK</th>
                            <th class="p-4 border-r">Kontrak</th>
                            <th class="p-4 text-center">Tahun</th>
                            <th class="p-4 w-10"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(row, index) in rows" :key="index">
                            <tr class="hover:bg-blue-50/50 transition-colors border-b border-gray-100">
                                <td class="p-0 border-r text-center">
                                    <input type="text" :name="'no['+index+']'" x-model="row.no" class="w-full p-4 text-center text-xs border-none focus:ring-0 bg-transparent text-gray-800 font-bold">
                                </td>
                                <td class="p-0 border-r">
                                    <input type="text" :name="'nama_paket['+index+']'" x-model="row.paket" class="w-full p-4 text-xs border-none focus:ring-0 bg-transparent text-gray-700 italic uppercase" placeholder="..." required>
                                </td>
                                <td class="p-0 border-r">
                                    <input type="text" :name="'lokasi['+index+']'" x-model="row.lokasi" class="w-full p-4 text-xs border-none focus:ring-0 bg-transparent text-gray-700 uppercase" placeholder="...">
                                </td>
                                <td class="p-0 border-r">
                                    <input type="text" :name="'pemberi_tugas['+index+']'" x-model="row.pemberi" class="w-full p-4 text-xs border-none focus:ring-0 bg-transparent text-blue-900 font-bold" placeholder="...">
                                </td>
                                <td class="p-0 border-r">
                                    <input type="text" :name="'kontrak['+index+']'" x-model="row.kontrak" class="w-full p-4 text-xs border-none focus:ring-0 bg-transparent text-gray-700" placeholder="-">
                                </td>
                                <td class="p-0 border-r text-center">
                                    <input type="text" :name="'tahun['+index+']'" x-model="row.tahun" class="w-full p-4 text-xs border-none focus:ring-0 bg-transparent text-gray-700 text-center" required>
                                </td>
                                <td class="p-4 text-center bg-gray-50/50">
                                    <button @click="removeRow(index)" type="button" class="text-red-400 hover:text-red-600 transition-colors active:scale-90">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <div class="flex justify-between items-center mt-10">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-black px-12 py-3 rounded-xl text-xs uppercase tracking-widest shadow-lg transition-all active:scale-95">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection