@extends('HR.layout')

@section('content')

<div class="container mt-4">

```
<div class="d-flex justify-content-between mb-4">
    <h3>View / Edit Appointment Master</h3>

    <a href="{{ route('appointment_master_list') }}"
       class="btn btn-dark">
        Back to List
    </a>
</div>

<form action="{{ route('update_appointment_master', $appointment->id) }}"
      method="POST">

    @csrf
    @method('PUT')

    <div class="card p-4">

        {{-- ROLE --}}
        <div class="mb-4">
            <label class="form-label fw-bold">
                Role <span class="text-danger">*</span>
            </label>

            <select name="role"
                    class="form-select"
                    required>

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

                @foreach($categories as $value => $label)

                    <option value="{{ $value }}"
                        {{ old('role', $appointment->role) == $value ? 'selected' : '' }}>

                        {{ $label }}

                    </option>

                @endforeach

            </select>
        </div>


        {{-- APPOINTMENT CONTENT --}}
        <div class="mb-4">

            <div class="d-flex justify-content-between align-items-center mb-3">

                <label class="form-label fw-bold mb-0">
                    Appointment Content
                    <span class="text-danger">*</span>
                </label>

                <button type="button"
                        class="btn btn-sm btn-primary"
                        onclick="addSection()">

                    + Add More

                </button>

            </div>


            <div id="contentContainer">

                @php
                    $content = old(
                        'appointment_content',
                        json_decode($appointment->appointment_content, true) ?? []
                    );
                @endphp


                @forelse($content as $sectionIndex => $section)

                    <div class="content-section border rounded p-3 mb-3">

                        {{-- HEADING --}}
                        <div class="mb-3">

                            <label class="form-label fw-bold">
                                Heading
                            </label>

                            <input type="text"
                                   name="appointment_content[{{ $sectionIndex }}][heading]"
                                   class="form-control"
                                   value="{{ $section['heading'] ?? '' }}"
                                   placeholder="Enter heading"
                                   required>

                        </div>


                        {{-- POINTS --}}
                        <div>

                            <label class="form-label fw-bold">
                                Points
                            </label>

                            <div class="points-container">

                                @forelse($section['points'] ?? [] as $point)

                                    <div class="input-group mb-2">

                                        <input type="text"
                                               name="appointment_content[{{ $sectionIndex }}][points][]"
                                               class="form-control"
                                               value="{{ $point }}"
                                               placeholder="Enter point"
                                               required>

                                        <button type="button"
                                                class="btn btn-outline-danger"
                                                onclick="removePoint(this)">

                                            Remove

                                        </button>

                                    </div>

                                @empty

                                    <div class="input-group mb-2">

                                        <input type="text"
                                               name="appointment_content[{{ $sectionIndex }}][points][]"
                                               class="form-control"
                                               placeholder="Enter point"
                                               required>

                                        <button type="button"
                                                class="btn btn-outline-danger"
                                                onclick="removePoint(this)">

                                            Remove

                                        </button>

                                    </div>

                                @endforelse

                            </div>


                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary"
                                    onclick="addPoint(this)">

                                + Add Point

                            </button>

                        </div>


                        {{-- REMOVE SECTION --}}
                        <button type="button"
                                class="btn btn-sm btn-danger mt-3"
                                onclick="removeSection(this)">

                            Remove Section

                        </button>

                    </div>

                @empty

                    {{-- DEFAULT SECTION IF NO CONTENT EXISTS --}}
                    <div class="content-section border rounded p-3 mb-3">

                        <div class="mb-3">

                            <label class="form-label fw-bold">
                                Heading
                            </label>

                            <input type="text"
                                   name="appointment_content[0][heading]"
                                   class="form-control"
                                   placeholder="Enter heading"
                                   required>

                        </div>


                        <div>

                            <label class="form-label fw-bold">
                                Points
                            </label>

                            <div class="points-container">

                                <div class="input-group mb-2">

                                    <input type="text"
                                           name="appointment_content[0][points][]"
                                           class="form-control"
                                           placeholder="Enter point"
                                           required>

                                    <button type="button"
                                            class="btn btn-outline-danger"
                                            onclick="removePoint(this)">

                                        Remove

                                    </button>

                                </div>

                            </div>

                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary"
                                    onclick="addPoint(this)">

                                + Add Point

                            </button>

                        </div>


                        <button type="button"
                                class="btn btn-sm btn-danger mt-3"
                                onclick="removeSection(this)">

                            Remove Section

                        </button>

                    </div>

                @endforelse

            </div>

        </div>


        {{-- SUBMIT --}}
        <button type="submit"
                class="btn btn-danger">

            Update Appointment Master

        </button>

    </div>

</form>
```

</div>

<script>

let sectionIndex = {{ count($content ?? []) }};


/*
|--------------------------------------------------------------------------
| ADD NEW SECTION
|--------------------------------------------------------------------------
*/

function addSection()
{
    const container = document.getElementById('contentContainer');

    const section = document.createElement('div');

    section.className =
        'content-section border rounded p-3 mb-3';

    section.innerHTML = `

        <div class="mb-3">

            <label class="form-label fw-bold">
                Heading
            </label>

            <input type="text"
                   name="appointment_content[${sectionIndex}][heading]"
                   class="form-control"
                   placeholder="Enter heading"
                   required>

        </div>


        <div>

            <label class="form-label fw-bold">
                Points
            </label>

            <div class="points-container">

                <div class="input-group mb-2">

                    <input type="text"
                           name="appointment_content[${sectionIndex}][points][]"
                           class="form-control"
                           placeholder="Enter point"
                           required>

                    <button type="button"
                            class="btn btn-outline-danger"
                            onclick="removePoint(this)">

                        Remove

                    </button>

                </div>

            </div>


            <button type="button"
                    class="btn btn-sm btn-outline-secondary"
                    onclick="addPoint(this)">

                + Add Point

            </button>

        </div>


        <button type="button"
                class="btn btn-sm btn-danger mt-3"
                onclick="removeSection(this)">

            Remove Section

        </button>

    `;

    container.appendChild(section);

    sectionIndex++;
}


/*
|--------------------------------------------------------------------------
| ADD POINT
|--------------------------------------------------------------------------
*/

function addPoint(button)
{
    const section =
        button.closest('.content-section');

    const pointsContainer =
        section.querySelector('.points-container');

    const firstInput =
        pointsContainer.querySelector('input');

    const inputName =
        firstInput.getAttribute('name');

    const point =
        document.createElement('div');

    point.className =
        'input-group mb-2';

    point.innerHTML = `

        <input type="text"
               name="${inputName}"
               class="form-control"
               placeholder="Enter point"
               required>

        <button type="button"
                class="btn btn-outline-danger"
                onclick="removePoint(this)">

            Remove

        </button>

    `;

    pointsContainer.appendChild(point);
}


/*
|--------------------------------------------------------------------------
| REMOVE POINT
|--------------------------------------------------------------------------
*/

function removePoint(button)
{
    const pointsContainer =
        button.closest('.points-container');

    const points =
        pointsContainer.querySelectorAll('.input-group');

    if (points.length > 1) {

        button.closest('.input-group').remove();

    }
}


/*
|--------------------------------------------------------------------------
| REMOVE SECTION
|--------------------------------------------------------------------------
*/

function removeSection(button)
{
    const container =
        document.getElementById('contentContainer');

    const sections =
        container.querySelectorAll('.content-section');

    if (sections.length > 1) {

        button.closest('.content-section').remove();

    }
}

</script>

@endsection