@php
    $services = json_decode($field['services'], true);
    $selectedServices = [];

    if (!empty($services)) {
        $selectedServicesByName = collect($services)
            ->keyBy('name')
            ->toArray();
    }

    $defaultOptions = [
        'Flu vaccinations',
        'COVID vaccinations',
        'Blood pressure checks',
        'Medicine blister packs',
        'Smoking cessation',
        'Weight management',
        'Travel health advice',
        'Passport photos',
        'Vaccinations',
        'Health checks',
        'Blister packs',
        'Delivery services',
        'Blood pressure monitors',
    ];

    $allOptions = collect($defaultOptions)
        ->merge(array_keys($selectedServicesByName))
        ->unique()
        ->values();

@endphp

<div class="form-group col-md-12">
    <div class="card">
        <div class="card-header">
            <label class="fw-bold">Services</label>
        </div>

        <div class="card-body">

            <div id="service-list">
                @foreach($allOptions as $index => $serviceName)
                    @php
                        $selected = $selectedServicesByName[$serviceName] ?? null;
                    @endphp
                    <div class="service-item d-flex align-items-center mb-2 gap-2">

                        <input
                            type="hidden"
                            name="services[{{ $index }}][name]"
                            value="{{ $serviceName }}">

                        <input
                            type="checkbox"
                            name="services[{{ $index }}][is_enabled]"
                            value="1"
                            {{ !empty($selected['is_enabled']) ? 'checked' : '' }}>

                        <label class="mb-0">{{ $serviceName }}</label>

                        <input
                            type="text"
                            name="services[{{ $index }}][keywords]"
                            class="service_keywords"
                            value="{{ implode(',', $selected['keywords'] ?? []) }}">

                        @if(!in_array($serviceName, $defaultOptions))
                            <button
                                type="button"
                                class="btn btn-sm btn-danger remove-service">
                                −
                            </button>
                        @endif

                    </div>
                @endforeach
            </div>

            <hr>

            <div class="input-group">
                <input
                    type="text"
                    id="new-service"
                    class="form-control"
                    placeholder="Add new service">

                <button
                    class="btn btn-primary"
                    type="button"
                    id="add-service">
                    +
                </button>
            </div>

        </div>
    </div>
</div>

@push('after_scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const serviceList = document.getElementById('service-list');
    const addBtn = document.getElementById('add-service');
    const input = document.getElementById('new-service');

    function serviceExists(name) {
        const labels = serviceList.querySelectorAll('label');
        return [...labels].some(label =>
            label.textContent.trim().toLowerCase() === name.toLowerCase()
        );
    }

    let serviceIndex = document.querySelectorAll('.service-item').length;

    addBtn.addEventListener('click', function () {

        const value = input.value.trim();

        if (!value) return;

        if (serviceExists(value)) {
            alert('Service already exists.');
            return;
        }

        const row = document.createElement('div');
        row.className = 'service-item d-flex align-items-center mb-2 gap-2';

        row.innerHTML = `
            <input
                type="hidden"
                name="services[${serviceIndex}][name]"
                value="${value}">

            <input
                type="checkbox"
                class="form-check-input me-2"
                name="services[${serviceIndex}][is_enabled]"
                value="1"
                checked>

            <label class="mb-0">${value}</label>

            <input
                type="text"
                name="services[${serviceIndex}][keywords]"
                class="service_keywords">

            <button
                type="button"
                class="btn btn-sm btn-danger remove-service">
                −
            </button>
        `;

        serviceList.appendChild(row);

        const keywordInput = row.querySelector('.service_keywords');

        new TomSelect(keywordInput, {
            create: true,
            sortField: {
                field: "text",
                direction: "asc"
            }
        });

        serviceIndex++;
        input.value = '';
    });
    
    serviceList.addEventListener('click', function(e){

        if(e.target.classList.contains('remove-service')){
            e.target.closest('.service-item').remove();
        }

    });

    input.addEventListener('keypress', function(e){
        if(e.key === 'Enter'){
            e.preventDefault();
            addBtn.click();
        }
    });

});
</script>

@push('after_scripts')
<script>
    document.querySelectorAll('.service_keywords').forEach(function(el) {
        new TomSelect(el, {
            create: true,
            sortField: {
                field: "text",
                direction: "asc"
            },
            createOnBlur: true,
        });
    });
</script>
@endpush