@extends('layouts.app')

@section('title', Auth::user()->isCustomer() ? 'Cari Lapangan' : 'Kelola Lapangan')

@section('content')
<div class="admin-header">
    <div class="header-content">
        <div class="header-info">
            <h2>
                <i class="fas fa-map me-2"></i>
                @if(Auth::user()->isCustomer())
                    Cari Lapangan
                @else
                    Kelola Lapangan
                @endif
            </h2>
            <p>Temukan dan kelola lapangan futsal terbaik</p>
        </div>
        @if(Auth::user()->isAdmin() || Auth::user()->isSuperAdmin())
            <div>
                <a href="{{ route('lapangans.create') }}" class="btn-transparent">
                    <i class="fas fa-plus me-2"></i>Tambah Lapangan
                </a>
            </div>
        @endif
    </div>
</div>
<div class="filter-section">
    <form method="GET" action="{{ route('lapangans.index') }}">
        <div class="filter-row">
            @if(Auth::user()->isAdmin() || Auth::user()->isSuperAdmin())
                <div class="filter-group">
                    <select class="filter-select" name="daerah">
                        <option value="">Semua Daerah</option>
                        @foreach($daerahList ?? [] as $d)
                            <option value="{{ $d }}" {{ request('daerah') == $d ? 'selected' : '' }}>{{ $d }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="filter-group">
                    <select class="filter-select" name="status">
                        <option value="">Semua Status</option>
                        <option value="aktif" {{ request('status') === 'aktif' ? 'selected' : '' }}>Aktif</option>
                        <option value="tidak_aktif" {{ request('status') === 'tidak_aktif' ? 'selected' : '' }}>Tidak Aktif</option>
                    </select>
                </div>
            @endif
            <div class="search-group">
                <input type="text" class="filter-input" name="search" placeholder="Cari lapangan..." value="{{ request('search') }}">
                <button type="submit" class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="filter-actions">
                <button type="submit" class="btn-transparent">
                    <i class="fas fa-filter me-2"></i>Filter
                </button>
                <a href="{{ route('lapangans.index') }}" class="btn-transparent">
                    <i class="fas fa-redo me-2"></i>Reset
                </a>
            </div>
        </div>
    </form>
</div>

        @if(Auth::user()->isAdmin() || Auth::user()->isSuperAdmin())
            <!-- Stats -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon total">
                            <i class="fas fa-map"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number">{{ $totalLapangan ?? 0 }}</div>
                            <div class="stat-label">Total Lapangan</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon customer">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number">{{ $activeLapangan ?? 0 }}</div>
                            <div class="stat-label">Aktif</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon staff">
                            <i class="fas fa-times-circle"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number">{{ $inactiveLapangan ?? 0 }}</div>
                            <div class="stat-label">Tidak Aktif</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon active">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number">{{ $avgPrice ? formatRupiah($avgPrice) : '-' }}</div>
                            <div class="stat-label">Rata-rata Harga</div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Lapangan Grid -->
        <div class="user-list">
            <div class="list-header">
                <div class="list-title">
                    <h3>Daftar Lapangan</h3>
                    <span>{{ $lapangans->count() }} lapangan ditemukan</span>
                </div>
            </div>
            <div class="row">
                @forelse($lapangans as $lapangan)
                    <div class="col-md-4 mb-3">
                    <div class="lapangan-card">
                        @if($lapangan->foto)
                            <img src="{{ asset('storage/' . $lapangan->foto) }}" class="card-img-top" alt="{{ $lapangan->nama }}">
                        @endif
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h6 class="lapangan-title mb-0">{{ $lapangan->nama }}</h6>
                                <span class="status-badge {{ $lapangan->status === 'aktif' ? 'aktif' : 'tidak-aktif' }}">
                                    {{ $lapangan->status === 'aktif' ? 'Aktif' : 'Tidak Aktif' }}
                                </span>
                            </div>
                            <p class="lapangan-location mb-2">
                                <i class="fas fa-map-marker-alt"></i> {{ $lapangan->lokasi }}
                            </p>
                            <div class="mb-2">
                                <small class="text-muted">Fasilitas:</small><br>
                                @if($lapangan->fasilitas)
                                    @php
                                        $fasilitasArray = explode(',', $lapangan->fasilitas);
                                    @endphp
                                    <div class="fasilitas-badges">
                                        @foreach(array_slice($fasilitasArray, 0, 3) as $fasilitas)
                                            <span class="fasilitas-badge">{{ trim($fasilitas) }}</span>
                                        @endforeach
                                        @if(count($fasilitasArray) > 3)
                                            <span class="fasilitas-badge">+{{ count($fasilitasArray) - 3 }}</span>
                                        @endif
                                    </div>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="lapangan-info">
                                    <i class="fas fa-users"></i>{{ $lapangan->kapasitas }} orang<br>
                                    <i class="fas fa-money-bill-wave"></i>{{ formatRupiah($lapangan->harga_per_jam) }}/jam
                                </div>
                            </div>
                            <div class="mt-3 d-flex justify-content-start gap-2 flex-wrap">
                                <button class="btn-action btn-transparent" onclick="showDetail({{ $lapangan->id }})" title="Detail">
                                    <i class="fas fa-eye"></i>
                                </button>
                                @if(Auth::user()->isAdmin() || Auth::user()->isSuperAdmin())
                                    <a href="{{ route('lapangans.edit', $lapangan->id) }}" class="btn-action btn-transparent" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('lapangans.toggleStatus', $lapangan->id) }}" method="POST" style="display:inline-block">
                                        @csrf
                                        <button type="submit" class="btn-action btn-transparent" title="{{ $lapangan->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan' }}" onclick="return confirm('Ubah status lapangan ini?')">
                                            <i class="fas fa-{{ $lapangan->status === 'aktif' ? 'ban' : 'check' }}"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('lapangans.destroy', $lapangan->id) }}" method="POST" style="display:inline-block" onsubmit="return confirm('Hapus lapangan ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-action btn-transparent btn-danger" title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @elseif(Auth::user()->isCustomer() && $lapangan->status === 'aktif')
                                    <a href="{{ route('bookings.create') }}?lapangan_id={{ $lapangan->id }}" class="btn-action btn-transparent btn-success" title="Booking">
                                        <i class="fas fa-calendar-plus"></i>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="fas fa-map fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Tidak ada lapangan</h5>
                    </div>
                </div>
            @endforelse
            </div>

            @if($lapangans->hasPages())
                <div class="pagination-wrapper">
                    {{ $lapangans->links() }}
                </div>
            @endif
        </div>

<!-- Detail Modal -->
<div class="modal" id="detailModal" tabindex="-1">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Detail Lapangan</h3>
            <button type="button" class="close-btn" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body" id="detail-content">
            <!-- Content will be loaded dynamically -->
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-transparent" onclick="closeModal()">Tutup</button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function showDetail(id) {
    fetch(`/lapangans/${id}`)
        .then(response => response.json())
        .then(data => {
            const lapangan = data.lapangan;
            const fotoUrl = lapangan.foto ? `/storage/${lapangan.foto}` : '/storage/lapangan/default.jpg';
            const fasilitas = lapangan.fasilitas ? lapangan.fasilitas.split(',').map(f => '<span class="fasilitas-badge">' + f.trim() + '</span>').join('') : '-';
            
            const content = `
                <div class="detail-view">
                    <div class="detail-avatar">
                        <img src="${fotoUrl}" class="img-fluid rounded" alt="${lapangan.nama}" style="max-height: 200px;" onerror="this.src='/storage/lapangan/default.jpg'">
                    </div>
                    <div class="detail-info">
                        <h4>${lapangan.nama}</h4>
                        <div class="detail-details">
                            <div class="detail-row">
                                <label>Nama</label>
                                <span>${lapangan.nama}</span>
                            </div>
                            <div class="detail-row">
                                <label>Lokasi</label>
                                <span>${lapangan.lokasi}</span>
                            </div>
                            <div class="detail-row">
                                <label>Daerah</label>
                                <span class="status-badge aktif">${lapangan.daerah}</span>
                            </div>
                            <div class="detail-row">
                                <label>Kapasitas</label>
                                <span>${lapangan.kapasitas} orang</span>
                            </div>
                            <div class="detail-row">
                                <label>Harga per Jam</label>
                                <span>${formatRupiah(lapangan.harga_per_jam)}</span>
                            </div>
                            <div class="detail-row">
                                <label>Fasilitas</label>
                                <span>${fasilitas}</span>
                            </div>
                            <div class="detail-row">
                                <label>Status</label>
                                <span class="status-badge ${lapangan.status === 'aktif' ? 'aktif' : 'tidak-aktif'}">${lapangan.status === 'aktif' ? 'Aktif' : 'Tidak Aktif'}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            document.getElementById('detail-content').innerHTML = content;
            document.getElementById('detailModal').style.display = 'flex';
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Gagal memuat data lapangan');
        });
}

function closeModal() {
    document.getElementById('detailModal').style.display = 'none';
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('detailModal');
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}
</script>
@endsection

