@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')
@include('admin.partials.management-styles')

@php
    $totalTypes = $serviceTypes->count();
    $activeTypes = $serviceTypes->where('status', 'active')->count();
    $totalSubTypes = $serviceTypes->sum(fn ($serviceType) => $serviceType->subTypes->count());
    $totalListings = $serviceTypes->sum('listings_count');
    $serviceIconMeta = function (?string $icon): array {
        $icon = trim((string) $icon);

        if ($icon === '') {
            return ['type' => 'fontawesome', 'value' => 'fa-solid fa-briefcase'];
        }

        if (preg_match('/class\s*=\s*["\']([^"\']+)["\']/i', $icon, $matches) === 1) {
            $icon = trim($matches[1]);
        }

        $isFontAwesome = preg_match('/(^|\s)(fa[srbltd]?|fa-solid|fa-regular|fa-brands|fa-light|fa-thin|fa-duotone)(\s|$)/', $icon) === 1
            || str_starts_with($icon, 'fa-');

        return $isFontAwesome
            ? ['type' => 'fontawesome', 'value' => $icon]
            : ['type' => 'material', 'value' => $icon];
    };
@endphp

<style>
    .service-icon-box {
        align-items: center;
        background: var(--color-surface-container-low);
        border: 1px solid var(--color-outline-variant);
        border-radius: 10px;
        color: var(--color-primary);
        display: inline-flex;
        height: 44px;
        justify-content: center;
        width: 44px;
    }

    .service-icon-box i,
    .service-icon-box .material-symbols-outlined {
        font-size: 24px;
    }

    .listing-actions {
        align-items: center;
        display: inline-flex;
        gap: 6px;
        justify-content: flex-end;
    }

    .admin-action.danger:hover {
        background: rgba(186, 26, 26, .1);
        color: var(--color-error);
    }

    .service-type-row {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 12px;
        overflow: hidden;
    }

    .service-type-head {
        align-items: center;
        display: flex;
        gap: 14px;
        justify-content: space-between;
        padding: 18px;
    }

    .service-type-title {
        align-items: center;
        display: flex;
        gap: 12px;
        min-width: 0;
    }

    .service-subtype-list {
        border-top: 1px solid var(--color-outline-variant);
        padding: 0;
    }

    .service-subtype-list[hidden] {
        display: none;
    }

    .service-subtype-item {
        align-items: center;
        border-top: 1px solid var(--color-surface-container-low);
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(180px, 1fr) 120px 80px auto;
        padding: 12px 18px;
    }

    .service-subtype-item:first-child {
        border-top: 0;
    }

    .service-modal-preview {
        align-items: center;
        background: var(--color-surface-container-low);
        border: 1px dashed var(--color-outline-variant);
        border-radius: 12px;
        display: flex;
        gap: 10px;
        min-height: 58px;
        padding: 12px;
    }

    .service-toggle-icon {
        transition: transform .18s ease;
    }

    .js-toggle-sub-types[aria-expanded="true"] .service-toggle-icon {
        transform: rotate(180deg);
    }

    @media (max-width: 1399.98px) and (min-width: 992px) {
        .service-icon-box {
            border-radius: 8px;
            height: 38px;
            width: 38px;
        }

        .service-icon-box i,
        .service-icon-box .material-symbols-outlined {
            font-size: 22px;
        }

        .service-type-row {
            border-radius: 10px;
        }

        .service-type-head {
            gap: 12px;
            padding: 14px 16px;
        }

        .service-type-title {
            gap: 10px;
        }

        .service-subtype-item {
            gap: 10px;
            grid-template-columns: minmax(170px, 1fr) 104px 72px auto;
            padding: 10px 16px;
        }

        .listing-actions {
            gap: 4px;
        }
    }

    @media (max-width: 767.98px) {
        .service-type-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .service-subtype-item {
            grid-template-columns: 1fr;
        }
    }
</style>

