@php
    $isEdit = isset($homeServiceSection);

    $oldServiceRows = old('services');

    if ($oldServiceRows !== null) {
        $serviceRows = $oldServiceRows;
        $usingOldInput = true;
    } elseif ($isEdit) {
        $serviceRows = $homeServiceSection->services
            ->map(function ($service) {
                return [
                    'title' => $service->title,
                    'description' => $service->description,
                    'icon_class' => $service->icon_class,
                    'link_url' => $service->link_url,
                    'sort_order' => $service->sort_order,
                    'is_active' => $service->is_active,
                ];
            })
            ->toArray();

        $usingOldInput = false;
    } else {
        $serviceRows = [
            [
                'title' => 'Bank Transfer',
                'description' => 'Transfer your money globally with the best exchange rates.',
                'icon_class' => 'fa-solid fa-money-bill-transfer',
                'link_url' => '/bank-transfer',
                'sort_order' => 1,
                'is_active' => true,
            ],
            [
                'title' => 'Currency Exchange',
                'description' => 'Purchase and trade currency at the most competitive market rates.',
                'icon_class' => 'fa-solid fa-coins',
                'link_url' => '/currency-exchange',
                'sort_order' => 2,
                'is_active' => true,
            ],
            [
                'title' => 'Cash Pickup',
                'description' => 'A convenient and affordable way of sending and receiving money.',
                'icon_class' => 'fa-solid fa-hand-holding-dollar',
                'link_url' => '/cash-pickup',
                'sort_order' => 3,
                'is_active' => true,
            ],
            [
                'title' => 'Utility Bill Payment',
                'description' => 'You can pay your electricity, water, and telephone bills with zero service charges.',
                'icon_class' => 'fa-regular fa-credit-card',
                'link_url' => '/utility-bill',
                'sort_order' => 4,
                'is_active' => true,
            ],
        ];

        $usingOldInput = false;
    }
@endphp

<style>
    .service-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .service-form-group {
        min-width: 0;
    }

    .service-form-group.full-width {
        grid-column: 1 / -1;
    }

    .service-form-label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 13px;
        font-weight: 700;
    }

    .service-form-required {
        color: #dc2626;
    }

    .service-form-control {
        width: 100%;
        min-height: 47px;
        padding: 11px 14px;
        border: 0;
        border-radius: 7px;
        outline: 0;
        background: #f1f5f9;
        color: #111827;
        font-size: 14px;
        transition: 0.2s ease;
    }

    .service-form-control:focus {
        background: #fff0eb;
    }

    textarea.service-form-control {
        min-height: 115px;
        resize: vertical;
    }

    .service-form-help {
        margin: 7px 0 0;
        color: #6b7280;
        font-size: 11px;
        line-height: 1.6;
    }

    .service-form-field-error {
        margin: 7px 0 0;
        color: #dc2626;
        font-size: 12px;
        font-weight: 600;
    }

    .service-section-status {
        min-height: 47px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 7px;
        background: #f1f5f9;
    }

    .service-section-status input {
        width: 18px;
        height: 18px;
        accent-color: #ff5722;
    }

    .service-section-status label {
        cursor: pointer;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

    .service-cards-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-top: 30px;
        margin-bottom: 16px;
    }

    .service-cards-heading h3 {
        margin: 0;
        color: #111827;
        font-size: 18px;
        font-weight: 700;
    }

    .service-add-card-button {
        min-height: 39px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 13px;
        border: 0;
        border-radius: 7px;
        background: #fff0eb;
        color: #e64917;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
    }

    .service-repeat-list {
        display: grid;
        gap: 18px;
    }

    .service-repeat-item {
        padding: 20px;
        border-radius: 10px;
        background: #f8fafc;
    }

    .service-repeat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 18px;
    }

    .service-repeat-title {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #111827;
        font-size: 15px;
        font-weight: 700;
    }

    .service-icon-preview {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #fff0eb;
        color: #ff5722;
        font-size: 17px;
    }

    .service-remove-button {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 7px;
        background: #fee2e2;
        color: #dc2626;
        cursor: pointer;
    }

    .service-remove-button:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    .service-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px;
    }

    .service-card-status {
        min-height: 47px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 7px;
        background: #ffffff;
    }

    .service-card-status input {
        width: 18px;
        height: 18px;
        accent-color: #ff5722;
    }

    .service-card-status label {
        cursor: pointer;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

    .service-form-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 24px;
    }

    .service-form-button {
        min-height: 43px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 17px;
        border: 0;
        border-radius: 7px;
        background: #ff5722;
        color: #ffffff;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: 0.2s ease;
    }

    .service-form-button:hover {
        background: #e64917;
        color: #ffffff;
    }

    .service-form-button.back {
        background: #e2e8f0;
        color: #334155;
    }

    .service-form-button.back:hover {
        background: #cbd5e1;
        color: #111827;
    }

    @media (max-width: 767px) {
        .service-form-grid,
        .service-card-grid {
            grid-template-columns: 1fr;
        }

        .service-form-group.full-width {
            grid-column: auto;
        }

        .service-cards-heading {
            align-items: flex-start;
            flex-direction: column;
        }

        .service-add-card-button {
            width: 100%;
        }

        .service-repeat-item {
            padding: 16px;
        }

        .service-form-actions {
            flex-direction: column-reverse;
        }

        .service-form-actions .service-form-button {
            width: 100%;
        }
    }
