@extends('donamarmita-admin')
@section('title', 'Editar Template - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-palette text-primary"></i> 
                Editar Template
            </h1>
            <p class="text-muted">
                Alterar template para geração de imagens de vouchers
            </p>
        </div>
        <div class="title_right">
            <div class="btn-group pull-right" role="group">
                <a href="{{ route('admin.marketing.vouchers.templates.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Voltar à Lista
                </a>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <i class="fas fa-home mr-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.marketing.vouchers.images.index') }}">
                            <i class="fas fa-images mr-1"></i> Imagens
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.marketing.vouchers.templates.index') }}">
                            <i class="fas fa-palette mr-1"></i> Templates
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-edit mr-1"></i> Editar: {{ $template->cit_name }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Main Panel -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        <i class="fas fa-edit mr-2"></i>
                        Editar Template: <span class="text-primary">{{ $template->cit_name }}</span>
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <!-- Error Alerts -->
                    @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        <strong>Por favor, corrija os seguintes erros:</strong>
                        <ul class="mt-2 mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    <!-- Form -->
                    <form method="POST" action="{{ route('admin.marketing.vouchers.templates.update', $template->cit_id) }}" class="form-horizontal form-label-left" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <!-- Coluna da Esquerda - Informação Básica -->
                            <div class="col-md-6">
                                <!-- Card: Informação Básica -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-info-circle text-primary mr-2"></i>
                                            Informação Básica
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="cit_name">
                                                <i class="fas fa-tag mr-1"></i>
                                                Nome do Template <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" 
                                                   class="form-control @error('cit_name') is-invalid @enderror" 
                                                   id="cit_name" 
                                                   name="cit_name" 
                                                   value="{{ old('cit_name', $template->cit_name) }}"
                                                   placeholder="Ex: Template Verão 2026"
                                                   required>
                                            @error('cit_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Nome identificador do template
                                            </small>
                                        </div>

                                        <div class="form-group mt-3">
                                            <label class="font-weight-bold text-primary" for="cit_description">
                                                <i class="fas fa-align-left mr-1"></i>
                                                Descrição
                                            </label>
                                            <textarea class="form-control @error('cit_description') is-invalid @enderror" 
                                                      id="cit_description" 
                                                      name="cit_description" 
                                                      rows="3"
                                                      placeholder="Breve descrição do template...">{{ old('cit_description', $template->cit_description) }}</textarea>
                                            @error('cit_description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Opcional: descreva quando usar este template
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Card: Background Image -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-image text-primary mr-2"></i>
                                            Imagem de Fundo
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary">
                                                <i class="fas fa-cloud-upload-alt mr-1"></i>
                                                Imagem Atual
                                            </label>

                                            @if($template->cit_background_image)
                                            <div class="current-image mb-4 text-center" id="currentImageContainer">
                                                <div class="position-relative d-inline-block">
                                                    <img src="{{ asset('images/templates/' . $template->cit_background_image) }}" 
                                                         alt="{{ $template->cit_name }}"
                                                         class="img-thumbnail"
                                                         style="max-height: 200px; border-radius: 8px;">
                                                </div>                                                
                                            </div>
                                            <div class="mt-3">
                                                    <div class="checkbox">
                                                        <label>
                                                            <input type="checkbox" 
                                                                   id="changeImage" 
                                                                   name="change_image" 
                                                                   value="1"
                                                                   class="js-switch">
                                                            <span style="margin-left: 8px;">Alterar imagem</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endif

                                            <!-- Dropzone Area (inicialmente escondido) -->
                                            <div id="dropzoneContainer" class="dropzone-area" style="display: none;">
                                                <input type="hidden" id="folder-1" value="templates">
                                                <input type="hidden" id="width-1" value="{{ $couponWidth }}">
                                                <input type="hidden" id="height-1" value="{{ $couponHeight }}">
                                                <input type="hidden" id="numberOfFiles-1" value="1">
                                                <input type="hidden" id="imgName-1" name="cit_background_image" value="{{ old('cit_background_image', $template->cit_background_image) }}">
                                                <input type="hidden" id="linkToAdministration-1" value="{{ $adminPage ?? '' }}">
                                                
                                                <div class="dropzone" id="dropzone1" data-form-id="1" style="border: 2px dashed #ccc; border-radius: 8px; padding: 30px; text-align: center; background-color: #fafafa; cursor: pointer;">
                                                    <i class="fas fa-cloud-upload-alt fa-4x mb-3 upload-icon" style="color: #ccc;"></i>
                                                    <h5>Arraste uma imagem ou clique para selecionar</h5>
                                                    <p class="text-muted mb-0">PNG, JPG, JPEG até 5MB</p>
                                                </div>
                                            </div>
                                            
                                            <!-- Preview da nova imagem -->
                                            <div class="mt-3 text-center" id="imagePreviewContainer" style="display: none;">
                                                <h6 class="text-muted mb-2">Nova imagem:</h6>
                                                <div class="position-relative d-inline-block">
                                                    <img id="imagePreview" src="#" alt="Preview" class="img-thumbnail" style="max-height: 200px; border-radius: 8px;">
                                                    <button type="button" class="btn btn-sm btn-danger position-absolute" style="top: -10px; right: -10px;" id="removeNewImage">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <small class="form-text text-muted">
                                                    <strong>Dimensões recomendadas:</strong> {{ $couponWidth }} x {{ $couponHeight }} px
                                                </small>
                                                <small class="form-text text-muted">
                                                    <strong>Formatos aceites:</strong> JPG, PNG, WebP
                                                </small>
                                                <small class="form-text text-muted">
                                                    <strong>Tamanho máximo:</strong> 5MB
                                                </small>
                                            </div>

                                            @error('cit_background_image')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Coluna da Direita - Configurações do Texto -->
                            <div class="col-md-6">
                                <!-- Card: Configurações da Fonte -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-font text-primary mr-2"></i>
                                            Configurações da Fonte
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="cit_font_family">
                                                <i class="fas fa-text-height mr-1"></i>
                                                Família da Fonte
                                            </label>
                                            <select class="form-control select2" id="cit_font_family" name="cit_font_family" style="width: 100%;">
                                                <option value="Arial" {{ old('cit_font_family', $template->cit_font_family) == 'Arial' ? 'selected' : '' }}>Arial</option>
                                                <option value="Helvetica" {{ old('cit_font_family', $template->cit_font_family) == 'Helvetica' ? 'selected' : '' }}>Helvetica</option>
                                                <option value="Times New Roman" {{ old('cit_font_family', $template->cit_font_family) == 'Times New Roman' ? 'selected' : '' }}>Times New Roman</option>
                                                <option value="Courier New" {{ old('cit_font_family', $template->cit_font_family) == 'Courier New' ? 'selected' : '' }}>Courier New</option>
                                                <option value="Verdana" {{ old('cit_font_family', $template->cit_font_family) == 'Verdana' ? 'selected' : '' }}>Verdana</option>
                                                <option value="Georgia" {{ old('cit_font_family', $template->cit_font_family) == 'Georgia' ? 'selected' : '' }}>Georgia</option>
                                                <option value="Palatino" {{ old('cit_font_family', $template->cit_font_family) == 'Palatino' ? 'selected' : '' }}>Palatino</option>
                                                <option value="Garamond" {{ old('cit_font_family', $template->cit_font_family) == 'Garamond' ? 'selected' : '' }}>Garamond</option>
                                                <option value="Comic Sans MS" {{ old('cit_font_family', $template->cit_font_family) == 'Comic Sans MS' ? 'selected' : '' }}>Comic Sans MS</option>
                                                <option value="Trebuchet MS" {{ old('cit_font_family', $template->cit_font_family) == 'Trebuchet MS' ? 'selected' : '' }}>Trebuchet MS</option>
                                                <option value="Arial Black" {{ old('cit_font_family', $template->cit_font_family) == 'Arial Black' ? 'selected' : '' }}>Arial Black</option>
                                                <option value="Impact" {{ old('cit_font_family', $template->cit_font_family) == 'Impact' ? 'selected' : '' }}>Impact</option>
                                            </select>
                                            <small class="form-text text-muted">
                                                Fonte para o texto do voucher
                                            </small>
                                        </div>

                                        <div class="form-group mt-3">
                                            <label class="font-weight-bold text-primary" for="cit_font_size">
                                                <i class="fas fa-text-height mr-1"></i>
                                                Tamanho da Fonte (px)
                                            </label>
                                            <div class="input-group">
                                                <input type="number" 
                                                       class="form-control @error('cit_font_size') is-invalid @enderror" 
                                                       id="cit_font_size" 
                                                       name="cit_font_size" 
                                                       value="{{ old('cit_font_size', $template->cit_font_size) }}"
                                                       min="8"
                                                       max="72"
                                                       step="1">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">px</span>
                                                </div>
                                            </div>
                                            <small class="form-text text-muted">
                                                Tamanho em pixels (8-72px)
                                            </small>
                                        </div>

                                        <div class="form-group mt-3">
                                            <label class="font-weight-bold text-primary" for="cit_font_color">
                                                <i class="fas fa-paint-brush mr-1"></i>
                                                Cor da Fonte
                                            </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" style="padding: 0;">
                                                        <input type="color" 
                                                               id="cit_font_color_picker"
                                                               value="{{ old('cit_font_color', $template->cit_font_color ?? '#000000') }}"
                                                               style="width: 40px; height: 38px; border: none; cursor: pointer;">
                                                    </span>
                                                </div>
                                                <input type="text" 
                                                       class="form-control @error('cit_font_color') is-invalid @enderror" 
                                                       id="cit_font_color" 
                                                       name="cit_font_color" 
                                                       value="{{ old('cit_font_color', $template->cit_font_color) }}"
                                                       placeholder="#000000"
                                                       maxlength="7">
                                            </div>
                                            <small class="form-text text-muted">
                                                Cor em hexadecimal (ex: #000000 para preto)
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Card: Posição do Texto -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-arrows-alt text-primary mr-2"></i>
                                            Posição do Texto
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="font-weight-bold text-primary" for="cit_text_position_x">
                                                        <i class="fas fa-arrows-alt-h mr-1"></i>
                                                        Posição X (%)
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="range" 
                                                               class="form-control-range" 
                                                               id="cit_text_position_x_slider"
                                                               min="0" 
                                                               max="100" 
                                                               value="{{ old('cit_text_position_x', $template->cit_text_position_x ?? 50) }}"
                                                               oninput="this.nextElementSibling.value = this.value + '%'">
                                                        <input type="number" 
                                                               class="form-control mt-2" 
                                                               id="cit_text_position_x" 
                                                               name="cit_text_position_x" 
                                                               value="{{ old('cit_text_position_x', $template->cit_text_position_x ?? 50) }}"
                                                               min="0"
                                                               max="100"
                                                               step="1"
                                                               oninput="document.getElementById('cit_text_position_x_slider').value = this.value">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="font-weight-bold text-primary" for="cit_text_position_y">
                                                        <i class="fas fa-arrows-alt-v mr-1"></i>
                                                        Posição Y (%)
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="range" 
                                                               class="form-control-range" 
                                                               id="cit_text_position_y_slider"
                                                               min="0" 
                                                               max="100" 
                                                               value="{{ old('cit_text_position_y', $template->cit_text_position_y ?? 50) }}"
                                                               oninput="this.nextElementSibling.value = this.value + '%'">
                                                        <input type="number" 
                                                               class="form-control mt-2" 
                                                               id="cit_text_position_y" 
                                                               name="cit_text_position_y" 
                                                               value="{{ old('cit_text_position_y', $template->cit_text_position_y ?? 50) }}"
                                                               min="0"
                                                               max="100"
                                                               step="1"
                                                               oninput="document.getElementById('cit_text_position_y_slider').value = this.value">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Preview da posição -->
                                        <div class="position-preview mt-4 p-3 bg-light rounded">
                                            <h6 class="text-muted mb-3">Pré-visualização da Posição:</h6>
                                            <div class="preview-box" style="position: relative; width: 100%; height: 70%; min-height: 150px; background: #f0f0f0; border-radius: 8px; overflow: hidden;">
                                                <img id="previewBackground" src="{{ $template->cit_background_image ? asset('images/templates/' . $template->cit_background_image) : '#' }}" 
                                                     alt="Background Preview" 
                                                     style="width: 100%; height: 100%; object-fit: cover; {{ $template->cit_background_image ? '' : 'display: none;' }}">
                                                <div class="preview-text" style="position: absolute; top: {{ $template->cit_text_position_y ?? 50 }}%; left: {{ $template->cit_text_position_x ?? 50 }}%; transform: translate(-50%, -50%); font-weight: bold; color: {{ $template->cit_font_color ?? '#000000' }}; font-size: {{ $template->cit_font_size ?? 24 }}px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">
                                                    EXEMPLO
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Card: Status -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-cog text-primary mr-2"></i>
                                            Status
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary d-block">
                                                <i class="fas fa-eye mr-1"></i>
                                                Estado do Template
                                            </label>
                                            <div class="custom-control custom-switch mt-2">
                                                <input type="checkbox" 
                                                       class="custom-control-input" 
                                                       id="cit_active" 
                                                       name="cit_active" 
                                                       value="1" 
                                                       {{ old('cit_active', $template->cit_active) == 1 ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="cit_active">
                                                    <span class="text-success font-weight-bold">Ativo</span> para utilização
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Se ativo, o template aparece na lista para gerar imagens
                                            </small>
                                        </div>
                                        
                                        @php
                                            $usageCount = $template->images()->count();
                                        @endphp
                                        @if($usageCount > 0)
                                        <div class="alert alert-info mt-3 py-2">
                                            <i class="fas fa-images mr-2"></i>
                                            <strong>{{ $usageCount }}</strong> imagem(ns) gerada(s) com este template.
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Informação adicional -->
                        <div class="alert alert-warning mb-4" role="alert">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-lightbulb fa-2x mr-3 text-warning"></i>
                                <div>
                                    <strong>Dica:</strong> Se alterar a imagem, as imagens já geradas com este template não serão afetadas.
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group row">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-save mr-2"></i>
                                    Guardar Alterações
                                </button>
                                <a href="{{ route('admin.marketing.vouchers.templates.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times mr-2"></i>
                                    Cancelar
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
/* Card Styling */
.card {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e4e7ed;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0 !important;
}

.card-header h5 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.card-body {
    padding: 20px;
}

/* Form Labels */
label.font-weight-bold {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

label.font-weight-bold i {
    font-size: 16px;
}

/* Form Controls */
.form-control {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    height: auto;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #26B99A;
    box-shadow: 0 0 0 0.2rem rgba(38, 185, 154, 0.25);
}

.form-control.is-invalid {
    border-color: #dc3545;
}

/* Custom Switch */
.custom-switch .custom-control-label::before {
    border-radius: 1rem;
    border: 1px solid #e0e0e0;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
    border-color: #28a745;
}

/* Dropzone */
.dropzone {
    transition: all 0.3s ease;
}

.dropzone:hover {
    border-color: #26B99A !important;
    background-color: #f0f0f0;
}

.dropzone:hover .upload-icon {
    color: #26B99A !important;
}

/* Range Input */
.form-control-range {
    width: 100%;
    margin: 10px 0;
}

.form-control-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #26B99A;
    cursor: pointer;
}

.form-control-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #26B99A;
    cursor: pointer;
}

/* Color Input */
input[type="color"] {
    cursor: pointer;
    border: none;
}

/* Preview Box */
.preview-box {
    position: relative;
    border: 2px solid #ddd;
}

.preview-text {
    pointer-events: none;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .card-body {
        padding: 15px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .text-right {
        text-align: left !important;
    }
    
    .preview-box {
        height: 120px !important;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    
    // Initialize Select2
    $('#cit_font_family').select2({
        width: '100%',
        placeholder: 'Selecione uma fonte'
    });
    
    /* ============================================================
     | MOSTRAR/OCULTAR DROPZONE PARA ALTERAR IMAGEM
     ============================================================ */
    $('#changeImage').on('change', function() {
        if (this.checked) {
            $('#currentImageContainer').slideUp(300);
            $('#dropzoneContainer').slideDown(300);
            $('#imagePreviewContainer').hide();
        } else {
            $('#currentImageContainer').slideDown(300);
            $('#dropzoneContainer').slideUp(300);
            $('#imagePreviewContainer').hide();
        }
    });
    
    /* ============================================================
     | IMAGE PREVIEW
     ============================================================ */
    $('#dropzone1').on('click', function() {
        // Simular clique no input file
        $('<input type="file" accept="image/*">').on('change', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').attr('src', e.target.result);
                    $('#previewBackground').attr('src', e.target.result).show();
                    $('#imagePreviewContainer').fadeIn(300);
                    $('#dropzone1').hide();
                    
                    // Atualizar preview da posição
                    updatePositionPreview();
                }
                reader.readAsDataURL(file);
            }
        }).click();
    });
    
    $('#removeNewImage').on('click', function() {
        $('#imagePreviewContainer').hide();
        $('#previewBackground').attr('src', '{{ $template->cit_background_image ? asset("storage/templates/" . $template->cit_background_image) : "#" }}');
        if (!'{{ $template->cit_background_image }}') {
            $('#previewBackground').hide();
        }
        $('#dropzone1').show();
        $('#imgName-1').val('');
        $('#changeImage').prop('checked', false);
    });
    
    /* ============================================================
     | COLOR PICKER SYNC
     ============================================================ */
    $('#cit_font_color_picker').on('input', function() {
        $('#cit_font_color').val($(this).val());
        updatePreviewStyle();
    });
    
    $('#cit_font_color').on('input', function() {
        var val = $(this).val();
        if (/^#[0-9A-F]{6}$/i.test(val)) {
            $('#cit_font_color_picker').val(val);
        }
        updatePreviewStyle();
    });
    
    /* ============================================================
     | FONT SIZE
     ============================================================ */
    $('#cit_font_size').on('input', function() {
        updatePreviewStyle();
    });
    
    /* ============================================================
     | POSITION PREVIEW
     ============================================================ */
    $('#cit_text_position_x, #cit_text_position_x_slider, #cit_text_position_y, #cit_text_position_y_slider').on('input', function() {
        var x = $('#cit_text_position_x').val();
        var y = $('#cit_text_position_y').val();
        
        $('#cit_text_position_x_slider').val(x);
        $('#cit_text_position_y_slider').val(y);
        
        updatePositionPreview();
    });
    
    function updatePositionPreview() {
        var x = $('#cit_text_position_x').val() + '%';
        var y = $('#cit_text_position_y').val() + '%';
        $('.preview-text').css({
            'top': y,
            'left': x,
            'transform': 'translate(-' + x + ', -' + y + ')'
        });
    }
    
    function updatePreviewStyle() {
        var fontSize = $('#cit_font_size').val() + 'px';
        var color = $('#cit_font_color').val();
        
        $('.preview-text').css({
            'font-size': fontSize,
            'color': color
        });
    }
    
    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        $('.alert-dismissible').fadeOut(500);
    }, 5000);
    
    // Loading overlay on form submit
    $('form').on('submit', function() {
        $('#dm-loader').fadeIn(200);
    });
});
</script>
@endpush

@endsection