@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 class="input-group" id="sel-language-container">
                <label for="sel-language" class="me-2">Select Language</label>
                <select id="sel-language" class="form-select">

                    @foreach ($enabledLanguages as $language)
                        <option value="{{ $language }}">{{ $language }}</option>
                    @endforeach
                </select>
            </div> --}}
        </div>
    </section>
@endsection

@section('content')

    @php
        $defaultOptions = [];
        $allOptions = [];
        $selectedServicesByName =  [];

        foreach( $enabledLanguages as $language) {
            $servicesArray = json_decode($services[$language], true);
            $selectedServices = [];

            if (!empty($servicesArray)) {
                $selectedServicesByName[$language] = collect($servicesArray)
                    ->keyBy('name')
                    ->toArray();
            }

            $selectedNames = array_keys($selectedServicesByName[$language]);

            // 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[$language] = $selectedCustom
                ->merge($selectedDefaults)
                ->merge($remainingDefaults)
                ->values();
            
            
        }
        // dd($selectedServicesByName);
        // dd($allOptions)
    @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">
                        
                            @php
                                $language = "en-NZ";
                            @endphp
                            @foreach($allOptions[$language] as $index => $serviceName)
                                @php
                                    $selected = $selectedServicesByName[$language][$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[{{ $language }}][{{ $index }}][name]"
                                            value="{{ $serviceName }}">

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

                                        <label class="mb-0">{{ $serviceName }}</label>
                                    </div>
                                    <div class="col-8 ">
                                        <div class="d-flex form-group">
                                            <label class="me-2">English</label>
                                            <input
                                                type="text"
                                                name="services[{{ $language }}][{{ $index }}][keywords]"
                                                class="service_keywords flex-fill"
                                                id="services[{{ $language }}][{{ $index }}][keywords]"
                                                value="{{ implode(',', $selected['keywords'] ?? []) }}">
                                            </input>

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

                                        @foreach( $enabledLanguages as $otherLanguage)
                                            @php
                                            if ($otherLanguage != "en-NZ") {                                                
                                                // $serviceValues = $allOptions[$otherLanguage][$index][$serviceName]["keywords"] ?? $selected['keywords'];                                            
                                                $selected = $selectedServicesByName[$otherLanguage][$serviceName] ?? null;
                                            @endphp
                                                <div class="d-flex form-group">
                                                    <label class="me-2">{{ $supportLanguages[$otherLanguage] }}</label>
                                                    <input
                                                        type="text"
                                                        name="services[{{ $otherLanguage }}][{{ $index }}][keywords]"
                                                        class="service_keywords flex-fill"
                                                        id="services[{{ $otherLanguage }}][{{ $index }}][keywords]"
                                                        value="{{ implode(',', $selected['keywords'] ?? []) }}">
                                                    </input>

                                                    <button
                                                        type="button"
                                                        class="btn btn-sm btn-translate px-2"
                                                        data-en-field="services[en-NZ][{{ $index }}][keywords]"
                                                        data-target-language="{{ $otherLanguage }}">
                                                        Translate
                                                    </button>
                                                </div>
                                            @php
                                                }
                                            @endphp
                                        
                                        @endforeach
                                        
                                    </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';
                let rowInnerHtml = '';
                
                rowInnerHtml += `
                    <div class="col-4">
                        <input
                            type="hidden"
                            name="services[en-NZ][${serviceIndex}][name]"
                            value="${value}">
                        </input>

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

                        <label class="mb-0">${value}</label>
                    </div>
                    <div class="col-8 ">
                        <div class="d-flex for-group"

                            <label>English</label>
                            <input
                                type="text"
                                name="services[en-NZ][${serviceIndex}][keywords]"
                                class="service_keywords flex-fill">
                            </input>

                            <button
                                type="button"
                                class="btn btn-sm btn-danger remove-service px-2">
                                −
                            </button>
                        </div>`;
                        @foreach( $enabledLanguages as $otherLanguage)
                            
                            @if ($otherLanguage != "en-NZ")                                       
                            
                                rowInnerHtml += `<div class="d-flex form-group">
                                    <label class="me-2">{{ $otherLanguage }}</label>
                                    <input
                                        type="text"
                                        name="services[{{ $otherLanguage }}][${serviceIndex}][keywords]"
                                        class="service_keywords flex-fill">
                                    </input>
                                    <button
                                        type="button"
                                        class="btn btn-sm btn-translate px-2"
                                        data-en-field="services[en-NZ][${serviceIndex}][keywords]"
                                        data-target-language="{{ $otherLanguage }}">
                                        Translate
                                    </button>
                                </div>`;
                            @endif
                        @endforeach
                rowInnerHtml += 
                    `</div>`;

                row.innerHTML = rowInnerHtml;
                serviceList.prepend(row);

                const inputs = row.querySelectorAll('.service_keywords');
                inputs.forEach((keywordInput) => {
                    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,
            });
        });

        const translateButtons = document.querySelectorAll('.btn-translate');

        translateButtons.forEach( (button) =>  {
            button.addEventListener("click", async(e) => {
                const targetLanguage = e.target.dataset.targetLanguage;
                const enField = e.target.dataset.enField;

                console.log(targetLanguage);
                console.log(enField);
                enFieldELementValue = document.getElementById(enField).value;
                console.log(enFieldELementValue);

                const originalButtonText = button.innerHTML;
                button.innerHTML = 'Translating...';

                const formGroup = button.closest('.form-group');
                const field = formGroup.querySelector('textarea, input:not([type="hidden"])');

                try {

                    const response = await fetch('{{ route('translate-text') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            text: enFieldELementValue,
                            language: targetLanguage
                        })
                    });
                    const data = await response.json();
                    if (!response.ok) {
                        throw new Error(data.message || 'Translation failed.');
                    }
                    if (data.translated_text !== undefined) {
                        console.log( data.translated_text);
                        field.value = data.translated_text;
                        
                        /*
                        * Tom Select
                        */
                        if (field.tomselect) {

                            field.tomselect.clear();

                            // If translatedText is a comma-separated list
                            const values = data.translated_text
                            .split(/[,，]/)
                            .map(value => value.trim())
                            .filter(value => value !== '');

                            values.forEach(value => {

                                field.tomselect.addOption({
                                    value: value,
                                    text: value
                                });

                                field.tomselect.addItem(value);

                            });
                        }
                    } else {
                        throw new Error('No translated text was returned.');
                    }

                } catch (error) {
                    console.error('Translation error:', error);
                    alert(
                        error.message || 
                        'Unable to translate the text. Please try again.'
                    );
                } finally {
                    button.disabled = false;
                    button.innerHTML = originalButtonText;
                }

                

            });
        });
    </script>
@endpush