</style>

<div class="service-form-grid">
    <div class="service-form-group">
        <label
            for="label"
            class="service-form-label"
        >
            <i class="fa-solid fa-tag"></i>
            Section Label
        </label>

        <input
            type="text"
            id="label"
            name="label"
            class="service-form-control"
            value="{{ old(
                'label',
                $homeServiceSection->label ?? 'OUR SERVICES'
            ) }}"
            placeholder="OUR SERVICES"
            maxlength="150"
        >

        @error('label')
            <p class="service-form-field-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group">
        <label
            for="center_logo"
            class="service-form-label"
        >
            <i class="fa-solid fa-circle-dot"></i>
            Center Logo Text
        </label>

        <input
            type="text"
            id="center_logo"
            name="center_logo"
            class="service-form-control"
            value="{{ old(
                'center_logo',
                $homeServiceSection->center_logo ?? 'We'
            ) }}"
            placeholder="We"
            maxlength="30"
        >

        @error('center_logo')
            <p class="service-form-field-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group full-width">
        <label
            for="title"
            class="service-form-label"
        >
            <i class="fa-solid fa-heading"></i>
            Section Main Title
            <span class="service-form-required">*</span>
        </label>

        <textarea
            id="title"
            name="title"
            class="service-form-control"
            maxlength="500"
            required
        >{{ old(
            'title',
            $homeServiceSection->title ??
            'Explore the various services we offer to our valued customers at Wasel Exchange'
        ) }}</textarea>

        @error('title')
            <p class="service-form-field-error">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="service-form-group full-width">
        <label class="service-form-label">
            <i class="fa-solid fa-toggle-on"></i>
            Section Status
        </label>

        <div class="service-section-status">
            <input
                type="hidden"
                name="is_active"
                value="0"
            >

            <input
                type="checkbox"
                id="is_active"
                name="is_active"
                value="1"
                @checked(
                    old(
                        'is_active',
                        $homeServiceSection->is_active ?? true
                    )
                )
            >

            <label for="is_active">
                Show this service section on homepage
            </label>
        </div>
    </div>
</div>

<div class="service-cards-heading">
    <h3>
        <i class="fa-solid fa-layer-group"></i>
        Service Cards
    </h3>

    <button
        type="button"
        class="service-add-card-button"
        id="addServiceCard"
    >
        <i class="fa-solid fa-plus"></i>
        Add Service Card
    </button>
</div>

<div
    class="service-repeat-list"
    id="serviceRepeatList"
