@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
<div class="container py-5" dir="rtl" lang="ar">

    <style>

        .card-custom {
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(20, 20, 50, 0.08);
            border: 0;
        }
        .card-header.custom-header {
            background: linear-gradient(90deg,#f8f0f0,#fff);
            padding: 28px 20px;
        }
        .card-header .title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111;
        }
        .card-header .subtitle {
            color: #6c757d;
            margin-top: 6px;
            font-size: .95rem;
        }

   
        .form-label {
            display:block;
            text-align: right;
            font-weight: 600;
            margin-bottom: .35rem;
            color: #222;
        }
        .form-control {
            border-radius: 10px;
            height: 44px;
            padding: .5rem .75rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
        }
        textarea.form-control { min-height: 120px; height:auto; }

        .optional-field { margin-bottom: .6rem; }

    
        .confirm-actions {
            margin-top: 1.25rem;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .btn-red {
            background-color: #d9534f;
            border-color: #d43f3a;
            color: #fff;
            border-radius: 10px;
            padding: .6rem 1.6rem;
            font-weight: 700;
            box-shadow: 0 6px 18px rgba(217,83,79,0.18);
        }
        .btn-red:active, .btn-red:focus { box-shadow: none; outline: none; }

   
        .existing-file { display:flex; justify-content:space-between; gap:.5rem; padding:.35rem .5rem; border-radius:8px; background:#f8f9fa; margin-bottom:.35rem; }

        /* modal RTL fix */
        .modal-dialog { direction: rtl; }
        .modal-body { text-align: right; }

   
   
        .modal-dialog.modal-sm {
            max-width: 320px; 
        }
        
        .modal-header .btn-close {
            width: 0.7rem;
            height: 0.7rem;
            background-size: 0.7rem;
            font-size: 0.7rem;
            opacity: 0.8;
            margin: 0; 
            padding: 0.25rem; 
        }
        
        .modal-body {
            font-size: 0.95rem;
            padding: 1rem;
        }
        .modal-footer {
            padding: 0.75rem;
        }
        /* ------------------------------------------------ */

        @media (max-width: 575px) {
            .card-header .title { font-size: 1.2rem; }
        }
    </style>

    <div class="row justify-content-center">
        <div class="col-xl-9 col-lg-10">
            <div class="card card-custom">
                <div class="card-header custom-header text-center">
                    <div class="title">{{ $concours->titre_ar ?? $concours->titre }}</div>
                    <div class="subtitle">يرجى ملء الحقول التالية ثم الضغط على "حفظ التعديلات"</div>
                </div>

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

                    <form id="concours-edit-form"
                          action="{{ route('concours.update_by_cin', $concours) }}"
                          method="POST"
                          enctype="multipart/form-data" class="needs-confirmation">
                        @csrf
                        @method('PUT')

                        <input type="hidden" name="candidate_id" value="{{ $candidate->id }}">

                        {{-- الحقول الأساسية --}}
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="nom" class="form-label">الاسم <span class="text-danger">*</span></label>
                                <input id="nom" name="nom" class="form-control @error('nom') is-invalid @enderror"
                                       value="{{ old('nom', $candidate->nom) }}" required maxlength="100">
                                @error('nom') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="prenom" class="form-label">اللقب <span class="text-danger">*</span></label>
                                <input id="prenom" name="prenom" class="form-control @error('prenom') is-invalid @enderror"
                                       value="{{ old('prenom', $candidate->prenom) }}" required maxlength="100">
                                @error('prenom') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="cin" class="form-label">رقم بطاقة التعريف <span class="text-danger">*</span></label>
                                <input id="cin" name="cin" type="text" class="form-control @error('cin') is-invalid @enderror"
                                       value="{{ old('cin', $candidate->cin) }}" pattern="[0-9]{8}" maxlength="8" required>
                                @error('cin') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="date_naissance" class="form-label">تاريخ الازدياد</label>
                                <input id="date_naissance" name="date_naissance" type="date" class="form-control @error('date_naissance') is-invalid @enderror"
                                       value="{{ old('date_naissance', optional($candidate->date_naissance)->format('Y-m-d')) }}">
                                @error('date_naissance') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="tel" class="form-label">الهاتف</label>
                                <input id="tel" name="tel" class="form-control @error('tel') is-invalid @enderror"
                                       value="{{ old('tel', $candidate->tel) }}" pattern="[0-9]{8}" maxlength="8">
                                @error('tel') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="email" class="form-label">البريد الإلكتروني</label>
                                <input id="email" name="email" type="email" class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email', $candidate->email) }}">
                                @error('email') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="adresse" class="form-label">العنوان</label>
                                <input id="adresse" name="adresse" type="text" class="form-control @error('adresse') is-invalid @enderror"
                                       value="{{ old('adresse', $candidate->adresse) }}">
                                @error('adresse') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">الولاية</label>
                                <select class="form-control" id="gouvernorat_id" name="gouvernorat_id">
                                    <option value="">اختر الولاية</option>
                                    @foreach($gouvernorats as $gouv)
                                        <option value="{{ $gouv->id_gouver }}"
                                            {{ old('gouvernorat_id', null) == $gouv->id_gouver || ($candidate->gouvernorat && $candidate->gouvernorat == $gouv->nom_ar) ? 'selected' : '' }}>
                                            {{ $gouv->nom_ar ?? ($gouv->nom ?? '') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label for="code_postale" class="form-label">الرمز البريدي</label>
                                <input id="code_postale" name="code_postale" class="form-control @error('code_postale') is-invalid @enderror"
                                       value="{{ old('code_postale', $candidate->code_postale) }}" maxlength="4" pattern="\d{4}">
                                @error('code_postale') <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        {{-- الحقول الديناميكية --}}
                        <div id="optional-fields" class="row g-3 mt-3">
                            @foreach($fieldDefinitions as $def)
                                @php
                                    $inputName = 'field_'.$def->id;
                                    $label = $def->label ?? $def->key;
                                    $isRequired = (bool)$def->is_required;
                                    $existing = isset($values[$def->id]) ? $values[$def->id]->value : null;
                                    $existingArr = null;
                                    if ($existing && (strtolower($def->input_type) === 'multiselect' || strtolower($def->input_type) === 'checkbox')) {
                                        $existingArr = json_decode($existing, true) ?: [];
                                    }
                                    $type = strtolower($def->input_type);
                                @endphp

                                <div class="col-md-6 optional-field" data-key="{{ $def->key }}">
                                    <label class="form-label">{{ $label }} @if($isRequired) <span class="text-danger">*</span> @endif</label>

                                    @switch($type)
                                        @case('select')
                                            <div class="col-md-10 postbox__select">
                                                <select id="{{ $inputName }}" name="{{ $inputName }}" class="form-select" {{ $isRequired ? 'required' : '' }}>
                                                    <option value="">اختر...</option>
                                                    @foreach($def->options as $opt)
                                                        @php
                                                            $val = is_array($opt) ? ($opt['value'] ?? ($opt['label'] ?? json_encode($opt))) : $opt;
                                                            $labelOpt = is_array($opt) ? ($opt['label'] ?? $val) : $opt;
                                                        @endphp
                                                        <option value="{{ $val }}" {{ (string)old($inputName, $existing) === (string)$val ? 'selected' : '' }}>
                                                            {{ $labelOpt }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @break

                                        @case('multiselect')
                                            <div class="col-md-10 postbox__select">
                                                <select id="{{ $inputName }}" name="{{ $inputName }}[]" class="form-select" multiple {{ $isRequired ? 'required' : '' }}>
                                                    @foreach($def->options as $opt)
                                                        @php
                                                            $val = is_array($opt) ? ($opt['value'] ?? ($opt['label'] ?? json_encode($opt))) : $opt;
                                                            $labelOpt = is_array($opt) ? ($opt['label'] ?? $val) : $opt;
                                                            $sel = in_array($val, old($inputName, $existingArr ?: [])) ? 'selected' : '';
                                                        @endphp
                                                        <option value="{{ $val }}" {{ $sel }}>{{ $labelOpt }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @break

                                        @case('textarea')
                                            <textarea name="{{ $inputName }}" class="form-control" {{ $isRequired ? 'required' : '' }}>{{ old($inputName, $existing) }}</textarea>
                                        @break

                                        @case('date')
                                            <input type="date" name="{{ $inputName }}" value="{{ old($inputName, $existing) }}" class="form-control" {{ $isRequired ? 'required' : '' }}>
                                        @break

                                        @case('number')
                                            <input type="number" step="any" name="{{ $inputName }}" value="{{ old($inputName, $existing) }}" class="form-control" {{ $isRequired ? 'required' : '' }}>
                                        @break

                                        @case('file')
                                            @if(isset($files[$def->id]))
                                                <div class="mb-2">
                                                    @foreach($files[$def->id] as $f)
                                                        <div class="existing-file">
                                                            <div class="small text-truncate">{{ $f->original_name }}</div>
                                                            <div><a href="{{ route('concours.file_download', ['id' => $f->id]) ?? '#' }}" target="_blank">عرض</a></div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                            <input type="file" name="{{ $inputName }}" class="form-control" {{ $isRequired ? 'required' : '' }}>
                                        @break

                                        @case('checkbox')
                                            @foreach($def->options as $idx => $opt)
                                                @php
                                                    $val = is_array($opt) ? ($opt['value'] ?? ($opt['label'] ?? json_encode($opt))) : $opt;
                                                    $labelOpt = is_array($opt) ? ($opt['label'] ?? $val) : $opt;
                                                    $checked = in_array($val, old($inputName, $existingArr ?: [])) ? 'checked' : '';
                                                @endphp
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="{{ $inputName }}[]" value="{{ $val }}" {{ $checked }}>
                                                    <label class="form-check-label">{{ $labelOpt }}</label>
                                                </div>
                                            @endforeach
                                        @break

                                        @default
                                            <input type="text" name="{{ $inputName }}" class="form-control" value="{{ old($inputName, $existing) }}" {{ $isRequired ? 'required' : '' }}>
                                    @endswitch

                                    @error($inputName) <div class="invalid-feedback text-end">{{ $message }}</div> @enderror
                                </div>
                            @endforeach
                        </div>
						<hr>
@if(!empty(trim($concours->remarques ?? '')))
  <div class="concours-remarks card mb-3" dir="rtl" lang="ar" aria-live="polite">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-start mb-2">
        <h5 class="mb-0" style="font-weight:700;">ملاحظات</h5>
      </div>

      <div id="remarksContent" class="remarks-content">
         <br> 
        {!! nl2br(e($concours->remarques)) !!}
      </div>

      @php
        $plain = strip_tags($concours->remarques);
        $needToggle = mb_strlen($plain) > 420;
      @endphp

      @if($needToggle)
        <div class="text-start mt-2">
          <button id="remarksToggle" class="btn btn-sm btn-outline-primary" aria-expanded="false" aria-controls="remarksContent">
            اقرأ المزيد
          </button>
        </div>
      @endif
    </div>
  </div>
@endif
                        {{-- زر الحفظ المتمركز والأحمر --}}
                        <div class="confirm-actions">
                            <button id="btn-save" type="button" class="btn btn-red">
                                حفظ التعديلات
                            </button>
                        </div>
                    </form>
                </div>

                <div class="card-footer small text-muted text-center">معلوماتك محفوظة وآمنة</div>
            </div>
        </div>
    </div>
</div>

<!-- مودال تأكيد التعديل (محتوى عربي) - تم تصغير الحجم وزر الإغلاق -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">   <!-- تم إضافة modal-sm -->
    <div class="modal-content">
      <div class="modal-header"> 
        <h5 class="modal-title" id="confirmModalLabel">تأكيد التعديل</h5>
      </div>
      <div class="modal-body">
        هل أنت متأكد أنك تريد حفظ التعديلات؟ سيتم تحديث بيانات مطلب الترشّح.
      </div>
      <div class="modal-footer">
        <button type="button" id="confirmCancel" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
        <button type="button" id="confirmSubmit" class="btn btn-danger">نعم، احفظ</button>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const saveBtn = document.getElementById('btn-save');
    const form = document.getElementById('concours-edit-form');

    function openBootstrapModal() {
        try {
            // if bootstrap modal available (Bootstrap 5)
            var modalEl = document.getElementById('confirmModal');
            var bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);
            bsModal.show();

            // confirm handler
            const confirmBtn = document.getElementById('confirmSubmit');
            const cancelBtn = document.getElementById('confirmCancel');

            const confirmHandler = function () {
                // disable to prevent double submit
                confirmBtn.disabled = true;
                confirmBtn.innerText = 'جاري الحفظ...';
                form.submit();
            };

            // ensure we don't attach multiples
            confirmBtn.removeEventListener('click', confirmHandler);
            confirmBtn.addEventListener('click', confirmHandler, { once: true });

            // when modal hidden, re-enable confirm button text if user cancelled
            modalEl.addEventListener('hidden.bs.modal', function () {
                confirmBtn.disabled = false;
                confirmBtn.innerText = 'نعم، احفظ';
            }, { once: true });

            return true;
        } catch (e) {
            return false;
        }
    }

    saveBtn.addEventListener('click', function (ev) {
        // try bootstrap modal first, fallback to native confirm
        const opened = openBootstrapModal();
        if (!opened) {
            // fallback
            if (confirm('هل أنت متأكد أنك تريد حفظ التعديلات؟')) {
                form.submit();
            }
        }
    });
});
</script>
@endsection