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

@push('css')
<style>
    .tpl-page .page-head { margin-bottom: 1.25rem; }
    .tpl-page .page-head h4 { font-weight: 600; margin-bottom: 0.25rem; }
    .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
    .tpl-card {
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        transition: border-color .2s, box-shadow .2s;
        cursor: pointer;
    }
    .tpl-card:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.08); }
    .tpl-card.is-active { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
    .tpl-card__preview {
        height: 120px;
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }
    .tpl-card__swatch { width: 35%; }
    .tpl-card__swatch-b { width: 65%; opacity: .85; }
    .tpl-card__body { padding: 12px 14px; }
    .tpl-card__body h6 { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
    .tpl-card__body p { margin: 0; font-size: 12px; color: #64748b; line-height: 1.4; }
    .tpl-card__foot {
        padding: 0 14px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .tpl-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
    .tpl-card__radio { margin: 0; }
    .tpl-section { margin-bottom: 2rem; }
    .tpl-section h5 {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }
    .tpl-sticky-bar {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        padding: 12px 0;
        margin-top: 1rem;
        z-index: 10;
    }
</style>
@endpush

@section('content')
<div class="tpl-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

    <div class="page-head d-flex flex-wrap justify-content-between align-items-start gap-2">
        <div>
            <h4>{{ __('ID & Visiting Card Templates') }}</h4>
            <p class="text-muted small mb-0">{{ __('Choose one active template per card type. All employees will use the selected design.') }}</p>
        </div>
        <div>
            <a href="{{ route('website.settings') }}" class="btn btn-sm btn-outline-secondary">{{ __('Settings') }}</a>
        </div>
    </div>

    <form method="post" action="{{ route('admin.card_templates.update') }}" id="cardTemplateForm">
        @csrf

        <div class="tpl-section">
            <h5><i class="fas fa-id-card mr-1"></i> {{ __('ID Card Templates') }}
                <span class="badge badge-primary ml-1">{{ __('Select one') }}</span>
            </h5>
            <div class="tpl-grid" data-group="id">
                @foreach($idTemplates as $id => $tpl)
                    <label class="tpl-card mb-0 @if($activeIdTemplate === $id) is-active @endif" data-template-card>
                        <div class="tpl-card__preview">
                            <div class="tpl-card__swatch" style="background:{{ $tpl['primary'] }}"></div>
                            <div class="tpl-card__swatch-b" style="background:{{ $tpl['secondary'] }}"></div>
                        </div>
                        <div class="tpl-card__body">
                            <h6>{{ $tpl['name'] }}</h6>
                            <p>{{ $tpl['description'] }}</p>
                        </div>
                        <div class="tpl-card__foot">
                            <div class="custom-control custom-radio tpl-card__radio">
                                <input type="radio" class="custom-control-input" name="id_card_template"
                                       id="id_tpl_{{ $id }}" value="{{ $id }}" @checked($activeIdTemplate === $id) required>
                                <label class="custom-control-label small" for="id_tpl_{{ $id }}">{{ __('Active') }}</label>
                            </div>
                            <div class="tpl-card__actions">
                                <a href="{{ route('admin.card_templates.customize', ['tab' => 'id', 'template' => $id]) }}"
                                   class="btn btn-xs btn-primary btn-sm"
                                   onclick="event.stopPropagation();">
                                    {{ __('Customize') }}
                                </a>
                                <a href="{{ route('admin.card_templates.preview', ['type' => 'id', 'template' => $id]) }}"
                                   class="btn btn-xs btn-outline-primary btn-sm" target="_blank" rel="noopener"
                                   onclick="event.stopPropagation();">
                                    {{ __('Preview') }}
                                </a>
                            </div>
                        </div>
                    </label>
                @endforeach
            </div>
        </div>

        <div class="tpl-section">
            <h5><i class="fas fa-address-card mr-1"></i> {{ __('Visiting Card Templates') }}
                <span class="badge badge-primary ml-1">{{ __('Select one') }}</span>
            </h5>
            <div class="tpl-grid" data-group="visiting">
                @foreach($visitingTemplates as $id => $tpl)
                    <label class="tpl-card mb-0 @if($activeVisitingTemplate === $id) is-active @endif" data-template-card>
                        <div class="tpl-card__preview">
                            <div class="tpl-card__swatch" style="background:{{ $tpl['primary'] }}"></div>
                            <div class="tpl-card__swatch-b" style="background:{{ $tpl['secondary'] }}"></div>
                        </div>
                        <div class="tpl-card__body">
                            <h6>{{ $tpl['name'] }}</h6>
                            <p>{{ $tpl['description'] }}</p>
                        </div>
                        <div class="tpl-card__foot">
                            <div class="custom-control custom-radio tpl-card__radio">
                                <input type="radio" class="custom-control-input" name="visiting_card_template"
                                       id="vc_tpl_{{ $id }}" value="{{ $id }}" @checked($activeVisitingTemplate === $id) required>
                                <label class="custom-control-label small" for="vc_tpl_{{ $id }}">{{ __('Active') }}</label>
                            </div>
                            <div class="tpl-card__actions">
                                <a href="{{ route('admin.card_templates.customize', ['tab' => 'visiting', 'template' => $id]) }}"
                                   class="btn btn-xs btn-primary btn-sm"
                                   onclick="event.stopPropagation();">
                                    {{ __('Customize') }}
                                </a>
                                <a href="{{ route('admin.card_templates.preview', ['type' => 'visiting', 'template' => $id]) }}"
                                   class="btn btn-xs btn-outline-primary btn-sm" target="_blank" rel="noopener"
                                   onclick="event.stopPropagation();">
                                    {{ __('Preview') }}
                                </a>
                            </div>
                        </div>
                    </label>
                @endforeach
            </div>
        </div>

        <div class="tpl-sticky-bar">
            @can('Settings-edit')
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save mr-1"></i> {{ __('Save Active Templates') }}
                </button>
            @endcan
            <span class="text-muted small ml-2">{{ __('Employees generate cards from staff profile using these templates.') }}</span>
        </div>
    </form>
</div>
@endsection

@push('script')
<script>
(function () {
    document.querySelectorAll('[data-template-card]').forEach(function (card) {
        card.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') return;
            var radio = card.querySelector('input[type=radio]');
            if (!radio) return;
            radio.checked = true;
            var grid = card.closest('.tpl-grid');
            if (grid) {
                grid.querySelectorAll('.tpl-card').forEach(function (c) { c.classList.remove('is-active'); });
            }
            card.classList.add('is-active');
        });
    });
})();
</script>
@endpush