>
    @foreach ($serviceRows as $index => $service)
        @php
            $serviceActive = $usingOldInput
                ? !empty($service['is_active'])
                : (bool) ($service['is_active'] ?? true);
        @endphp

        <div
            class="service-repeat-item"
            data-service-item
        >
            <div class="service-repeat-header">
                <div class="service-repeat-title">
                    <span class="service-icon-preview">
                        <i class="{{ $service['icon_class']
                            ?? 'fa-solid fa-circle' }}"></i>
                    </span>

                    <span>
                        Service Card
                    </span>
                </div>

                <button
                    type="button"
                    class="service-remove-button"
                    data-remove-service
                    title="Remove service card"
                >
                    <i class="fa-solid fa-trash"></i>
                </button>
            </div>

            <div class="service-card-grid">
                <div class="service-form-group">
                    <label class="service-form-label">
                        Service Title
                        <span class="service-form-required">*</span>
                    </label>

                    <input
                        type="text"
                        name="services[{{ $index }}][title]"
                        class="service-form-control"
                        value="{{ $service['title'] ?? '' }}"
                        maxlength="150"
                        required
                    >

                    @error("services.$index.title")
                        <p class="service-form-field-error">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div class="service-form-group">
                    <label class="service-form-label">
                        Font Awesome Icon Class
                        <span class="service-form-required">*</span>
                    </label>

                    <input
                        type="text"
                        name="services[{{ $index }}][icon_class]"
                        class="service-form-control service-icon-input"
                        value="{{ $service['icon_class']
                            ?? 'fa-solid fa-circle' }}"
                        placeholder="fa-solid fa-coins"
                        maxlength="150"
                        required
                    >

                    <p class="service-form-help">
                        Example: fa-solid fa-coins
                    </p>

                    @error("services.$index.icon_class")
                        <p class="service-form-field-error">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div class="service-form-group full-width">
                    <label class="service-form-label">
                        Description
                        <span class="service-form-required">*</span>
                    </label>

                    <textarea
                        name="services[{{ $index }}][description]"
                        class="service-form-control"
                        maxlength="1000"
                        required
                    >{{ $service['description'] ?? '' }}</textarea>

                    @error("services.$index.description")
                        <p class="service-form-field-error">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div class="service-form-group">
                    <label class="service-form-label">
                        Service URL
                    </label>

                    <input
                        type="text"
                        name="services[{{ $index }}][link_url]"
                        class="service-form-control"
                        value="{{ $service['link_url'] ?? '' }}"
                        placeholder="/bank-transfer"
                        maxlength="2048"
                    >

                    @error("services.$index.link_url")
                        <p class="service-form-field-error">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div class="service-form-group">
                    <label class="service-form-label">
                        Sort Order
                    </label>

                    <input
                        type="number"
                        name="services[{{ $index }}][sort_order]"
                        class="service-form-control"
                        value="{{ $service['sort_order'] ?? $index + 1 }}"
                        min="0"
                        max="9999"
                    >

                    @error("services.$index.sort_order")
                        <p class="service-form-field-error">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div class="service-form-group full-width">
                    <label class="service-form-label">
                        Card Status
                    </label>

                    <div class="service-card-status">
                        <input
                            type="checkbox"
                            name="services[{{ $index }}][is_active]"
                            value="1"
                            @checked($serviceActive)
                        >

                        <label>
                            Show this service card on homepage
                        </label>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="service-form-actions">
    <a
        href="{{ route('admin.home-services.index') }}"
        class="service-form-button back"
    >
        <i class="fa-solid fa-xmark"></i>
        Cancel
    </a>

    <button
        type="submit"
        class="service-form-button"
    >
        <i class="fa-solid fa-floppy-disk"></i>

        {{ $isEdit
            ? 'Update Service Section'
            : 'Save Service Section' }}
    </button>
</div>

