@extends('layouts.master')

@section('page-title') 
    Admin | {{ $page_title }}
@endsection

@section('page-css')
<style>
    .summary-card { border-left: 4px solid; border-radius: 0.5rem; }
    .card-total { border-left-color: #6c757d; }
    .card-submitted { border-left-color: #f6a623; }
    .card-dev { border-left-color: #1f6feb; }
    .card-plan { border-left-color: #17a2b8; }
    .badge-submitted { background-color: #f6a623; color: #fff; }
    .badge-approved { background-color: #28a745; color: #fff; }
</style>
@endsection

@section('page-content')
<div class="container py-4">
    <div class="d-flex align-items-center mb-4">
        <h3 class="me-auto">Permits Management</h3>
    </div>

    <!-- Summaries Row -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow-sm summary-card card-total h-100">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Total Applications</h6>
                    <h3 class="mb-0">{{ number_format($summaries['total']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm summary-card card-submitted h-100">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Submitted / Pending</h6>
                    <h3 class="mb-0">{{ number_format($summaries['submitted']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm summary-card card-dev h-100">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Development Permits</h6>
                    <h3 class="mb-0">{{ number_format($summaries['development']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm summary-card card-plan h-100">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Planning Permits</h6>
                    <h3 class="mb-0">{{ number_format($summaries['planning']) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Search Toolbar -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="input-group" style="max-width: 400px;">
                <span class="input-group-text"><i class="bi bi-search"></i> Search</span>
                <input id="permitSearch" class="form-control" type="text" placeholder="App Code, Location, or Type...">
            </div>
        </div>
    </div>

    <!-- Permits Table -->
    <div class="card shadow-sm mb-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Application Code</th>
                            <th>Permit Details</th>
                            <th>Location</th>
                            <th>Status</th>
                            <th>Submitted Date</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody id="permitBody">
                        @forelse($permits as $permit)
                            <tr>
                                <td class="fw-semibold text-primary">{{ $permit['application_code'] }}</td>
                                <td>
                                    <div class="fw-bold">{{ $permit['permit_type'] }}</div>
                                    <div class="text-muted small">{{ ucwords(str_replace('_', ' ', $permit['permit_form_type'])) }}</div>
                                </td>
                                <td>{{ Str::limit($permit['project_location'], 30) }}</td>
                                <td>
                                    @php $status = strtolower($permit['status']); @endphp
                                    <span class="badge {{ $status === 'submitted' ? 'badge-submitted' : 'bg-secondary' }}">
                                        {{ ucfirst($status) }}
                                    </span>
                                </td>
                                <td>
                                    @if(!empty($permit['submitted_at']))
                                        {{ \Carbon\Carbon::parse($permit['submitted_at'])->format('d M, Y') }}
                                        <div class="text-muted small">{{ \Carbon\Carbon::parse($permit['submitted_at'])->format('H:i') }}</div>
                                    @else
                                        <span class="text-muted">N/A</span>
                                    @endif
                                </td>
                                <td class="text-end pe-4">
                                    <a href="{{ url('/permits/viewapplication/'.$permit['application_code']) }}" class="btn btn-sm btn-outline-secondary">
                                        View Details
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">No permits found matching your criteria.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Pagination Component -->
        <div id="permit-pagination" class="pt-3 px-3 pb-3">
            {{ $permits->links() }}
        </div>
    </div>
</div>
@endsection

@section('page-js')
<script src="{{ url('public/assets/js/permits_index.js') }}"></script>
@endsection