@extends('layouts.app')

@section('title', 'Contact Inquiries | Nagar Panchayat Manjhanpur')

@section('content')

    {{-- ===== Hero Banner ===== --}}
    <div class="page-hero" style="background-image: url('{{ asset('assets/image/lalitpur2.jpg') }}');">
        <div class="page-hero-overlay"></div>
        <div class="container position-relative">
            <h1 class="page-hero-title">Message Inquiries</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb page-hero-breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}"><i class="fa-solid fa-house me-1"></i>Home</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Message Inquiries</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="container py-5">

        <h2 class="mb-4 fw-bold">Message Inquiries</h2>

        <div class="content-box">
            @if($inquiries->count())
                <div class="table-responsive">
                    <table class="table table-bordered notice-table">
                        <thead>
                            <tr>
                                <th style="width:60px;">S.No</th>
                                <th>Subject</th>
                                <th style="width:200px;">Upload Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($inquiries as $index => $item)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $item->subject }}</td>
                                    <td>{{ $item->created_at->format('d M Y, h:i A') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-muted text-center py-4">No inquiries yet.</p>
            @endif
        </div>

    </div>

    <style>
        /* ===== Hero Banner ===== */
        .page-hero {
            position: relative;
            background-size: cover;
            background-position: center;
            background-color: #1c1d46;
            padding: 3.5rem 0 2rem;
            min-height: 220px;
            display: flex;
            align-items: flex-end;
        }

        .page-hero-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
        }

        .page-hero-title {
            position: relative;
            color: #fff;
            font-weight: 800;
            font-size: 2.4rem;
            margin-bottom: 1rem;
        }

        .page-hero-breadcrumb {
            position: relative;
            background: transparent;
            margin-bottom: 0;
            padding: 0;
            font-size: .95rem;
        }

        .page-hero-breadcrumb .breadcrumb-item a {
            color: #b7deed;
            text-decoration: none;
        }

        .page-hero-breadcrumb .breadcrumb-item a:hover {
            text-decoration: underline;
        }

        .page-hero-breadcrumb .breadcrumb-item.active {
            color: #b7deed;
            font-weight: 600;
        }

        .page-hero-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
            color: #fff;
            content: "/";
        }

        /* ===== Content Box + Table ===== */
        .content-box {
            border: 1px solid #e5e5e5;
            border-top: 4px solid  #74353a;
            border-radius: 6px;
            padding: 1.75rem;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        }

        .notice-table {
            margin-bottom: 0;
        }

        .notice-table thead th {
            background: #f8f9fa;
            font-weight: 700;
            border-bottom: 2px solid #dee2e6;
        }

        .notice-table td,
        .notice-table th {
            vertical-align: middle;
            padding: .75rem 1rem;
        }
    </style>
@endsection