@extends('layouts.app')

@section('content')

<div style="
    max-width:1200px;
    margin:auto;
">

    <!-- ========================================= -->
    <!-- HEADER -->
    <!-- ========================================= -->

    <div style="
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:20px;
        flex-wrap:wrap;
        margin-bottom:24px;
    ">

        <!-- LEFT -->

        <div>

            <div style="
                font-size:30px;
                font-weight:900;
                color:#111827;
                line-height:1.1;
                margin-bottom:6px;
            ">

                Patients

            </div>

            <div style="
                font-size:14px;
                color:#64748b;
            ">

                Search and manage registered patient records

            </div>

        </div>

        <!-- RIGHT -->

        <div style="
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        ">

            <a href="{{ route('admin.patients.dashboard') }}"
               style="
                    padding:12px 16px;
                    border-radius:10px;
                    background:#f3f4f6;
                    color:#374151;
                    text-decoration:none;
                    font-size:13px;
                    font-weight:800;
               ">

                ← Dashboard

            </a>

            <a href="{{ route('admin.patients.create') }}"
               style="
                    padding:12px 16px;
                    border-radius:10px;
                    background:#2563eb;
                    color:white;
                    text-decoration:none;
                    font-size:13px;
                    font-weight:800;
               ">

                + Register Patient

            </a>

        </div>

    </div>

<!-- ========================================= -->
<!-- LIVE SEARCH -->
<!-- ========================================= -->

<div class="panel"
     style="
        margin-bottom:20px;
        position:relative;
     ">

    <div style="
        position:relative;
    ">

        <input type="text"
               class="epdfu-live-search-input"
               data-route="{{ route('admin.patients.live-search') }}"
               data-min-chars="2"
               placeholder="Search patient name, patient number or phone..."
               autocomplete="off"
               style="
                    width:100%;
                    padding:14px;
                    border:1px solid #d1d5db;
                    border-radius:10px;
                    font-size:14px;
               ">

        <!-- RESULTS -->

        <div class="epdfu-live-search-results"
             style="
                position:absolute;
                top:100%;
                left:0;
                right:0;

                background:white;

                border:1px solid #e5e7eb;
                border-top:none;

                border-radius:0 0 12px 12px;

                box-shadow:
                    0 10px 25px rgba(0,0,0,0.08);

                z-index:999;

                display:none;

                overflow:hidden;
             ">

        </div>

    </div>

</div>

    <!-- ========================================= -->
    <!-- TABLE PANEL -->
    <!-- ========================================= -->

    <div class="panel"
         style="
            padding:0;
            overflow:hidden;
         ">

        @if($patients->isEmpty())

            <div style="
                padding:60px 30px;
                text-align:center;
            ">

                <div style="
                    font-size:50px;
                    margin-bottom:14px;
                ">

                    👨‍⚕️

                </div>

                <div style="
                    font-size:15px;
                    font-weight:700;
                    color:#64748b;
                ">

                    No patients found

                </div>

            </div>

        @else

            <div style="
                overflow-x:auto;
            ">

                <table style="
                    width:100%;
                    border-collapse:collapse;
                ">

                    <!-- ===================================== -->
                    <!-- HEAD -->
                    <!-- ===================================== -->

                    <thead style="
                        background:#f8fafc;
                    ">

                        <tr>

                            <th style="
                                padding:14px 16px;
                                text-align:left;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Patient

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:center;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Patient No

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:center;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Gender

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:center;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                District

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:center;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Status

                            </th>

                            <th style="
                                padding:14px 16px;
                                text-align:right;
                                font-size:12px;
                                font-weight:800;
                                color:#475569;
                            ">

                                Action

                            </th>

                        </tr>

                    </thead>

                    <!-- ===================================== -->
                    <!-- BODY -->
                    <!-- ===================================== -->

                    <tbody>

                        @foreach($patients as $p)

                            @php

                                $status =
                                    strtolower(
                                        $p->status ?? 'active'
                                    );

                                $bg = match($status) {

                                    'active' =>
                                        '#dcfce7',

                                    'inactive' =>
                                        '#fef3c7',

                                    'archived' =>
                                        '#fee2e2',

                                    default =>
                                        '#f3f4f6'
                                };

                                $color = match($status) {

                                    'active' =>
                                        '#166534',

                                    'inactive' =>
                                        '#92400e',

                                    'archived' =>
                                        '#991b1b',

                                    default =>
                                        '#374151'
                                };

                            @endphp

                            <tr style="
                                border-top:1px solid #f1f5f9;
                            ">

                                <!-- PATIENT -->

                                <td style="
                                    padding:16px;
                                    vertical-align:top;
                                ">

                                    <div style="
                                        font-size:14px;
                                        font-weight:800;
                                        color:#111827;
                                        line-height:1.5;
                                        margin-bottom:4px;
                                    ">

                                        {{ $p->first_name }}
                                        {{ $p->last_name }}

                                    </div>

                                    @if($p->phone)

                                        <div style="
                                            font-size:12px;
                                            color:#64748b;
                                            font-weight:700;
                                        ">

                                            {{ $p->phone }}

                                        </div>

                                    @endif

                                </td>

                                <!-- PATIENT NUMBER -->

                                <td style="
                                    padding:16px;
                                    text-align:center;
                                    vertical-align:top;
                                ">

                                    <div style="
                                        font-size:13px;
                                        font-weight:800;
                                        color:#111827;
                                        font-family:monospace;
                                    ">

                                        {{ $p->patient_no }}

                                    </div>

                                </td>

                                <!-- GENDER -->

                                <td style="
                                    padding:16px;
                                    text-align:center;
                                    vertical-align:top;
                                ">

                                    <div style="
                                        font-size:13px;
                                        font-weight:700;
                                        color:#334155;
                                    ">

                                        {{ $p->gender }}

                                    </div>

                                </td>

                                <!-- DISTRICT -->

                                <td style="
                                    padding:16px;
                                    text-align:center;
                                    vertical-align:top;
                                ">

                                    <div style="
                                        font-size:13px;
                                        font-weight:700;
                                        color:#334155;
                                    ">

                                        {{ $p->district ?? '—' }}

                                    </div>

                                </td>

                                <!-- STATUS -->

                                <td style="
                                    padding:16px;
                                    text-align:center;
                                    vertical-align:top;
                                ">

                                    <span style="
                                        display:inline-block;
                                        padding:5px 10px;
                                        border-radius:999px;
                                        font-size:11px;
                                        font-weight:800;
                                        background:{{ $bg }};
                                        color:{{ $color }};
                                    ">

                                        {{ ucfirst($status) }}

                                    </span>

                                </td>

                                <!-- ACTION -->

                                <td style="
                                    padding:16px;
                                    text-align:right;
                                    vertical-align:top;
                                ">

                                    <a href="{{ route('admin.patients.show', $p->id) }}"
                                       style="
                                            display:inline-block;
                                            padding:10px 14px;
                                            border-radius:8px;
                                            background:#2563eb;
                                            color:white;
                                            text-decoration:none;
                                            font-size:12px;
                                            font-weight:800;
                                       ">

                                        View Patient

                                    </a>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        @endif

    </div>

</div>

@endsection