@extends('layouts.app')

@section('content')

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

    <!-- HEADER -->
    <div style="margin-bottom:30px;">
        <h2 style="margin-bottom:5px;">Register</h2>

        <p style="color:#666;">
            Create a facility, outreach site, or medical camp
        </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.facilities.store') }}">

                @csrf

                <!-- TYPE -->
                <div style="margin-bottom:20px;">

                    <label style="font-weight:600;">
                        What are you creating?
                    </label>

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

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

                        <option value="facility"
                            {{ old('type') == 'facility' ? 'selected' : '' }}>
                            Health Facility
                        </option>

                        <option value="outreach"
                            {{ old('type') == 'outreach' ? 'selected' : '' }}>
                            Outreach Site
                        </option>

                        <option value="camp"
                            {{ old('type') == 'camp' ? 'selected' : '' }}>
                            Medical Camp
                        </option>

                    </select>

                </div>

                <!-- NAME -->
                <div style="margin-bottom:20px;">

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

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

                </div>

                <!-- LEVEL -->
                <div id="levelField"
                     style="margin-bottom:20px; display:none;">

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

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

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

                        <option {{ old('level') == 'HC II' ? 'selected' : '' }}>
                            HC II
                        </option>

                        <option {{ old('level') == 'HC III' ? 'selected' : '' }}>
                            HC III
                        </option>

                        <option {{ old('level') == 'HC IV' ? 'selected' : '' }}>
                            HC IV
                        </option>

                        <option {{ old('level') == 'Hospital' ? 'selected' : '' }}>
                            Hospital
                        </option>

                        <option {{ old('level') == 'National Referral' ? 'selected' : '' }}>
                            National Referral
                        </option>

                    </select>

                </div>

                <!-- START DATE -->
                <div id="startDateField"
                     style="margin-bottom:20px; display:none;">

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

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

                </div>

                <!-- END DATE -->
                <div id="endDateField"
                     style="margin-bottom:25px; display:none;">

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

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

                </div>

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

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

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

                </div>

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

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

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

                </div>

            </form>

        </div>

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

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

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

                <p>
                    <strong>Health Facility</strong><br>
                    Permanent infrastructure.<br>
                    No start/end required.
                </p>

                <p>
                    <strong>Outreach Site</strong><br>
                    Requires start and end date.
                </p>

                <p>
                    <strong>Medical Camp</strong><br>
                    Requires start and end date.
                </p>

            </div>

        </div>

    </div>

</div>

<!-- SCRIPT -->
<script>

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

    const levelField = document.getElementById('levelField');
    const startField = document.getElementById('startDateField');
    const endField = document.getElementById('endDateField');

    const startInput = document.getElementById('start_date');
    const endInput = document.getElementById('end_date');

    function updateForm() {

        levelField.style.display = 'none';
        startField.style.display = 'none';
        endField.style.display = 'none';

        startInput.removeAttribute('required');
        endInput.removeAttribute('required');

        if (type.value === 'facility') {

            levelField.style.display = 'block';

        }

        if (
            type.value === 'outreach' ||
            type.value === 'camp'
        ) {

            startField.style.display = 'block';
            endField.style.display = 'block';

            startInput.setAttribute('required', true);
            endInput.setAttribute('required', true);

        }

    }

    type.addEventListener('change', updateForm);

    window.onload = updateForm;

</script>

@endsection