@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Card Customization'))

@push('css')
<style>
    .card-custom-page .nav-pills .nav-link { font-weight: 500; border-radius: 8px; padding: 8px 16px; }
    .card-custom-page .nav-pills .nav-link.active { background: #4f46e5; }
    .color-picker { width: 42px; height: 34px; padding: 2px; border: 1px solid #ced4da; border-radius: 6px; cursor: pointer; }
    .layout-sortable { list-style: none; margin: 0; padding: 0; min-height: 120px; }
    .layout-sortable__item {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 10px; margin-bottom: 6px;
        background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
        cursor: grab; user-select: none;
    }
    .layout-sortable__item:active { cursor: grabbing; }
    .layout-sortable__item.sortable-ghost { opacity: .45; background: #e0e7ff; }
    .layout-sortable__handle { color: #94a3b8; }
</style>
@endpush

@section('content')
<div class="card-custom-page pt-3 pb-4 px-2 px-md-3">
    @if (session()->has('message'))
        <div class="alert alert-success py-2">{{ session('message') }}</div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger py-2">
            <ul class="mb-0 pl-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h4 class="mb-1">{{ __('Card Customization') }}</h4>
            <p class="text-muted small mb-0">
                {{ __('Editing template') }}:
                <strong>#{{ $selectedTemplate }} — {{ $templateMeta['name'] ?? '' }}</strong>
                · {{ $activeTab === 'visiting' ? __('Visiting Card') : __('ID Card') }}
            </p>
        </div>
        <div class="btn-group">
            <a href="{{ route('admin.card_templates.index') }}" class="btn btn-sm btn-outline-secondary">{{ __('Templates') }}</a>
            <a href="{{ route('website.settings') }}" class="btn btn-sm btn-outline-secondary">{{ __('Site Settings') }}</a>
        </div>
    </div>

    <ul class="nav nav-pills mb-3">
        <li class="nav-item">
            <a class="nav-link @if($activeTab === 'id') active @endif" href="{{ route('admin.card_templates.customize', ['tab' => 'id', 'template' => $activeTab === 'id' ? $selectedTemplate : $activeIdTemplate]) }}">
                <i class="fas fa-id-card mr-1"></i> {{ __('ID Card') }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link @if($activeTab === 'visiting') active @endif" href="{{ route('admin.card_templates.customize', ['tab' => 'visiting', 'template' => $activeTab === 'visiting' ? $selectedTemplate : $activeVisitingTemplate]) }}">
                <i class="fas fa-address-card mr-1"></i> {{ __('Visiting Card') }}
            </a>
        </li>
    </ul>

    @include('admin.card_templates.partials.customize_form', [
        'cardType' => $activeTab,
        'customData' => $customData,
        'fontOptions' => $fontOptions,
        'activeTemplateId' => $selectedTemplate,
        'frontBlockLabels' => $frontBlockLabels,
        'backBlockLabels' => $backBlockLabels,
    ])
</div>
@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
    document.querySelectorAll('.color-picker').forEach(function (picker) {
        var targetId = picker.getAttribute('data-target');
        var textInput = document.getElementById(targetId);
        if (!textInput) return;
        picker.addEventListener('input', function () { textInput.value = picker.value; });
        textInput.addEventListener('input', function () {
            if (/^#[0-9A-Fa-f]{6}$/.test(textInput.value)) picker.value = textInput.value;
        });
    });

    document.querySelectorAll('[data-sortable]').forEach(function (list) {
        var inputName = list.getAttribute('data-input-name');
        Sortable.create(list, {
            animation: 150,
            handle: '.layout-sortable__handle',
            ghostClass: 'sortable-ghost',
            onSort: function () { syncSortableInputs(list, inputName); }
        });
        syncSortableInputs(list, inputName);
    });

    function syncSortableInputs(list, inputName) {
        var container = list.parentElement.querySelector('[data-sortable-inputs]');
        if (!container) return;
        container.innerHTML = '';
        list.querySelectorAll('[data-block]').forEach(function (item) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = inputName;
            input.value = item.getAttribute('data-block');
            container.appendChild(input);
        });
    }
})();
</script>
@endpush