@extends('layouts.app')

@section('title','Website Inquiries | Crescendo Defence')

@section('content')

<style>
    .admin-shell {
        width: min(1450px, 94%);
        margin: 0 auto;
        padding: 55px 0 70px;
        font-family: 'Causten', Arial, sans-serif;
    }

    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-bottom: 28px;
        padding: 28px 30px;
        background: #111315;
        border-bottom: 4px solid #ef7f1a;
    }

    .admin-header h1 {
        margin: 0;
        color: #fff;
        font-size: 34px;
        font-weight: 700;
    }

    .admin-header p {
        margin: 6px 0 0;
        color: #aaa;
        font-size: 14px;
    }

    .admin-actions {
        background: #fff;
        border: 1px solid #e5e1dc;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 22px;
    }

    .admin-actions form:first-child {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        flex: 1;
    }

    .admin-actions input,
    .admin-actions select {
        height: 44px;
        border: 1px solid #d8d4cf;
        background: #fff;
        padding: 0 14px;
        font-family: inherit;
        font-size: 14px;
        outline: none;
    }

    .admin-actions input {
        min-width: 300px;
        flex: 1;
    }

    .admin-actions input:focus,
    .admin-actions select:focus {
        border-color: #ef7f1a;
        box-shadow: 0 0 0 3px rgba(239,127,26,.08);
    }

    .admin-actions button,
    .admin-actions a {
        min-height: 44px;
        border: 0;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #111315;
        color: #fff;
        text-decoration: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: .2s ease;
    }

    .admin-actions a {
        background: #ef7f1a;
    }

    .admin-actions button:hover,
    .admin-actions a:hover {
        background: #ef7f1a;
        color: #fff;
    }

    .admin-actions a:hover {
        background: #111315;
    }

    .form-success {
        padding: 14px 18px;
        background: #e9f8ed;
        border-left: 4px solid #2a9143;
        color: #216f34;
        margin-bottom: 18px;
        font-size: 14px;
        font-weight: 600;
    }

    .admin-table-wrap {
        width: 100%;
        overflow-x: auto;
        background: #fff;
        border: 1px solid #e5e1dc;
        box-shadow: 0 8px 25px rgba(0,0,0,.04);
    }

    .admin-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1000px;
    }

    .admin-table thead th {
        background: #f2f0ed;
        color: #111;
        padding: 16px 18px;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .8px;
        border-bottom: 1px solid #ddd8d2;
    }

    .admin-table tbody td {
        padding: 18px;
        border-bottom: 1px solid #eeeae5;
        color: #333;
        font-size: 14px;
        line-height: 1.55;
        vertical-align: top;
    }

    .admin-table tbody tr:hover td {
        background: #fffaf6;
    }

    .admin-table td strong {
        color: #111;
        font-size: 15px;
    }

    .admin-table a {
        color: #ef7f1a;
        text-decoration: none;
    }

    .admin-table a:hover {
        text-decoration: underline;
    }

    .admin-message {
        min-width: 260px;
        max-width: 400px;
        white-space: normal;
        word-break: break-word;
    }

    .admin-status {
        min-width: 120px;
        height: 38px;
        border: 1px solid #d4d0ca;
        background: #fff;
        padding: 0 10px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        outline: none;
    }

    .admin-status:focus {
        border-color: #ef7f1a;
    }

    .admin-empty {
        text-align: center;
        padding: 60px 20px !important;
        color: #777 !important;
        font-size: 15px !important;
    }

    .admin-pagination {
        margin-top: 22px;
    }

    @media (max-width: 768px) {
        .admin-shell {
            width: 94%;
            padding: 25px 0 45px;
        }

        .admin-header {
            padding: 22px;
        }

        .admin-header h1 {
            font-size: 28px;
        }

        .admin-actions {
            align-items: stretch;
        }

        .admin-actions form:first-child {
            width: 100%;
        }

        .admin-actions input,
        .admin-actions select,
        .admin-actions button,
        .admin-actions a {
            width: 100%;
        }

        .admin-actions input {
            min-width: 100%;
        }
    }
</style>

<section class="admin-shell">

    <div class="admin-header">
        <div>
            <h1>Website Inquiries</h1>
            <p>Manage all Crescendo Defence website inquiry submissions.</p>
        </div>
    </div>

    <div class="admin-actions">

        <form method="GET">

            <input
                name="q"
                value="{{ request('q') }}"
                placeholder="Search name, company, email"
            >

            <select name="status">

                <option value="">
                    All status
                </option>

                @foreach(['new','contacted','qualified','closed'] as $s)

                    <option
                        value="{{ $s }}"
                        @selected(request('status') === $s)
                    >
                        {{ ucfirst($s) }}
                    </option>

                @endforeach

            </select>

            <button type="submit">
                Filter
            </button>

        </form>


        <a href="{{ route('admin.inquiries.export') }}">
            Export CSV
        </a>


        <form
            method="POST"
            action="{{ route('admin.inquiries.logout') }}"
        >
            @csrf

            <button type="submit">
                Logout
            </button>
        </form>

    </div>


    @if(session('success'))

        <div class="form-success">
            {{ session('success') }}
        </div>

    @endif


    <div class="admin-table-wrap">

        <table class="admin-table">

            <thead>
                <tr>
                    <th>Date</th>
                    <th>Contact</th>
                    <th>Interest</th>
                    <th>Message</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>

                @forelse($inquiries as $i)

                    <tr>

                        <td>
                            @if($i->created_at)
                                {{ $i->created_at->format('d M Y H:i') }}
                            @else
                                -
                            @endif
                        </td>


                        <td>

                            <strong>
                                {{ $i->name }}
                            </strong>

                            <br>

                            {{ $i->company }}

                            <br>

                            <a href="mailto:{{ $i->email }}">
                                {{ $i->email }}
                            </a>

                            <br>

                            {{ $i->phone }}

                        </td>


                        <td>
                            {{ $i->interest }}
                        </td>


                        <td class="admin-message">
                            {{ $i->message }}
                        </td>


                        <td>

                            <form
                                method="POST"
                                action="{{ route('admin.inquiries.update', $i) }}"
                            >

                                @csrf
                                @method('PATCH')

                                <select
                                    class="admin-status"
                                    name="status"
                                    onchange="this.form.submit()"
                                >

                                    @foreach(['new','contacted','qualified','closed'] as $s)

                                        <option
                                            value="{{ $s }}"
                                            @selected($i->status === $s)
                                        >
                                            {{ ucfirst($s) }}
                                        </option>

                                    @endforeach

                                </select>

                            </form>

                        </td>

                    </tr>

                @empty

                    <tr>
                        <td colspan="5" class="admin-empty">
                            No inquiries found.
                        </td>
                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>


    <div class="admin-pagination">
        {{ $inquiries->links() }}
    </div>

</section>

@endsection