@extends('HR.layout')

@section('content')

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

    <h3>Appointment Master</h3>

    <a href="{{ route('appointment_master_list') }}"
       class="btn btn-dark">
        View Appointment Masters
    </a>

</div>


@if($errors->any())

    <div class="alert alert-danger">
        Please fill all required fields.
    </div>

@endif


<form action="{{ route('save_appointment_master') }}"
      method="POST">

    @csrf

    <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') == $value ? 'selected' : '' }}>

                        {{ $label }}

                    </option>

                @endforeach

            </select>

        </div>


        {{-- 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">


                {{-- FIRST 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[0][heading]"
                               class="form-control"
                               placeholder="Enter heading"
                               required>

                    </div>


                    {{-- POINTS --}}

                    <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>


                    {{-- REMOVE SECTION --}}

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

                        Remove Section

                    </button>


                </div>


            </div>

        </div>


        {{-- SUBMIT --}}

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

            Submit

        </button>


    </div>

</form>



<script>

let sectionIndex = 1;


/*
|--------------------------------------------------------------------------
| 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