@php
    $type = $cardType;
    $custom = $customData;
    $prefix = $type === 'id' ? 'id' : 'visiting';
    $sigs = $custom['content']['signatures'] ?? [];
    $directorSig = $sigs['director'] ?? [];
    $hrSig = $sigs['hr'] ?? [];
    $frontOrder = $custom['layout']['order']['front'] ?? \App\Support\CardCustomization::defaultFrontOrder($type);
    $backOrder = $custom['layout']['order']['back'] ?? \App\Support\CardCustomization::defaultBackOrder($type);
    $sectionLabels = $type === 'id' ? [
        'show_logo' => __('Organization logo'),
        'show_org_motto' => __('Organization motto'),
        'show_org_name' => __('Organization name'),
        'show_photo' => __('Employee photo'),
        'show_name' => __('Employee name'),
        'show_designation' => __('Designation'),
        'show_signature' => __('Signature block'),
        'show_signature_director' => __('Director signature'),
        'show_signature_hr' => __('HR signature'),
        'show_signature_image' => __('Uploaded signature images'),
        'show_phone' => __('Phone (front/meta)'),
        'show_email' => __('Email (front/meta)'),
        'show_branch' => __('Branch'),
        'show_barcode' => __('Barcode strip'),
        'show_back_certification' => __('Back: certification text'),
        'show_sid' => __('Back: SID'),
        'show_nid' => __('Back: NID'),
        'show_blood_group' => __('Back: blood group'),
        'show_property_note' => __('Back: property note'),
        'show_return_address' => __('Back: return address'),
        'show_org_contact' => __('Back: org contact'),
        'show_issue_date' => __('Back: issue date'),
        'show_footer_notice' => __('Back: non-transferable notice'),
        'show_back_qr' => __('Back: QR code'),
        'show_instructions' => __('Back: custom instructions'),
    ] : [
        'show_logo' => __('Organization logo'),
        'show_org_name' => __('Organization name'),
        'show_org_motto' => __('Organization motto'),
        'show_branch' => __('Branch tag (front)'),
        'show_name' => __('Employee name'),
        'show_designation' => __('Designation'),
        'show_department' => __('Department'),
        'show_phone' => __('Phone'),
        'show_email' => __('Email'),
        'show_address' => __('Address'),
        'show_website' => __('Website'),
        'show_qr' => __('QR code'),
        'show_sid' => __('Employee SID'),
        'show_instructions' => __('Custom instructions'),
    ];
    $directorImg = \App\Support\CardCustomization::signatureImageUrl($custom, 'director');
    $hrImg = \App\Support\CardCustomization::signatureImageUrl($custom, 'hr');
    $previewRoute = route('admin.card_templates.preview', ['type' => $type, 'template' => $activeTemplateId]);
@endphp