<main id="main" class="pt-4">
    <section class="d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-3 mb-4">
        <div>
            <div class="admin-breadcrumb">
                <span>Admin</span><span class="material-symbols-outlined" style="font-size:16px;">chevron_right</span><span class="active">Service Types</span>
            </div>
            <h2 class="admin-page-title">Service Type Management</h2>
            <p class="admin-page-subtitle">Manage dynamic service categories, icons, and sub types for provider listings.</p>
        </div>
        <button class="btn-primary-action" id="addServiceTypeButton" type="button">
            <span class="material-symbols-outlined" style="font-size:18px;">add</span>
            Add Service Type
        </button>
    </section>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Please review the form.</strong>
            <ul class="mb-0 mt-2">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif

    <section class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">design_services</span></div><p class="admin-stat-value">{{ number_format($totalTypes) }}</p><p class="admin-stat-label">Service types</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">task_alt</span></div><p class="admin-stat-value">{{ number_format($activeTypes) }}</p><p class="admin-stat-label">Active types</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">account_tree</span></div><p class="admin-stat-value">{{ number_format($totalSubTypes) }}</p><p class="admin-stat-label">Sub types</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">inventory_2</span></div><p class="admin-stat-value">{{ number_format($totalListings) }}</p><p class="admin-stat-label">Linked listings</p></div></div>
    </section>

    <section class="admin-card">
        <div class="admin-card-body border-bottom">
            <div class="admin-toolbar flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                <div>
                    <h3 class="admin-card-title mb-0">Service Library</h3>
                    <p class="admin-meta mt-1 mb-0">Create service types once, then maintain their individual sub type options.</p>
                </div>
                <input id="serviceTypeSearch" class="admin-search" type="search" placeholder="Search service types...">
            </div>
        </div>

        <div class="admin-card-body d-grid gap-3" id="serviceTypeList">
            @forelse ($serviceTypes as $serviceType)
                @php($iconMeta = $serviceIconMeta($serviceType->icon))
                <article class="service-type-row" data-search-text="{{ Str::lower($serviceType->name.' '.$serviceType->status.' '.$serviceType->subTypes->pluck('name')->implode(' ')) }}">
                    <div class="service-type-head">
                        <div class="service-type-title">
                            <div class="service-icon-box">
                                @if ($iconMeta['type'] === 'fontawesome')
                                    <i class="{{ $iconMeta['value'] }}" aria-hidden="true"></i>
                                @else
                                    <span class="material-symbols-outlined">{{ $iconMeta['value'] }}</span>
                                @endif
                            </div>
                            <div>
                                <p class="admin-name mb-1">{{ $serviceType->name }}</p>
                                <div class="d-flex flex-wrap gap-2">
                                    <span class="admin-chip">Sort {{ (int) $serviceType->sort_order }}</span>
                                    <span class="admin-status {{ $serviceType->status === 'active' ? 'success' : 'warning' }}">{{ ucfirst($serviceType->status) }}</span>
                                    <span class="admin-meta">{{ $serviceType->listings_count }} listings</span>
                                    <span class="admin-meta">{{ $serviceType->subTypes->count() }} sub types</span>
                                </div>
                            </div>
                        </div>
                        <div class="listing-actions">
                            <button class="admin-action js-toggle-sub-types"
                                type="button"
                                aria-expanded="false"
                                aria-controls="service-subtypes-{{ $serviceType->id }}"
                                title="Show sub types">
                                <span class="material-symbols-outlined service-toggle-icon">expand_more</span>
                            </button>
                            <button class="admin-action js-add-sub-type"
                                data-service-type-id="{{ $serviceType->id }}"
                                data-service-type-name="{{ $serviceType->name }}"
                                type="button"
                                title="Add sub type">
                                <span class="material-symbols-outlined">add</span>
                            </button>
                            <button class="admin-action js-edit-service-type"
                                data-id="{{ $serviceType->id }}"
                                data-name="{{ $serviceType->name }}"
                                data-icon="{{ $serviceType->icon }}"
                                data-status="{{ $serviceType->status }}"
                                data-sort-order="{{ $serviceType->sort_order }}"
                                type="button"
                                title="Edit service type">
                                <span class="material-symbols-outlined">edit</span>
                            </button>
                            <form method="POST" action="{{ route('admin.service-types.destroy', $serviceType) }}" onsubmit="return confirm('Delete this service type? Existing listings will keep their saved label, but this option will no longer appear for new listings.');">
                                @csrf
                                @method('DELETE')
                                <button class="admin-action danger" type="submit" title="Delete service type"><span class="material-symbols-outlined">delete</span></button>
                            </form>
                        </div>
                    </div>

                    <div id="service-subtypes-{{ $serviceType->id }}" class="service-subtype-list" hidden>
                        @forelse ($serviceType->subTypes as $subType)
                            <div class="service-subtype-item">
                                <div>
                                    <strong>{{ $subType->name }}</strong>
                                    <div class="admin-meta">SUB-{{ str_pad((string) $subType->id, 4, '0', STR_PAD_LEFT) }}</div>
                                </div>
                                <span class="admin-status {{ $subType->status === 'active' ? 'success' : 'warning' }}">{{ ucfirst($subType->status) }}</span>
                                <span class="admin-chip">Sort {{ (int) $subType->sort_order }}</span>
                                <div class="listing-actions justify-content-end">
                                    <button class="admin-action js-edit-sub-type"
                                        data-id="{{ $subType->id }}"
                                        data-name="{{ $subType->name }}"
                                        data-status="{{ $subType->status }}"
                                        data-sort-order="{{ $subType->sort_order }}"
                                        data-service-type-name="{{ $serviceType->name }}"
                                        type="button"
                                        title="Edit sub type">
                                        <span class="material-symbols-outlined">edit</span>
                                    </button>
                                    <form method="POST" action="{{ route('admin.service-sub-types.destroy', $subType) }}" onsubmit="return confirm('Delete this service sub type?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="admin-action danger" type="submit" title="Delete sub type"><span class="material-symbols-outlined">delete</span></button>
                                    </form>
                                </div>
                            </div>
                        @empty
                            <div class="admin-meta p-3">No sub types added yet.</div>
                        @endforelse
                    </div>
                </article>
            @empty
                <div class="text-center admin-meta py-5">No service types added yet.</div>
            @endforelse
        </div>
    </section>
