@extends('layouts.app')

@section('title', 'Master Data Sarana')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold text-dark m-0">Data Sarana & Prasarana 👋</h3>
        <p class="text-muted small mb-0">Kelola seluruh daftar inventaris aset dan unit sarana sekolah</p>
    </div>
    <button type="button" class="btn btn-primary rounded-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#addItemModal">
        <i class="bi bi-plus-lg me-1"></i> Tambah Sarana
    </button>
</div>
<!-- Form Filter & Pencarian -->
    <div class="card border-0 shadow-sm rounded-4 p-4 mb-4 bg-white">
    <form action="{{ route('items.index') }}" method="GET">
        <div class="row g-3 align-items-center">
            
            <!-- Input Search -->
            <div class="col-lg-5 col-md-12">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted ps-3 rounded-start-3">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" 
                           name="search" 
                           class="form-control bg-light border-start-0 ps-2 rounded-end-3 py-2 text-dark fs-6" 
                           placeholder="Cari berdasarkan nama atau kode barang..." 
                           value="{{ request('search') }}">
                </div>
            </div>

            <!-- Filter Unit Sekolah -->
            <div class="col-lg-3 col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted ps-3 rounded-start-3">
                        <i class="bi bi-building"></i>
                    </span>
                    <select name="unit_id" 
                            class="form-select bg-light border-start-0 ps-2 rounded-end-3 py-2 text-secondary fs-6" 
                            onchange="this.form.submit()">
                        <option value="">Semua Unit Sekolah</option>
                        @foreach($units as $unit)
                            <option value="{{ $unit->id }}" {{ request('unit_id') == $unit->id ? 'selected' : '' }}>
                                {{ $unit->name }} ({{ $unit->code }})
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Filter Tahun Pengadaan -->
            <div class="col-lg-2 col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted ps-3 rounded-start-3">
                        <i class="bi bi-calendar-event"></i>
                    </span>
                    <select name="procurement_year" 
                            class="form-select bg-light border-start-0 ps-2 rounded-end-3 py-2 text-secondary fs-6" 
                            onchange="this.form.submit()">
                        <option value="">Semua Tahun</option>
                        @foreach($years as $yr)
                            <option value="{{ $yr }}" {{ request('procurement_year') == $yr ? 'selected' : '' }}>
                                {{ $yr }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="col-lg-2 col-md-12 d-flex gap-2">
                <button type="submit" class="btn btn-primary rounded-3 px-3 py-2 fw-semibold w-100 shadow-sm d-flex align-items-center justify-content-center gap-2">
                    <i class="bi bi-funnel-fill"></i> Filter
                </button>
                @if(request()->hasAny(['unit_id', 'procurement_year', 'search']))
                    <a href="{{ route('items.index') }}" 
                       class="btn btn-outline-danger rounded-3 px-3 py-2 fw-semibold d-flex align-items-center justify-content-center" 
                       title="Reset Filter">
                        <i class="bi bi-x-lg"></i>
                    </a>
                @endif
            </div>

        </div>
    </form>

    </div>
<div class="card border-0 shadow-sm rounded-4 bg-white overflow-hidden">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light border-0">
                <tr class="text-secondary small">
                    <th class="ps-4">Foto</th>
                    <th>Kode</th>
                    <th>Nama Sarana</th>
                    <th>Unit</th>
                    <th>Lokasi</th>
                    <th>Jumlah</th>
                    <th>Tahun</th>
                    <th>Kondisi</th>
                    <th class="text-end pe-4">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($items as $item)
                <tr>
                    <td class="ps-4">
                        @if($item->image)
                            <img src="{{ Storage::url($item->image) }}" alt="{{ $item->name }}" class="rounded-3 border object-fit-cover" style="width: 48px; height: 48px;">
                        @else
                            <div class="bg-light rounded-3 border d-flex align-items-center justify-content-center text-muted" style="width: 48px; height: 48px;">
                                <i class="bi bi-box-seam fs-5"></i>
                            </div>
                        @endif
                    </td>
                    <td class="font-monospace fw-bold text-primary">{{ $item->code }}</td>
                    <td class="fw-bold text-dark">{{ $item->name }}</td>
                    <td class="fw-bold text-dark">{{ $item->unit ? $item->unit->name : '-' }}</td>
                    <td><span class="badge bg-light text-dark border fw-normal">{{ $item->location->name }}</span></td>
                    <td class="fw-semibold">{{ $item->quantity }} Unit</td>
                    <td class="text-muted small">{{ $item->procurement_year ?? '-' }}</td>
                    <td>
                        @if($item->condition == 'baik')
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill">Baik</span>
                        @elseif($item->condition == 'rusak_ringan')
                            <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill">Rusak Ringan</span>
                        @else
                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill">Rusak Berat</span>
                        @endif
                    </td>
                    <td class="text-end pe-4">
                        <a href="{{ route('items.show', $item->id) }}" class="btn btn-sm btn-light border rounded-3 me-1">
                                <i class="bi bi-eye text-primary"></i>
                            </a>

                        <button class="btn btn-sm btn-light border rounded-3 me-1" data-bs-toggle="modal" data-bs-target="#editModal{{ $item->id }}">
                            <i class="bi bi-pencil-square text-warning"></i>
                        </button>
                        <form action="{{ route('items.destroy', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus sarana ini?')">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-light border rounded-3"><i class="bi bi-trash text-danger"></i></button>
                        </form>
                    </td>
                </tr>

                <!-- Modal Edit -->
                <div class="modal fade" id="editModal{{ $item->id }}" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content border-0 shadow-lg rounded-4">
                            <form action="{{ route('items.update', $item->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <div class="modal-header border-0 pb-0">
                                    <h5 class="modal-title fw-bold">Edit Sarana</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body text-start">
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold text-muted">Kode Sarana</label>
                                        <input type="text" name="code" class="form-control rounded-3" value="{{ $item->code }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold text-muted">Nama Sarana</label>
                                        <input type="text" name="name" class="form-control rounded-3" value="{{ $item->name }}" required>
                                    </div>
                                     <div class="mb-3">
                                        <label class="form-label small fw-bold text-muted">Unit Sekolah</label>
                                        <select name="unit_id" class="form-select rounded-3">
                                            <option value="">-- Pilih Unit (Opsional) --</option>
                                            @foreach($units as $unit)
                                                <option value="{{ $unit->id }}">{{ $unit->name }} ({{ $unit->code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold text-muted">Lokasi</label>
                                        <select name="location_id" class="form-select rounded-3" required>
                                            @foreach($locations as $loc)
                                                <option value="{{ $loc->id }}" {{ $item->location_id == $loc->id ? 'selected' : '' }}>{{ $loc->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-6">
                                            <label class="form-label small fw-bold text-muted">Jumlah</label>
                                            <input type="number" name="quantity" class="form-control rounded-3" value="{{ $item->quantity }}" min="1" required>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small fw-bold text-muted">Tahun Pengadaan</label>
                                            <input type="number" name="procurement_year" class="form-control rounded-3" value="{{ $item->procurement_year }}" min="2000" max="{{ date('Y') }}">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold text-muted">Kondisi</label>
                                        <select name="condition" class="form-select rounded-3" required>
                                            <option value="baik" {{ $item->condition == 'baik' ? 'selected' : '' }}>Baik</option>
                                            <option value="rusak_ringan" {{ $item->condition == 'rusak_ringan' ? 'selected' : '' }}>Rusak Ringan</option>
                                            <option value="rusak_berat" {{ $item->condition == 'rusak_berat' ? 'selected' : '' }}>Rusak Berat</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold text-muted">Ganti Foto Sarana (Opsional)</label>
                                        @if($item->image)
                                            <div class="mb-2">
                                                <img src="{{ Storage::url($item->image) }}" class="rounded-3 border" style="max-height: 100px;">
                                            </div>
                                        @endif
                                        <input type="file" name="image" class="form-control rounded-3" accept="image/*">
                                    </div>
                                </div>
                                <div class="modal-footer border-0 pt-0">
                                    <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-primary rounded-3">Simpan Perubahan</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-4 text-muted">Belum ada data sarana.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($items->hasPages())
    <div class="card-footer bg-white border-0 py-3">
        {{ $items->links() }}
    </div>
    @endif
</div>

<!-- Modal Tambah Sarana -->
<div class="modal fade" id="addItemModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <form action="{{ route('items.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Tambah Sarana Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Kode Sarana</label>
                        <input type="text" name="code" class="form-control rounded-3" placeholder="SRP-2026-001" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Nama Sarana</label>
                        <input type="text" name="name" class="form-control rounded-3" placeholder="Nama barang" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Unit Sekolah</label>
                        <select name="unit_id" class="form-select rounded-3">
                            <option value="">-- Pilih Unit (Opsional) --</option>
                            @foreach($units as $unit)
                                <option value="{{ $unit->id }}">{{ $unit->name }} ({{ $unit->code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Lokasi Ruangan</label>
                        <select name="location_id" class="form-select rounded-3" required>
                            <option value="">-- Pilih Lokasi --</option>
                            @foreach($locations as $loc)
                                <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label small fw-bold text-muted">Jumlah Unit</label>
                            <input type="number" name="quantity" class="form-control rounded-3" value="1" min="1" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-bold text-muted">Tahun Pengadaan</label>
                            <input type="number" name="procurement_year" class="form-control rounded-3" value="{{ date('Y') }}" min="2000" max="{{ date('Y') }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Kondisi Barang</label>
                        <select name="condition" class="form-select rounded-3" required>
                            <option value="baik">Baik</option>
                            <option value="rusak_ringan">Rusak Ringan</option>
                            <option value="rusak_berat">Rusak Berat</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Foto Sarana (Opsional)</label>
                        <input type="file" name="image" class="form-control rounded-3" accept="image/*">
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-3">Simpan Sarana</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection