{{-- resources/views/admin/patients/create.blade.php --}}

@extends('layouts.app')

@section('content')

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

    <!-- HEADER -->
    <div style="margin-bottom:30px;">

        <h2 style="margin-bottom:5px;">
            Register Patient
        </h2>

        <p style="color:#666;">
            Create a new patient record
        </p>

    </div>

    <!-- ERRORS -->
    @if ($errors->any())

        <div style="
            margin-bottom:20px;
            padding:12px;
            background:#fee2e2;
            color:#991b1b;
            border-radius:6px;
        ">

            <strong>Fix the following:</strong>

            <ul style="margin-top:8px;">

                @foreach ($errors->all() as $error)
                    <li style="font-size:13px;">
                        {{ $error }}
                    </li>
                @endforeach

            </ul>

        </div>

    @endif

    <div style="
        display:grid;
        grid-template-columns:2fr 1fr;
        gap:30px;
    ">

        <!-- FORM -->
        <div class="panel">

            <form method="POST"
                  action="{{ route('admin.patients.store') }}">

                @csrf

                <!-- BASIC -->
                <div style="margin-bottom:25px;">

                    <h3 style="margin-bottom:15px;">
                        Basic Information
                    </h3>

                    <div style="
                        display:grid;
                        grid-template-columns:1fr 1fr;
                        gap:15px;
                    ">

                        <!-- FIRST NAME -->
                        <div>

                            <label style="font-weight:600;">
                                First Name
                            </label>

                            <input type="text"
                                   name="first_name"
                                   value="{{ old('first_name') }}"
                                   required
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <!-- LAST NAME -->
                        <div>

                            <label style="font-weight:600;">
                                Last Name
                            </label>

                            <input type="text"
                                   name="last_name"
                                   value="{{ old('last_name') }}"
                                   required
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <!-- GENDER -->
                        <div>

                            <label style="font-weight:600;">
                                Gender
                            </label>

                            <select name="gender"
                                    required
                                    style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                    ">

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

                                <option value="Male"
                                    {{ old('gender') == 'Male' ? 'selected' : '' }}>
                                    Male
                                </option>

                                <option value="Female"
                                    {{ old('gender') == 'Female' ? 'selected' : '' }}>
                                    Female
                                </option>

                            </select>

                        </div>

                        <!-- PHONE -->
                        <div>

                            <label style="font-weight:600;">
                                Phone
                            </label>

                            <input type="text"
                                   name="phone"
                                   value="{{ old('phone') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <!-- DOB -->
                        <div>

                            <label style="font-weight:600;">
                                Date of Birth
                            </label>

                            <input type="date"
                                   name="date_of_birth"
                                   id="date_of_birth"
                                   value="{{ old('date_of_birth') }}"
                                   required
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <!-- COMPUTED AGE -->
                        <div>

                            <label style="font-weight:600;">
                                Age
                            </label>

                            <input type="number"
                                   id="age"
                                   readonly
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #e5e7eb;
                                        border-radius:6px;
                                        background:#f9fafb;
                                        color:#555;
                                   ">

                        </div>

                    </div>

                </div>

                <!-- LOCATION -->
                <div style="margin-bottom:25px;">

                    <h3 style="margin-bottom:15px;">
                        Location
                    </h3>

                    <div style="
                        display:grid;
                        grid-template-columns:1fr 1fr;
                        gap:15px;
                    ">

                        <div>

                            <label style="font-weight:600;">
                                District
                            </label>

                            <input type="text"
                                   name="district"
                                   value="{{ old('district') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <div>

                            <label style="font-weight:600;">
                                Subcounty
                            </label>

                            <input type="text"
                                   name="subcounty"
                                   value="{{ old('subcounty') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <div>

                            <label style="font-weight:600;">
                                Parish
                            </label>

                            <input type="text"
                                   name="parish"
                                   value="{{ old('parish') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <div>

                            <label style="font-weight:600;">
                                Village
                            </label>

                            <input type="text"
                                   name="village"
                                   value="{{ old('village') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                    </div>

                </div>

                <!-- NEXT OF KIN -->
                <div style="margin-bottom:30px;">

                    <h3 style="margin-bottom:15px;">
                        Next of Kin
                    </h3>

                    <div style="
                        display:grid;
                        grid-template-columns:1fr 1fr;
                        gap:15px;
                    ">

                        <!-- NOK FIRST NAME -->
                        <div>

                            <label style="font-weight:600;">
                                First Name
                            </label>

                            <input type="text"
                                   name="next_of_kin_first_name"
                                   value="{{ old('next_of_kin_first_name') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <!-- NOK LAST NAME -->
                        <div>

                            <label style="font-weight:600;">
                                Last Name
                            </label>

                            <input type="text"
                                   name="next_of_kin_last_name"
                                   value="{{ old('next_of_kin_last_name') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <!-- NOK PHONE -->
                        <div>

                            <label style="font-weight:600;">
                                Phone
                            </label>

                            <input type="text"
                                   name="next_of_kin_phone"
                                   value="{{ old('next_of_kin_phone') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                        <!-- RELATIONSHIP -->
                        <div>

                            <label style="font-weight:600;">
                                Relationship
                            </label>

                            <select name="next_of_kin_relationship"
                                    id="relationship"
                                    style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                    ">

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

                                @foreach([
                                    'Parent',
                                    'Sibling',
                                    'Spouse',
                                    'Child',
                                    'Guardian',
                                    'Relative',
                                    'Friend',
                                    'Other'
                                ] as $relationship)

                                    <option value="{{ $relationship }}"
                                        {{ old('next_of_kin_relationship') == $relationship ? 'selected' : '' }}>

                                        {{ $relationship }}

                                    </option>

                                @endforeach

                            </select>

                        </div>

                        <!-- OTHER RELATIONSHIP -->
                        <div id="otherRelationshipField"
                             style="display:none;">

                            <label style="font-weight:600;">
                                Specify Relationship
                            </label>

                            <input type="text"
                                   name="next_of_kin_relationship_other"
                                   value="{{ old('next_of_kin_relationship_other') }}"
                                   style="
                                        width:100%;
                                        padding:12px;
                                        border:1px solid #ddd;
                                        border-radius:6px;
                                   ">

                        </div>

                    </div>

                </div>

                <!-- ACTIONS -->
                <div style="display:flex;gap:15px;">

                    <a href="{{ route('admin.patients.dashboard') }}"
                       style="
                            flex:1;
                            text-align:center;
                            padding:12px;
                            border:1px solid #ddd;
                            border-radius:6px;
                            text-decoration:none;
                            color:#333;
                       ">
                        Cancel
                    </a>

                    <button type="submit"
                            style="
                                flex:2;
                                background:#2563eb;
                                color:white;
                                padding:12px;
                                border:none;
                                border-radius:6px;
                                font-weight:600;
                                cursor:pointer;
                            ">
                        Save Patient
                    </button>

                </div>

            </form>

        </div>

        <!-- SIDE -->
        <div class="panel"
             style="background:#f9fafb;">

            <h3 style="margin-bottom:15px;">
                Guidance
            </h3>

            <div style="
                font-size:14px;
                color:#555;
                line-height:1.7;
            ">

                <p>
                    <strong>Patient Number</strong><br>
                    Automatically generated after registration.
                </p>

                <p>
                    <strong>Date of Birth</strong><br>
                    Age is automatically computed from DOB.
                </p>

                <p>
                    <strong>Status</strong><br>
                    New patients are automatically marked active.
                </p>

            </div>

        </div>

    </div>

</div>

<!-- SCRIPTS -->
<script>

    /*
    |--------------------------------------------------------------------------
    | COMPUTE AGE
    |--------------------------------------------------------------------------
    */
    const dobInput = document.getElementById('date_of_birth');
    const ageInput = document.getElementById('age');

    function computeAge()
    {
        if (!dobInput.value) {
            ageInput.value = '';
            return;
        }

        const dob = new Date(dobInput.value);
        const today = new Date();

        let age = today.getFullYear() - dob.getFullYear();

        const monthDiff = today.getMonth() - dob.getMonth();

        if (
            monthDiff < 0 ||
            (
                monthDiff === 0 &&
                today.getDate() < dob.getDate()
            )
        ) {
            age--;
        }

        ageInput.value = age >= 0 ? age : '';
    }

    dobInput.addEventListener('change', computeAge);

    computeAge();

    /*
    |--------------------------------------------------------------------------
    | RELATIONSHIP OTHER
    |--------------------------------------------------------------------------
    */
    const relationship = document.getElementById('relationship');

    const otherRelationshipField =
        document.getElementById('otherRelationshipField');

    function toggleRelationshipOther()
    {
        if (relationship.value === 'Other') {

            otherRelationshipField.style.display = 'block';

        } else {

            otherRelationshipField.style.display = 'none';
        }
    }

    relationship.addEventListener(
        'change',
        toggleRelationshipOther
    );

    toggleRelationshipOther();

</script>

@endsection