@extends('backoffice.dashboard')

@section('content')

@if(Auth::check())

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!-- TinyMCE will be used for the body editor -->

<div class="container-fluid dashboard-inner-body-container">
    <div class="row">
        <div class="col-lg-12">
            <div class="block-card dashboard-card mb-4 px-0">
                
                {{-- Header --}}
                <div class="block-card-header px-4 border-bottom-0 pb-0 d-flex justify-content-between align-items-center">
                    <h2 class="widget-title">
                        @if(isset($pdfTemplate))
                            تعديل قالب النتائج
                        @else
                            إنشاء قالب نتائج جديد
                        @endif
                    </h2>
                    
                    <a href="{{ route('concours.pdf-templates.index', $concours) }}" class="btn btn-outline-secondary btn-sm">
                        <i class="la la-arrow-right me-1"></i> عودة
                    </a>
                </div>

                {{-- Body --}}
                <div class="block-card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger text-end">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ isset($pdfTemplate) ? route('concours.pdf-templates.update', [$concours, $pdfTemplate]) : route('concours.pdf-templates.store', $concours) }}" 
                          method="POST" 
                          enctype="multipart/form-data"
                          id="templateForm"
                          style="direction: rtl;">
                        @csrf
                        @if(isset($pdfTemplate))
                            @method('PUT')
                        @endif

                        <div class="px-4">
                            <!-- Template Name -->
                            <div class="form-group mb-4">
                                <label for="template_name" class="form-label fw-bold">اسم القالب *</label>
                                <input type="text" 
                                       class="form-control @error('template_name') is-invalid @enderror" 
                                       id="template_name" 
                                       name="template_name" 
                                       value="{{ old('template_name', $pdfTemplate->template_name ?? '') }}"
                                       placeholder="مثال: نتائج النهائية"
                                       required>
                                @error('template_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Assigned Candidate States -->
                            <div class="form-group mb-4">
                                <label class="form-label fw-bold">تطبيق على حالات المترشح</label>
                                <div class="d-flex flex-wrap" style="gap:12px;">
                                    @php $assignedOld = old('assigned_states', $pdfTemplate->assigned_states ?? []); @endphp
                                    @foreach($candidateStates as $stateKey => $stateLabel)
                                        <div class="form-check me-3 mb-2">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="state_{{ $stateKey }}" 
                                                   name="assigned_states[]" 
                                                   value="{{ $stateKey }}"
                                                   {{ (is_array($assignedOld) && in_array($stateKey, $assignedOld)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="state_{{ $stateKey }}">{{ $stateLabel }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        {{-- Tabs --}}
                        <ul class="nav nav-tabs mb-4" role="tablist" style="direction: rtl;">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="header-tab" data-bs-toggle="tab" data-bs-target="#header-content" type="button" role="tab" aria-controls="header-content" aria-selected="true">
                                    <i class="fa-solid fa-heading me-2"></i> رأس الصفحة
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="attributes-tab" data-bs-toggle="tab" data-bs-target="#attributes-content" type="button" role="tab" aria-controls="attributes-content" aria-selected="false">
                                    <i class="fa-solid fa-check-double me-2"></i> اختيار الحقول
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="body-tab" data-bs-toggle="tab" data-bs-target="#body-content" type="button" role="tab" aria-controls="body-content" aria-selected="false">
                                    <i class="fa-solid fa-file-lines me-2"></i> محتوى الصفحة
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="footer-tab" data-bs-toggle="tab" data-bs-target="#footer-content" type="button" role="tab" aria-controls="footer-content" aria-selected="false">
                                    <i class="fa-solid fa-shoe-prints me-2"></i> تذييل الصفحة
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content">
                            {{-- Header Tab --}}
                            <div class="tab-pane fade show active" id="header-content" role="tabpanel" aria-labelledby="header-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title mb-4">رأس الصفحة (Header)</h5>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                    <label for="header_image" class="form-label">صورة الرأس</label>
                                                    <div class="input-group">
                                                        <input type="file" 
                                                               class="form-control @error('header_image') is-invalid @enderror" 
                                                               id="header_image" 
                                                               name="header_image"
                                                               accept="image/*">
                                                        <small class="form-text text-muted d-block mt-2">الصيغ المدعومة: JPEG, PNG, JPG, GIF (الحد الأقصى: 5MB)</small>
                                                    </div>
                                                    @error('header_image')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror

                                                    @if(isset($pdfTemplate) && $pdfTemplate->header_image_path && Storage::disk('concours')->exists($pdfTemplate->header_image_path))
                                                        <div class="mt-3">
                                                            <small class="text-muted d-block mb-2">الصورة الحالية:</small>
                                                            <img src="{{ route('concours.pdf-templates.shared-file', [$concours, $pdfTemplate]) . '?path=' . urlencode($pdfTemplate->header_image_path) }}" 
                                                                 style="max-width: 100%; height: auto; max-height: 150px;">
                                                            <label class="mt-2">
                                                                <input type="checkbox" name="remove_header_image" value="1"> حذف الصورة الحالية
                                                            </label>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                    <label for="header_pdf" class="form-label">ملف PDF للرأس</label>
                                                    <div class="input-group">
                                                        <input type="file" 
                                                               class="form-control @error('header_pdf') is-invalid @enderror" 
                                                               id="header_pdf" 
                                                               name="header_pdf"
                                                               accept=".pdf">
                                                        <small class="form-text text-muted d-block mt-2">الحد الأقصى: 5MB</small>
                                                    </div>
                                                    @error('header_pdf')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror

                                                    @if(isset($pdfTemplate) && $pdfTemplate->header_pdf_path)
                                                        <div class="mt-3">
                                                            <small class="text-muted d-block mb-2">ملف موجود</small>
                                                            <label>
                                                                <input type="checkbox" name="remove_header_pdf" value="1"> حذف ملف PDF
                                                            </label>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Attributes Tab --}}
                            <div class="tab-pane fade" id="attributes-content" role="tabpanel" aria-labelledby="attributes-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title mb-4">اختر الحقول المراد عرضها</h5>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h6 class="mb-3">بيانات المترشح</h6>
                                                <div class="attributes-section">
                                                    @foreach($availableCandidateAttributes as $key => $label)
                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" 
                                                                   type="checkbox" 
                                                                   id="attr_{{ $key }}" 
                                                                   name="selected_attributes[]" 
                                                                   value="{{ $key }}"
                                                                   {{ (old('selected_attributes', $selectedAttributes ?? []) && in_array($key, old('selected_attributes', $selectedAttributes ?? []))) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="attr_{{ $key }}">
                                                                {{ $label }}
                                                            </label>
                                                            <input type="text" 
                                                                   name="attribute_labels[{{ $key }}]" 
                                                                   class="form-control form-control-sm mt-1" 
                                                                   placeholder="{{ $label }}"
                                                                   value="{{ old('attribute_labels.' . $key, isset($pdfTemplate) ? ($pdfTemplate->attributes_labels[$key] ?? '') : '') }}">
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <h6 class="mb-3">بيانات المناظرة</h6>
                                                <div class="attributes-section">
                                                    @foreach($availableConcoursAttributes as $key => $label)
                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" 
                                                                   type="checkbox" 
                                                                   id="attr_{{ $key }}" 
                                                                   name="selected_attributes[]" 
                                                                   value="{{ $key }}"
                                                                   {{ (old('selected_attributes', $selectedAttributes ?? []) && in_array($key, old('selected_attributes', $selectedAttributes ?? []))) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="attr_{{ $key }}">
                                                                {{ $label }}
                                                            </label>
                                                            <input type="text" 
                                                                   name="attribute_labels[{{ $key }}]" 
                                                                   class="form-control form-control-sm mt-1" 
                                                                   placeholder="{{ $label }}"
                                                                   value="{{ old('attribute_labels.' . $key, isset($pdfTemplate) ? ($pdfTemplate->attributes_labels[$key] ?? '') : '') }}">
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>

                                        <div class="alert alert-info mt-4">
                                            <i class="fa-solid fa-lightbulb me-2"></i>
                                            <strong>تلميح:</strong> الحقول المختارة هنا ستظهر في قسم رأس المحتوى بشكل تلقائي في PDF. يمكنك أيضاً استخدام متغيرات مثل <code>@{{ candidate_nom }}</code> و <code>@{{ concours_titre_ar }}</code> في محتوى الصفحة.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Body Tab --}}
                            <div class="tab-pane fade" id="body-content" role="tabpanel" aria-labelledby="body-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title mb-4">محتوى الصفحة (Body)</h5>
                                        
                                        <div class="form-group mb-3">
                                            <label for="template_body" class="form-label">المحتوى</label>
                                            <textarea class="form-control @error('template_body') is-invalid @enderror" 
                                                      id="template_body" 
                                                      name="template_body"
                                                      rows="10">{{ old('template_body', $pdfTemplate->template_body ?? '') }}</textarea>
                                            @error('template_body')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="alert alert-info">
                                            <h6 class="mb-2">المتغيرات المتاحة:</h6>
                                            <ul class="mb-0">
                                                <li><strong>للمترشح:</strong> @{{ candidate_id }}, @{{ candidate_nom }}, @{{ candidate_prenom }}, @{{ candidate_cin }}, @{{ candidate_date_naissance }}, @{{ candidate_tel }}, @{{ candidate_email }}, @{{ candidate_adresse }}, @{{ candidate_gouvernorat }}, @{{ candidate_code_postale }}, @{{ candidate_etat }}</li>
                                                <li><strong>للمناظرة:</strong> @{{ concours_titre_ar }}, @{{ concours_titre_fr }}, @{{ concours_titre_en }}, @{{ concours_date_debut }}, @{{ concours_date_fin }}, @{{ concours_etat }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Footer Tab --}}
                            <div class="tab-pane fade" id="footer-content" role="tabpanel" aria-labelledby="footer-tab">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title mb-4">تذييل الصفحة (Footer)</h5>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                    <label for="footer_image" class="form-label">صورة التذييل</label>
                                                    <div class="input-group">
                                                        <input type="file" 
                                                               class="form-control @error('footer_image') is-invalid @enderror" 
                                                               id="footer_image" 
                                                               name="footer_image"
                                                               accept="image/*">
                                                        <small class="form-text text-muted d-block mt-2">الصيغ المدعومة: JPEG, PNG, JPG, GIF (الحد الأقصى: 5MB)</small>
                                                    </div>
                                                    @error('footer_image')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror

                                                    @if(isset($pdfTemplate) && $pdfTemplate->footer_image_path && Storage::disk('concours')->exists($pdfTemplate->footer_image_path))
                                                        <div class="mt-3">
                                                            <small class="text-muted d-block mb-2">الصورة الحالية:</small>
                                                            <img src="{{ route('concours.pdf-templates.shared-file', [$concours, $pdfTemplate]) . '?path=' . urlencode($pdfTemplate->footer_image_path) }}" 
                                                                 style="max-width: 100%; height: auto; max-height: 150px;">
                                                            <label class="mt-2">
                                                                <input type="checkbox" name="remove_footer_image" value="1"> حذف الصورة الحالية
                                                            </label>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                    <label for="footer_pdf" class="form-label">ملف PDF للتذييل</label>
                                                    <div class="input-group">
                                                        <input type="file" 
                                                               class="form-control @error('footer_pdf') is-invalid @enderror" 
                                                               id="footer_pdf" 
                                                               name="footer_pdf"
                                                               accept=".pdf">
                                                        <small class="form-text text-muted d-block mt-2">الحد الأقصى: 5MB</small>
                                                    </div> 
                                                    @error('footer_pdf')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror

                                                    @if(isset($pdfTemplate) && $pdfTemplate->footer_pdf_path)
                                                        <div class="mt-3">
                                                            <small class="text-muted d-block mb-2">ملف موجود</small>
                                                            <label>
                                                                <input type="checkbox" name="remove_footer_pdf" value="1"> حذف ملف PDF
                                                            </label>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Form Actions --}}
                        <div class="d-flex gap-2 mt-4 justify-content-end">
                            <a href="{{ route('concours.pdf-templates.index', $concours) }}" class="btn btn-secondary">
                                <i class="la la-times me-1"></i> إلغاء
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="la la-save me-1"></i> {{ isset($pdfTemplate) ? 'حفظ التغييرات' : 'إنشاء القالب' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js"></script>

<script>
    (function() {
        function initTinyMce() {
            if (typeof tinymce === 'undefined') return;
            if (tinymce.get('template_body')) return; // already initialized

            tinymce.init({
                selector: '#template_body',
                height: 300,
                menubar: false,
                plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount directionality',
                toolbar: 'undo redo | styleselect | fontselect | fontsizeselect | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ltr rtl | link image media table | code fullscreen',
                content_style: "body { direction: rtl; text-align: right; font-family: 'Noto Naskh Arabic', 'Amiri', 'DejaVu Sans', Arial, sans-serif; }",
                font_formats: 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Times New Roman=times new roman,times;Amiri=Amiri;Noto Naskh Arabic=Noto Naskh Arabic;DejaVu Sans=DejaVu Sans',
                fontsize_formats: '8px 9px 10px 11px 12px 14px 16px 18px 20px 24px 28px 36px 48px 72px',
                setup: function(editor) {
                    editor.on('init', function() {
                        try { editor.execCommand('mceDirectionality', false, 'rtl'); } catch(e) {}
                    });
                }
            });
        }

        // init if body tab active
        if (document.querySelector('#body-content.show, #body-content.active')) {
            initTinyMce();
        }

        document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(function(btn){
            btn.addEventListener('shown.bs.tab', function(e){
                if (e.target && e.target.id === 'body-tab') {
                    initTinyMce();
                }
            });
        });

        var form = document.getElementById('templateForm');
        if (form) {
            form.addEventListener('submit', function() {
                if (typeof tinymce !== 'undefined' && tinymce.get('template_body')) {
                    tinymce.get('template_body').save();
                }
            });
        }
    })();
</script>

@else
    <script>window.location.href = "{{ route('login') }}";</script>
@endif

@endsection