<form method="post" action="{{ route('admin.card_templates.customize.update', $type) }}" enctype="multipart/form-data" class="card-custom-form">
    @csrf
    <input type="hidden" name="template_id" value="{{ $activeTemplateId }}">

    <div class="row">
        <div class="col-lg-4 mb-3">
            <div class="card h-100">
                <div class="card-header py-2"><strong>{{ __('Colors & Typography') }}</strong></div>
                <div class="card-body">
                    @foreach(['primary' => __('Primary'), 'secondary' => __('Secondary'), 'surface' => __('Surface'), 'text' => __('Text'), 'accent' => __('Accent')] as $colorKey => $colorLabel)
                        <div class="form-group mb-2">
                            <label class="small mb-1">{{ $colorLabel }}</label>
                            <div class="d-flex align-items-center gap-2">
                                <input type="color" class="color-picker" data-target="{{ $prefix }}_color_{{ $colorKey }}"
                                       value="{{ $custom['colors'][$colorKey] ?: '#15803d' }}">
                                <input type="text" name="colors[{{ $colorKey }}]" id="{{ $prefix }}_color_{{ $colorKey }}"
                                       class="form-control form-control-sm" placeholder="#15803d"
                                       value="{{ old('colors.'.$colorKey, $custom['colors'][$colorKey]) }}">
                            </div>
                            <small class="text-muted">{{ __('Leave blank for template default') }}</small>
                        </div>
                    @endforeach
                    <div class="form-group mb-0">
                        <label class="small font-weight-bold">{{ __('Font family') }}</label>
                        <select name="font_family" class="form-control form-control-sm">
                            @foreach($fontOptions as $val => $label)
                                <option value="{{ $val }}" @selected(old('font_family', $custom['font_family']) === $val)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-3">
            <div class="card h-100">
                <div class="card-header py-2"><strong>{{ __('Photo & Logo') }}</strong></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="small font-weight-bold">{{ __('Photo position') }}</label>
                        <select name="layout[photo_position]" class="form-control form-control-sm">
                            @foreach(['left' => __('Left'), 'center' => __('Center'), 'right' => __('Right')] as $v => $l)
                                <option value="{{ $v }}" @selected(old('layout.photo_position', $custom['layout']['photo_position']) === $v)>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="small font-weight-bold">{{ __('Logo position') }}</label>
                        <select name="layout[logo_position]" class="form-control form-control-sm">
                            @foreach(['top-left' => __('Top left'), 'top-center' => __('Top center')] as $v => $l)
                                <option value="{{ $v }}" @selected(old('layout.logo_position', $custom['layout']['logo_position']) === $v)>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-0">
                        <label class="small font-weight-bold">{{ __('Photo shape') }}</label>
                        <select name="layout[photo_shape]" class="form-control form-control-sm">
                            @foreach(['rect' => __('Rectangle'), 'circle' => __('Circle'), 'square' => __('Square')] as $v => $l)
                                <option value="{{ $v }}" @selected(old('layout.photo_shape', $custom['layout']['photo_shape']) === $v)>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-3">
            <div class="card h-100">
                <div class="card-header py-2"><strong>{{ __('Show / Hide sections') }}</strong></div>
                <div class="card-body custom-scroll" style="max-height: 320px; overflow-y: auto;">
                    @foreach($sectionLabels as $key => $label)
                        <div class="custom-control custom-checkbox mb-1">
                            <input type="checkbox" class="custom-control-input" id="{{ $prefix }}_{{ $key }}"
                                   name="sections[{{ $key }}]" value="1"
                                   @checked(old('sections.'.$key, $custom['sections'][$key] ?? true))>
                            <label class="custom-control-label small" for="{{ $prefix }}_{{ $key }}">{{ $label }}</label>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 mb-3">
            <div class="card h-100">
                <div class="card-header py-2"><strong>{{ __('Drag & drop — Front layout order') }}</strong></div>
                <div class="card-body">
                    <p class="small text-muted">{{ __('Drag blocks to reorder sections on the card front.') }}</p>
                    <ul class="layout-sortable" data-sortable data-input-name="layout[order][front][]">
                        @foreach($frontOrder as $block)
                            <li class="layout-sortable__item" data-block="{{ $block }}">
                                <span class="layout-sortable__handle"><i class="fas fa-grip-vertical"></i></span>
                                <span>{{ $frontBlockLabels[$block] ?? $block }}</span>
                            </li>
                        @endforeach
                    </ul>
                    <div data-sortable-inputs></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-3">
            <div class="card h-100">
                <div class="card-header py-2"><strong>{{ __('Drag & drop — Back layout order') }}</strong></div>
                <div class="card-body">
                    <p class="small text-muted">{{ __('Drag blocks to reorder sections on the card back.') }}</p>
                    <ul class="layout-sortable" data-sortable data-input-name="layout[order][back][]">
                        @foreach($backOrder as $block)
                            <li class="layout-sortable__item" data-block="{{ $block }}">
                                <span class="layout-sortable__handle"><i class="fas fa-grip-vertical"></i></span>
                                <span>{{ $backBlockLabels[$block] ?? $block }}</span>
                            </li>
                        @endforeach
                    </ul>
                    <div data-sortable-inputs></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header py-2"><strong>{{ __('Organization & address') }}</strong></div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>{{ __('Return / office address') }}</label>
                        <textarea name="content[org_address]" class="form-control" rows="3" maxlength="2000"
                                  placeholder="{{ __('Printed on card back') }}">{{ old('content.org_address', $custom['content']['org_address']) }}</textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>{{ __('Organization phone') }}</label>
                            <input type="text" name="content[org_phone]" class="form-control form-control-sm" maxlength="200"
                                   value="{{ old('content.org_phone', $custom['content']['org_phone']) }}">
                        </div>
                        <div class="form-group col-md-6">
                            <label>{{ __('Organization email') }}</label>
                            <input type="email" name="content[org_email]" class="form-control form-control-sm" maxlength="200"
                                   value="{{ old('content.org_email', $custom['content']['org_email']) }}">
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label>{{ __('Website URL') }}</label>
                        <input type="text" name="content[org_website]" class="form-control form-control-sm" maxlength="500"
                               value="{{ old('content.org_website', $custom['content']['org_website']) }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <p class="small text-muted mb-2">{{ __('Legacy single signatory (optional — Director fields below take priority)') }}</p>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>{{ __('Signatory name') }}</label>
                            <input type="text" name="content[signatory_name]" class="form-control form-control-sm" maxlength="200"
                                   value="{{ old('content.signatory_name', $custom['content']['signatory_name']) }}">
                        </div>
                        <div class="form-group col-md-6">
                            <label>{{ __('Signatory title') }}</label>
                            <input type="text" name="content[signatory_title]" class="form-control form-control-sm" maxlength="200"
                                   value="{{ old('content.signatory_title', $custom['content']['signatory_title']) }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($type === 'id')
        <div class="card mb-3">
            <div class="card-header py-2"><strong>{{ __('Authorized signatures — Director & HR') }}</strong></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 border-right">
                        <h6 class="font-weight-bold">{{ __('Director / Executive') }}</h6>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>{{ __('Name') }}</label>
                                <input type="text" name="content[signatures][director][name]" class="form-control form-control-sm" maxlength="200"
                                       value="{{ old('content.signatures.director.name', $directorSig['name'] ?? '') }}">
                            </div>
                            <div class="form-group col-md-6">
                                <label>{{ __('Title') }}</label>
                                <input type="text" name="content[signatures][director][title]" class="form-control form-control-sm" maxlength="200"
                                       value="{{ old('content.signatures.director.title', $directorSig['title'] ?? '') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Label') }}</label>
                            <input type="text" name="content[signatures][director][label]" class="form-control form-control-sm" maxlength="100"
                                   placeholder="Director"
                                   value="{{ old('content.signatures.director.label', $directorSig['label'] ?? 'Director') }}">
                        </div>
                        @if($directorImg)
                            <div class="mb-2 p-2 border rounded bg-light text-center">
                                <img src="{{ $directorImg }}" alt="director signature" style="max-height: 60px; max-width: 100%;">
                            </div>
                            <div class="custom-control custom-checkbox mb-2">
                                <input type="checkbox" class="custom-control-input" id="{{ $prefix }}_remove_sig_dir" name="remove_signature_director" value="1">
                                <label class="custom-control-label small text-danger" for="{{ $prefix }}_remove_sig_dir">{{ __('Remove Director signature') }}</label>
                            </div>
                        @endif
                        <input type="file" name="signature_director" class="form-control-file form-control-sm" accept="image/jpeg,image/png,image/webp">
                    </div>
                    <div class="col-md-6">
                        <h6 class="font-weight-bold">{{ __('HR Manager') }}</h6>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>{{ __('Name') }}</label>
                                <input type="text" name="content[signatures][hr][name]" class="form-control form-control-sm" maxlength="200"
                                       value="{{ old('content.signatures.hr.name', $hrSig['name'] ?? '') }}">
                            </div>
                            <div class="form-group col-md-6">
                                <label>{{ __('Title') }}</label>
                                <input type="text" name="content[signatures][hr][title]" class="form-control form-control-sm" maxlength="200"
                                       value="{{ old('content.signatures.hr.title', $hrSig['title'] ?? '') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Label') }}</label>
                            <input type="text" name="content[signatures][hr][label]" class="form-control form-control-sm" maxlength="100"
                                   placeholder="HR Manager"
                                   value="{{ old('content.signatures.hr.label', $hrSig['label'] ?? 'HR Manager') }}">
                        </div>
                        @if($hrImg)
                            <div class="mb-2 p-2 border rounded bg-light text-center">
                                <img src="{{ $hrImg }}" alt="hr signature" style="max-height: 60px; max-width: 100%;">
                            </div>
                            <div class="custom-control custom-checkbox mb-2">
                                <input type="checkbox" class="custom-control-input" id="{{ $prefix }}_remove_sig_hr" name="remove_signature_hr" value="1">
                                <label class="custom-control-label small text-danger" for="{{ $prefix }}_remove_sig_hr">{{ __('Remove HR signature') }}</label>
                            </div>
                        @endif
                        <input type="file" name="signature_hr" class="form-control-file form-control-sm" accept="image/jpeg,image/png,image/webp">
                        <small class="text-muted d-block mt-1">{{ __('PNG transparent background recommended. Max 2MB each.') }}</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header py-2"><strong>{{ __('Back of card — text & instructions') }}</strong></div>
            <div class="card-body">
                <div class="form-group">
                    <label>{{ __('Certification text') }}</label>
                    <textarea name="content[certification_text]" class="form-control" rows="2" maxlength="2000"
                              placeholder="{{ __('This is to certify that the person whose picture appears hereon is an employee of...') }}">{{ old('content.certification_text', $custom['content']['certification_text']) }}</textarea>
                </div>
                <div class="form-group">
                    <label>{{ __('Property / surrender note') }}</label>
                    <textarea name="content[property_note]" class="form-control" rows="2" maxlength="2000">{{ old('content.property_note', $custom['content']['property_note']) }}</textarea>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>{{ __('Return heading') }}</label>
                        <input type="text" name="content[return_heading]" class="form-control form-control-sm" maxlength="500"
                               value="{{ old('content.return_heading', $custom['content']['return_heading']) }}">
                    </div>
                    <div class="form-group col-md-6">
                        <label>{{ __('Footer notice') }}</label>
                        <input type="text" name="content[footer_text]" class="form-control form-control-sm" maxlength="500"
                               value="{{ old('content.footer_text', $custom['content']['footer_text']) }}">
                    </div>
                </div>
                <div class="form-group mb-0">
                    <label>{{ __('Additional instructions') }}</label>
                    <textarea name="content[instructions]" class="form-control" rows="2" maxlength="3000">{{ old('content.instructions', $custom['content']['instructions']) }}</textarea>
                </div>
            </div>
        </div>
    @else
        <div class="card mb-3">
            <div class="card-header py-2"><strong>{{ __('Additional instructions') }}</strong></div>
            <div class="card-body">
                <textarea name="content[instructions]" class="form-control" rows="3" maxlength="3000"
                          placeholder="{{ __('Optional note on visiting card') }}">{{ old('content.instructions', $custom['content']['instructions']) }}</textarea>
            </div>
        </div>
    @endif

    <div class="d-flex flex-wrap align-items-center gap-2 mb-4">
        @can('Settings-edit')
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i> {{ __('Save template customization') }}
            </button>
        @endcan
        <a href="{{ $previewRoute }}" class="btn btn-outline-secondary" target="_blank" rel="noopener">
            <i class="fas fa-eye mr-1"></i> {{ __('Preview this template') }}
        </a>
    </div>
</form>