<template id="serviceCardTemplate">
    <div
        class="service-repeat-item"
        data-service-item
    >
        <div class="service-repeat-header">
            <div class="service-repeat-title">
                <span class="service-icon-preview">
                    <i class="fa-solid fa-circle"></i>
                </span>

                <span>Service Card</span>
            </div>

            <button
                type="button"
                class="service-remove-button"
                data-remove-service
            >
                <i class="fa-solid fa-trash"></i>
            </button>
        </div>

        <div class="service-card-grid">
            <div class="service-form-group">
                <label class="service-form-label">
                    Service Title
                    <span class="service-form-required">*</span>
                </label>

                <input
                    type="text"
                    name="services[__INDEX__][title]"
                    class="service-form-control"
                    maxlength="150"
                    required
                >
            </div>

            <div class="service-form-group">
                <label class="service-form-label">
                    Font Awesome Icon Class
                    <span class="service-form-required">*</span>
                </label>

                <input
                    type="text"
                    name="services[__INDEX__][icon_class]"
                    class="service-form-control service-icon-input"
                    value="fa-solid fa-circle"
                    maxlength="150"
                    required
                >

                <p class="service-form-help">
                    Example: fa-solid fa-coins
                </p>
            </div>

            <div class="service-form-group full-width">
                <label class="service-form-label">
                    Description
                    <span class="service-form-required">*</span>
                </label>

                <textarea
                    name="services[__INDEX__][description]"
                    class="service-form-control"
                    maxlength="1000"
                    required
                ></textarea>
            </div>

            <div class="service-form-group">
                <label class="service-form-label">
                    Service URL
                </label>

                <input
                    type="text"
                    name="services[__INDEX__][link_url]"
                    class="service-form-control"
                    placeholder="/service-page"
                    maxlength="2048"
                >
            </div>

            <div class="service-form-group">
                <label class="service-form-label">
                    Sort Order
                </label>

                <input
                    type="number"
                    name="services[__INDEX__][sort_order]"
                    class="service-form-control"
                    value="0"
                    min="0"
                    max="9999"
                >
            </div>

            <div class="service-form-group full-width">
                <label class="service-form-label">
                    Card Status
                </label>

                <div class="service-card-status">
                    <input
                        type="checkbox"
                        name="services[__INDEX__][is_active]"
                        value="1"
                        checked
                    >

                    <label>
                        Show this service card on homepage
                    </label>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const serviceList =
            document.getElementById('serviceRepeatList');

        const addButton =
            document.getElementById('addServiceCard');

        const template =
            document.getElementById('serviceCardTemplate');

        function createUniqueIndex() {
            return (
                Date.now().toString() +
                Math.floor(Math.random() * 1000)
            );
        }

        function updateRemoveButtons() {
            const serviceItems =
                serviceList.querySelectorAll(
                    '[data-service-item]'
                );

            serviceItems.forEach(function (item) {
                const removeButton =
                    item.querySelector(
                        '[data-remove-service]'
                    );

                if (removeButton) {
                    removeButton.disabled =
                        serviceItems.length <= 1;
                }
            });
        }

        function updateIconPreview(item) {
            const iconInput =
                item.querySelector(
                    '.service-icon-input'
                );

            const previewIcon =
                item.querySelector(
                    '.service-icon-preview i'
                );

            if (!iconInput || !previewIcon) {
                return;
            }

            const iconClass =
                iconInput.value.trim() ||
                'fa-solid fa-circle';

            previewIcon.className = iconClass;
        }

        addButton?.addEventListener(
            'click',
            function () {
                const currentCount =
                    serviceList.querySelectorAll(
                        '[data-service-item]'
                    ).length;

                if (currentCount >= 4) {
                    alert(
                        'Maximum four service cards are allowed.'
                    );

                    return;
                }

                const index = createUniqueIndex();

                const html = template.innerHTML.replaceAll(
                    '__INDEX__',
                    index
                );

                serviceList.insertAdjacentHTML(
                    'beforeend',
                    html
                );

                const newItem =
                    serviceList.lastElementChild;

                updateIconPreview(newItem);
                updateRemoveButtons();
            }
        );

        serviceList?.addEventListener(
            'click',
            function (event) {
                const removeButton =
                    event.target.closest(
                        '[data-remove-service]'
                    );

                if (!removeButton) {
                    return;
                }

                const serviceItems =
                    serviceList.querySelectorAll(
                        '[data-service-item]'
                    );

                if (serviceItems.length <= 1) {
                    return;
                }

                removeButton
                    .closest('[data-service-item]')
                    ?.remove();

                updateRemoveButtons();
            }
        );

        serviceList?.addEventListener(
            'input',
            function (event) {
                if (
                    !event.target.classList.contains(
                        'service-icon-input'
                    )
                ) {
                    return;
                }

                const item =
                    event.target.closest(
                        '[data-service-item]'
                    );

                updateIconPreview(item);
            }
        );

        serviceList
            ?.querySelectorAll('[data-service-item]')
            .forEach(function (item) {
                updateIconPreview(item);
            });

        updateRemoveButtons();
    });
</script>