@extends('layouts.app')

@section('title', 'Dental Encounter')

@section('content')

<div style="width:100%;padding:20px;">

    <style>

        .dental-page-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:16px;
            margin-bottom:16px;
        }

        .dental-card{
            background:#fff;
            border:1px solid #e5e7eb;
            border-radius:8px;
            overflow:hidden;
            box-shadow:0 1px 3px rgba(0,0,0,0.08);
            height:100%;
        }

        .dental-card-header{
            background:#f8f9fa;
            padding:14px 18px;
            border-bottom:1px solid #e5e7eb;
            font-weight:600;
        }

        .dental-card-body{
            padding:18px;
        }

        .dental-form-grid-2{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
            margin-bottom:16px;
        }

        .dental-form-grid-3{
            display:grid;
            grid-template-columns:1fr 1fr 1fr;
            gap:16px;
            margin-bottom:16px;
        }

        .dental-form-grid-4{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
            margin-bottom:16px;
        }

        .dental-field label{
            display:block;
            margin-bottom:6px;
            font-weight:600;
            font-size:14px;
        }

        .dental-field input,
        .dental-field textarea{
            width:100%;
            border:1px solid #ced4da;
            border-radius:6px;
            padding:8px 10px;
            font-size:14px;
            background:#fff;
            box-sizing:border-box;
        }

        .dental-field textarea{
            resize:vertical;
        }

        .dental-table{
            width:100%;
            border-collapse:collapse;
        }

        .dental-table th{
            width:40%;
            padding:8px 0;
            vertical-align:top;
            text-align:left;
            font-weight:600;
            font-size:14px;
        }

        .dental-table td{
            padding:8px 0;
            font-size:14px;
        }

        .dental-badge{
            display:inline-block;
            padding:5px 10px;
            border-radius:20px;
            color:#fff;
            font-size:11px;
            font-weight:700;
            letter-spacing:0.5px;
        }

        .dental-badge.green{
            background:#198754;
        }

        .dental-badge.orange{
            background:#fd7e14;
        }

        .dental-badge.red{
            background:#dc3545;
        }

        .dental-btn{
            background:#0d6efd;
            color:#fff;
            border:none;
            border-radius:6px;
            padding:10px 18px;
            font-weight:600;
            cursor:pointer;
        }

        .dental-btn-secondary{
            display:inline-block;
            border:1px solid #6c757d;
            color:#6c757d;
            text-decoration:none;
            padding:9px 14px;
            border-radius:6px;
            font-size:14px;
        }

        .dental-actions{
            text-align:right;
            margin-top:20px;
        }

        .dental-muted{
            margin-top:8px;
            color:#6c757d;
            font-size:14px;
            line-height:1.5;
        }

        .procedure-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:10px;
            margin-top:10px;
        }

        .procedure-item{
            display:flex;
            align-items:flex-start;
            gap:8px;
            border:1px solid #dee2e6;
            border-radius:6px;
            padding:10px 12px;
            background:#fff;
            font-size:13px;
            line-height:1.4;
        }

        .procedure-item input{
            width:auto;
            margin-top:2px;
            flex-shrink:0;
        }

        @media(max-width:1200px){

            .procedure-grid{
                grid-template-columns:repeat(3,1fr);
            }

        }

        @media(max-width:992px){

            .dental-page-grid,
            .dental-form-grid-2,
            .dental-form-grid-3,
            .dental-form-grid-4,
            .procedure-grid{
                grid-template-columns:1fr;
            }

        }

    </style>

    {{-- HEADER --}}
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;">

        <div>

            <h2 style="margin:0 0 4px 0;font-weight:700;">
                Dental Encounter
            </h2>

            <p style="margin:0;color:#6c757d;font-size:14px;">

                {{ $patient->first_name }}
                {{ $patient->last_name }}

                •

                {{ $patient->patient_no }}

            </p>

        </div>

        <a
            href="{{ route('admin.dental.queue') }}"
            class="dental-btn-secondary">

            Back To Queue

        </a>

    </div>

    {{-- SUMMARY --}}
    <div class="dental-page-grid">

        {{-- PATIENT --}}
        <div class="dental-card">

            <div class="dental-card-header">
                Patient Information
            </div>

            <div class="dental-card-body">

                <table class="dental-table">

                    <tr>
                        <th>Patient No</th>
                        <td>{{ $patient->patient_no }}</td>
                    </tr>

                    <tr>
                        <th>Name</th>
                        <td>
                            {{ $patient->first_name }}
                            {{ $patient->last_name }}
                        </td>
                    </tr>

                    <tr>
                        <th>Gender</th>
                        <td>{{ $patient->gender }}</td>
                    </tr>

                    <tr>
                        <th>Visit No</th>
                        <td>{{ $patient->visit_no }}</td>
                    </tr>

                    <tr>
                        <th>Visit Type</th>
                        <td>{{ ucfirst($patient->visit_type) }}</td>
                    </tr>

                </table>

            </div>

        </div>

        {{-- TRIAGE --}}
        <div class="dental-card">

            <div class="dental-card-header">
                Triage Summary
            </div>

            <div class="dental-card-body">

                @php
                    $triage = strtolower(
                        $patient->triage_category ?? 'green'
                    );
                @endphp

                <table class="dental-table">

                    <tr>
                        <th>Temperature</th>
                        <td>
                            {{ $patient->temperature ?? '-' }} °C
                        </td>
                    </tr>

                    <tr>
                        <th>Pulse</th>
                        <td>
                            {{ $patient->pulse_rate ?? '-' }}
                        </td>
                    </tr>

                    <tr>
                        <th>SPO₂</th>
                        <td>
                            {{ $patient->spo2 ?? '-' }}%
                        </td>
                    </tr>

                    <tr>
                        <th>Triage</th>

                        <td>

                            <span class="dental-badge {{ $triage }}">

                                {{ strtoupper($triage) }}

                            </span>

                        </td>

                    </tr>

                </table>

            </div>

        </div>

        {{-- CLINICAL --}}
        <div class="dental-card">

            <div class="dental-card-header">
                Clinical Summary
            </div>

            <div class="dental-card-body">

                <div style="margin-bottom:18px;">

                    <strong>
                        Provisional Diagnosis
                    </strong>

                    <div class="dental-muted">

                        {{ $patient->provisional_diagnosis ?? 'N/A' }}

                    </div>

                </div>

                <div>

                    <strong>
                        Clinical Impression
                    </strong>

                    <div class="dental-muted">

                        {{ $patient->clinical_impression ?? 'N/A' }}

                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- FORM --}}
    <div class="dental-card">

        <div class="dental-card-header">
            Dental Procedure Form
        </div>

        <div class="dental-card-body">

            <form
                method="POST"
                action="{{ route(
                    'admin.dental.store',
                    $patient->id
                ) }}">

                @csrf

                {{-- ROW 1 --}}
                <div class="dental-form-grid-2">

                    <div class="dental-field">

                        <label>
                            Chief Complaint
                        </label>

                        <textarea
                            name="chief_complaint"
                            rows="2">{{ old(
                                'chief_complaint',
                                $dentalRecord->chief_complaint ?? ''
                            ) }}</textarea>

                    </div>

                    <div class="dental-field">

                        <label>
                            Dental History
                        </label>

                        <textarea
                            name="history_of_dental_problem"
                            rows="2">{{ old(
                                'history_of_dental_problem',
                                $dentalRecord->history_of_dental_problem ?? ''
                            ) }}</textarea>

                    </div>

                </div>

                {{-- ROW 2 --}}
                <div class="dental-form-grid-2">

                    <div class="dental-field">

                        <label>
                            Oral Examination
                        </label>

                        <textarea
                            name="oral_examination"
                            rows="2">{{ old(
                                'oral_examination',
                                $dentalRecord->oral_examination ?? ''
                            ) }}</textarea>

                    </div>

                    <div class="dental-field">

                        <label>
                            Diagnosis
                        </label>

                        <textarea
                            name="diagnosis"
                            rows="2">{{ old(
                                'diagnosis',
                                $dentalRecord->diagnosis ?? ''
                            ) }}</textarea>

                    </div>

                </div>

                {{-- PROCEDURES --}}
                <div style="margin-bottom:20px;">

                    <label
                        style="
                            display:block;
                            margin-bottom:12px;
                            font-weight:600;
                            font-size:14px;
                        ">

                        Procedures Done

                    </label>

                    <div class="procedure-grid">

                        @foreach($dentalProcedures as $procedure)

                            <label class="procedure-item">

                                <input
                                    type="checkbox"

                                    name="service_ids[]"

                                    value="{{ $procedure->id }}"

                                    @checked(
                                        in_array(
                                            $procedure->id,
                                            old(
                                                'service_ids',
                                                $selectedServices ?? []
                                            )
                                        )
                                    )>

                                <span>

                                    {{ $procedure->service_name }}

                                </span>

                            </label>

                        @endforeach

                    </div>

                </div>

                {{-- ROW 3 --}}
                <div class="dental-form-grid-3">

                    <div class="dental-field">

                        <label>
                            Tooth Number
                        </label>

                        <input
                            type="text"
                            name="tooth_number"
                            value="{{ old(
                                'tooth_number',
                                $dentalRecord->tooth_number ?? ''
                            ) }}">

                    </div>

                    <div class="dental-field">

                        <label>
                            Anesthesia Used
                        </label>

                        <input
                            type="text"
                            name="anesthesia_used"
                            value="{{ old(
                                'anesthesia_used',
                                $dentalRecord->anesthesia_used ?? ''
                            ) }}">

                    </div>

                    <div class="dental-field">

                        <label>
                            Follow Up Date
                        </label>

                        <input
                            type="date"
                            name="follow_up_date"
                            value="{{ old(
                                'follow_up_date',
                                $dentalRecord->follow_up_date ?? ''
                            ) }}">

                    </div>

                </div>

                {{-- ROW 4 --}}
                <div class="dental-form-grid-4">

                    <div class="dental-field">

                        <label>
                            Gum Condition
                        </label>

                        <input
                            type="text"
                            name="gum_condition"
                            value="{{ old(
                                'gum_condition',
                                $dentalRecord->gum_condition ?? ''
                            ) }}">

                    </div>

                    <div class="dental-field">

                        <label>
                            Dentition Status
                        </label>

                        <input
                            type="text"
                            name="dentition_status"
                            value="{{ old(
                                'dentition_status',
                                $dentalRecord->dentition_status ?? ''
                            ) }}">

                    </div>

                </div>

                {{-- MEDICATIONS --}}
                <div style="margin-bottom:20px;">

                    <label
                        style="
                            display:block;
                            margin-bottom:12px;
                            font-weight:600;
                            font-size:14px;
                        ">

                        Medications

                    </label>

                    <div class="procedure-grid">

                        @foreach($dentalMedicines as $medication)

                            <label class="procedure-item">

                                <input
                                    type="checkbox"

                                    name="medication_ids[]"

                                    value="{{ $medication->id }}"

                                    @checked(
                                        in_array(
                                            $medication->id,
                                            old(
                                                'medication_ids',
                                                $selectedMedications ?? []
                                            )
                                        )
                                    )>

                                <span>

                                    {{ $medication->medicine_name }}

                                </span>

                            </label>

                        @endforeach

                    </div>

                </div>

                {{-- THERAPEUTIC PLAN --}}
                <div style="margin-bottom:20px;">

                    <label
                        style="
                            display:block;
                            margin-bottom:12px;
                            font-weight:600;
                            font-size:14px;
                        ">

                        Therapeutic Instructions

                    </label>

                    <div class="procedure-grid">

                        @foreach($therapeuticOptions as $option)

                            <label class="procedure-item">

                                <input
                                    type="checkbox"

                                    name="therapeutic_plan[]"

                                    value="{{ $option }}"

                                    @checked(
                                        in_array(
                                            $option,
                                            old(
                                                'therapeutic_plan',
                                                $selectedTherapeutics ?? []
                                            )
                                        )
                                    )>

                                <span>

                                    {{ $option }}

                                </span>

                            </label>

                        @endforeach

                    </div>

                </div>

                {{-- FOLLOW UP / REFERRAL --}}
                <div class="dental-form-grid-3">

                    <div class="dental-field">

                        <label>
                            Referral Department
                        </label>

                        <select name="referral_department">

                            <option value="">
                                Select Referral
                            </option>

                            <option
                                value="OMFS"

                                @selected(
                                    old(
                                        'referral_department',
                                        $dentalRecord->referral_department ?? ''
                                    ) == 'OMFS'
                                )>

                                OMFS

                            </option>

                            <option
                                value="ENT"

                                @selected(
                                    old(
                                        'referral_department',
                                        $dentalRecord->referral_department ?? ''
                                    ) == 'ENT'
                                )>

                                ENT

                            </option>

                            <option
                                value="Orthodontics"

                                @selected(
                                    old(
                                        'referral_department',
                                        $dentalRecord->referral_department ?? ''
                                    ) == 'Orthodontics'
                                )>

                                Orthodontics

                            </option>

                            <option
                                value="Prosthodontics"

                                @selected(
                                    old(
                                        'referral_department',
                                        $dentalRecord->referral_department ?? ''
                                    ) == 'Prosthodontics'
                                )>

                                Prosthodontics

                            </option>

                        </select>

                    </div>

                    <div class="dental-field">

                        <label>
                            Follow Up Required
                        </label>

                        <select name="follow_up_required">

                            <option value="0">
                                No
                            </option>

                            <option
                                value="1"

                                @selected(
                                    old(
                                        'follow_up_required',
                                        $dentalRecord->follow_up_required ?? 0
                                    ) == 1
                                )>

                                Yes

                            </option>

                        </select>

                    </div>

                    <div class="dental-field">

                        <label>
                            Follow Up Clinic
                        </label>

                        <input
                            type="text"

                            name="follow_up_clinic"

                            value="{{ old(
                                'follow_up_clinic',
                                $dentalRecord->follow_up_clinic ?? ''
                            ) }}">

                    </div>

                </div>

                {{-- NOTES --}}
                <div class="dental-field">

                    <label>
                        Notes
                    </label>

                    <textarea
                        name="notes"
                        rows="4">{{ old(
                            'notes',
                            $dentalRecord->notes ?? ''
                        ) }}</textarea>

                </div>

                {{-- ACTIONS --}}
                <div class="dental-actions">

                    <button
                        type="submit"
                        class="dental-btn">

                        Save Dental Record

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

@endsection