@extends('layouts.app')

@section('content')

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

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

        <h2 style="margin-bottom:5px;">
            Edit Facility
        </h2>

        <p style="color:#666;">
            Update facility information
        </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 class="panel">

        <form method="POST"
              action="{{ route('admin.facilities.update', $facility->id) }}">

            @csrf
            @method('PUT')

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

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

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

                    <option value="facility"
                        {{ $facility->type == 'facility' ? 'selected' : '' }}>
                        Health Facility
                    </option>

                    <option value="outreach"
                        {{ $facility->type == 'outreach' ? 'selected' : '' }}>
                        Outreach Site
                    </option>

                    <option value="camp"
                        {{ $facility->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', $facility->name) }}"
                       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 value="HC II"
                        {{ $facility->level == 'HC II' ? 'selected' : '' }}>
                        HC II
                    </option>

                    <option value="HC III"
                        {{ $facility->level == 'HC III' ? 'selected' : '' }}>
                        HC III
                    </option>

                    <option value="HC IV"
                        {{ $facility->level == 'HC IV' ? 'selected' : '' }}>
                        HC IV
                    </option>

                    <option value="Hospital"
                        {{ $facility->level == 'Hospital' ? 'selected' : '' }}>
                        Hospital
                    </option>

                    <option value="National Referral"
                        {{ $facility->level == 'National Referral' ? 'selected' : '' }}>
                        National Referral
                    </option>

                </select>

            </div>

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

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

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

            </div>

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

                <a href="{{ route('admin.facilities.show', $facility->id) }}"
                   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;
                        ">
                    Update Facility
                </button>

            </div>

        </form>

    </div>

</div>

<script>

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

    function updateForm() {

        levelField.style.display = 'none';

        if (type.value === 'facility') {
            levelField.style.display = 'block';
        }

    }

    type.addEventListener('change', updateForm);

    window.onload = updateForm;

</script>

@endsection