@extends(backpack_view('blank'))

@section('after_styles')
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
@endSection
    
@php
  $breadcrumbs = [
      trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
      trans('backpack::base.my_account') => false,
  ];
@endphp

@section('header')
    <section class="content-header">
        <div class="container-fluid mb-3">
            <h1>Services</h1>
        </div>
    </section>
@endsection

@section('content')

    @php
        $services = json_decode($services, true);
        $selectedServices = [];
        $selectedServicesByName =  [];
        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();

        $selectedNames = array_keys($selectedServicesByName);

        // Selected services that are NOT in the default list
        $selectedCustom = collect($selectedNames)
            ->reject(fn ($option) => in_array($option, $defaultOptions));

        // Selected services that ARE in the default list (keep default order)
        $selectedDefaults = collect($defaultOptions)
            ->filter(fn ($option) => in_array($option, $selectedNames));

        // Remaining default services
        $remainingDefaults = collect($defaultOptions)
            ->reject(fn ($option) => in_array($option, $selectedNames));

        $allOptions = $selectedCustom
            ->merge($selectedDefaults)
            ->merge($remainingDefaults)
            ->values();
            

    @endphp

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ url(config('backpack.base.route_prefix').'/pharmacy/save-services') }}">
                    @csrf
                    <input type="hidden" name="pharmacy_id" value="{{ $pharmacyId }}">
                    <div class="form-group">
                        <label >Add New Service</label>
                        <div class="d-flex">
                            <input
                                type="text"
                                id="new-service"
                                class="form-control"
                                placeholder="Enter Service Name">

                            <button
                                class="btn btn-primary"
                                type="button"
                                id="add-service">
                                +
                            </button>
                        </div>
                    </div>
                    <hr class="my-2"/>
                    <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 justify-content-start col-8">
                                <div class="col-4">
                                    <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>
                                </div>
                                <div class="col-8 d-flex">
                                    <input
                                        type="text"
                                        name="services[{{ $index }}][keywords]"
                                        class="service_keywords flex-fill"
                                        value="{{ implode(',', $selected['keywords'] ?? []) }}">

                                    
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-danger remove-service px-2">
                                            −
                                        </button>
                                    
                                </div>

                            </div>
                        @endforeach
                    </div>

                    <button type="submit" class="btn btn-success">
                        Save Changes
                    </button>
                </form>
            </div>
        </div>
    </div>

@endSection

@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) {
                    input.setCustomValidity('Please enter a service name.');
                    input.reportValidity(); // Shows the tooltip
                    input.focus();

                    // Clear the custom message once the user starts typing
                    input.addEventListener('input', function clearValidity() {
                    input.setCustomValidity('');
                    input.removeEventListener('input', clearValidity);
                });

                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 justify-content-start col-8';

                row.innerHTML = `
                    <div class="col-4">
                        <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>
                    </div>
                    <div class="col-8 d-flex">
                        <input
                            type="text"
                            name="services[${serviceIndex}][keywords]"
                            class="service_keywords flex-fill">

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

                serviceList.prepend(row);

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

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

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


@push('after_scripts')
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
    <script>

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