</main>

<div class="modal fade" id="serviceTypeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="serviceTypeForm" method="POST" action="{{ route('admin.service-types.store') }}">
                @csrf
                <input id="serviceTypeMethod" name="_method" type="hidden" value="PUT" disabled>
                <div class="modal-header">
                    <h5 class="modal-title" id="serviceTypeModalTitle">Add Service Type</h5>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body d-grid gap-3">
                    <div class="service-modal-preview">
                        <div class="service-icon-box" id="serviceTypeIconPreviewWrap"><i class="fa-solid fa-briefcase" aria-hidden="true"></i></div>
                        <div><strong id="serviceTypeNamePreview">Service type</strong><div class="admin-meta">Icon preview</div></div>
                    </div>
                    <label><span class="form-label fw-semibold">Name</span><input id="serviceTypeName" class="form-control" name="name" placeholder="Plumber" required></label>
                    <label>
                        <span class="form-label fw-semibold d-flex align-items-center justify-content-between gap-2">
                            Icon
                            <a class="admin-meta text-decoration-none" href="https://fontawesome.com/v5/search?m=free" target="_blank" rel="noopener noreferrer">Copy FA class</a>
                        </span>
                        <input id="serviceTypeIcon" class="form-control" name="icon" placeholder='<i class="fas fa-tools"></i>'>
                        <span class="admin-meta">Paste Font Awesome HTML, for example &lt;i class=&quot;fas fa-tools&quot;&gt;&lt;/i&gt;.</span>
                    </label>
                    <div class="row g-3">
                        <div class="col-md-6"><label><span class="form-label fw-semibold">Status</span><select id="serviceTypeStatus" class="form-select" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></label></div>
                        <div class="col-md-6"><label><span class="form-label fw-semibold">Sort</span><input id="serviceTypeSort" class="form-control" min="0" name="sort_order" type="number" value="0"></label></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button>
                    <button class="btn-primary-action" id="serviceTypeSubmit" type="submit"><span class="material-symbols-outlined" style="font-size:18px;">save</span> Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="subTypeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="subTypeForm" method="POST">
                @csrf
                <input id="subTypeMethod" name="_method" type="hidden" value="PUT" disabled>
                <div class="modal-header">
                    <h5 class="modal-title" id="subTypeModalTitle">Add Sub Type</h5>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body d-grid gap-3">
                    <div class="admin-chip align-self-start" id="subTypeParentLabel">Service type</div>
                    <label><span class="form-label fw-semibold">Name</span><input id="subTypeName" class="form-control" name="name" placeholder="Pipe Repair" required></label>
                    <div class="row g-3">
                        <div class="col-md-6"><label><span class="form-label fw-semibold">Status</span><select id="subTypeStatus" class="form-select" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></label></div>
                        <div class="col-md-6"><label><span class="form-label fw-semibold">Sort</span><input id="subTypeSort" class="form-control" min="0" name="sort_order" type="number" value="0"></label></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button>
                    <button class="btn-primary-action" id="subTypeSubmit" type="submit"><span class="material-symbols-outlined" style="font-size:18px;">save</span> Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const serviceTypeModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('serviceTypeModal'));
    const subTypeModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('subTypeModal'));
    const serviceTypeStoreUrl = @json(route('admin.service-types.store'));
    const serviceTypeUpdateUrl = @json(route('admin.service-types.update', ['serviceType' => '__TYPE__']));
    const subTypeStoreUrl = @json(route('admin.service-types.sub-types.store', ['serviceType' => '__TYPE__']));
    const subTypeUpdateUrl = @json(route('admin.service-sub-types.update', ['serviceSubType' => '__SUBTYPE__']));
    const urlFor = (template, id) => template.replace('__TYPE__', id).replace('__SUBTYPE__', id);

    const typeForm = document.getElementById('serviceTypeForm');
    const typeMethod = document.getElementById('serviceTypeMethod');
    const typeName = document.getElementById('serviceTypeName');
    const typeIcon = document.getElementById('serviceTypeIcon');
    const typeStatus = document.getElementById('serviceTypeStatus');
    const typeSort = document.getElementById('serviceTypeSort');
    const iconPreviewWrap = document.getElementById('serviceTypeIconPreviewWrap');
    const namePreview = document.getElementById('serviceTypeNamePreview');

    const extractIconClass = value => {
        const icon = value.trim();
        const classMatch = icon.match(/class\s*=\s*["']([^"']+)["']/i);

        return classMatch ? classMatch[1].trim() : icon;
    };

    const isFontAwesomeIcon = value => {
        const icon = extractIconClass(value);

        return /(^|\s)(fa[srbltd]?|fa-solid|fa-regular|fa-brands|fa-light|fa-thin|fa-duotone)(\s|$)/.test(icon)
            || icon.startsWith('fa-');
    };

    const safeIconClass = value => {
        const classes = value.split(/\s+/)
        .map(part => part.replace(/[^a-zA-Z0-9_-]/g, ''))
        .filter(Boolean)
        .filter((part, index, all) => all.indexOf(part) === index);
        const hasStyleClass = classes.some(part => ['fas', 'far', 'fab', 'fal', 'fat', 'fad', 'fa-solid', 'fa-regular', 'fa-brands', 'fa-light', 'fa-thin', 'fa-duotone'].includes(part));

        if (!hasStyleClass) {
            classes.unshift('fa-solid');
        }

        return classes.join(' ');
    };

    const syncTypePreview = () => {
        const icon = (typeIcon.value || 'fa-solid fa-briefcase').trim();
        const iconClass = extractIconClass(icon);

        if (isFontAwesomeIcon(icon)) {
            iconPreviewWrap.innerHTML = `<i class="${safeIconClass(iconClass)}" aria-hidden="true"></i>`;
        } else {
            const span = document.createElement('span');
            span.className = 'material-symbols-outlined';
            span.textContent = iconClass;
            iconPreviewWrap.replaceChildren(span);
        }

        namePreview.textContent = typeName.value.trim() || 'Service type';
    };

    const setTypeForm = (mode, data = {}) => {
        const editing = mode === 'edit';
        typeForm.reset();
        typeForm.action = editing ? urlFor(serviceTypeUpdateUrl, data.id) : serviceTypeStoreUrl;
        typeMethod.disabled = !editing;
        document.getElementById('serviceTypeModalTitle').textContent = editing ? 'Edit Service Type' : 'Add Service Type';
        document.getElementById('serviceTypeSubmit').innerHTML = `<span class="material-symbols-outlined" style="font-size:18px;">save</span> ${editing ? 'Update' : 'Create'}`;
        typeName.value = data.name || '';
        typeIcon.value = data.icon || '';
        typeStatus.value = data.status || 'active';
        typeSort.value = data.sortOrder || data.sort_order || 0;
        syncTypePreview();
    };

    document.getElementById('addServiceTypeButton').addEventListener('click', () => {
        setTypeForm('create');
        serviceTypeModal.show();
    });

    document.querySelectorAll('.js-edit-service-type').forEach(button => {
        button.addEventListener('click', () => {
            setTypeForm('edit', button.dataset);
            serviceTypeModal.show();
        });
    });

    [typeName, typeIcon].forEach(input => input.addEventListener('input', syncTypePreview));

    const subForm = document.getElementById('subTypeForm');
    const subMethod = document.getElementById('subTypeMethod');
    const subName = document.getElementById('subTypeName');
    const subStatus = document.getElementById('subTypeStatus');
    const subSort = document.getElementById('subTypeSort');

    const setSubForm = (mode, data = {}) => {
        const editing = mode === 'edit';
        subForm.reset();
        subForm.action = editing ? urlFor(subTypeUpdateUrl, data.id) : urlFor(subTypeStoreUrl, data.serviceTypeId);
        subMethod.disabled = !editing;
        document.getElementById('subTypeModalTitle').textContent = editing ? 'Edit Sub Type' : 'Add Sub Type';
        document.getElementById('subTypeSubmit').innerHTML = `<span class="material-symbols-outlined" style="font-size:18px;">save</span> ${editing ? 'Update' : 'Create'}`;
        document.getElementById('subTypeParentLabel').textContent = data.serviceTypeName || 'Service type';
        subName.value = data.name || '';
        subStatus.value = data.status || 'active';
        subSort.value = data.sortOrder || data.sort_order || 0;
    };

    document.querySelectorAll('.js-add-sub-type').forEach(button => {
        button.addEventListener('click', () => {
            setSubForm('create', button.dataset);
            subTypeModal.show();
        });
    });

    document.querySelectorAll('.js-edit-sub-type').forEach(button => {
        button.addEventListener('click', () => {
            setSubForm('edit', button.dataset);
            subTypeModal.show();
        });
    });

    document.querySelectorAll('.js-toggle-sub-types').forEach(button => {
        button.addEventListener('click', () => {
            const panel = document.getElementById(button.getAttribute('aria-controls'));
            if (!panel) {
                return;
            }

            const expanded = button.getAttribute('aria-expanded') === 'true';
            button.setAttribute('aria-expanded', String(!expanded));
            button.title = expanded ? 'Show sub types' : 'Hide sub types';
            panel.hidden = expanded;
        });
    });

    document.getElementById('serviceTypeSearch').addEventListener('input', event => {
        const search = event.target.value.trim().toLowerCase();
        document.querySelectorAll('[data-search-text]').forEach(row => {
            row.classList.toggle('d-none', search !== '' && !row.dataset.searchText.includes(search));
        });
    });
});
</script>

@include('admin.partials.footer')