@extends('backoffice.dashboard')

@section('content')

@if(Auth::check())

<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 mb-0">إدارة أقسام الصفحة الرئيسية</h2>
       
          <a class="btn btn-success font-weight-medium" href="{{ route('homepage-sections.create') }}">
            <i class="la la-plus mr-1"></i> إضافة قسم جديد
          </a>
        </div>

        <!-- Recherche et Filtres -->
        <div class="block-card-header px-4 pt-0">
          <form method="GET" action="{{ route('homepage-sections.index') }}" class="mb-3">
            <div class="row g-2 align-items-center">
              <div class="col-md-4 col-lg-3">
                <input type="text" class="form-control" name="search" 
                       placeholder="بحث بالعنوان" value="{{ request('search') }}">
              </div>
              
              
              
              <div class="col-md-5 col-lg-7 d-flex justify-content-end">
                <button type="submit" class="btn bg-rgb-primary1 font-weight-medium me-2">
                  <i class="la la-search mr-1"></i> بحث
                </button>
                <a href="{{ route('homepage-sections.index') }}"
                   class="btn bg-rgb-primary1 font-weight-medium d-flex align-items-center justify-content-center"
                   style="width: 45px; height: 38px;">
                  <i class="fa-solid fa-rotate-right" style="font-size: 16px;"></i>
                </a>
              </div>
            </div>
          </form>
        </div>

        <!-- Body -->
        <div class="block-card-body pt-0">
          @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
              {{ session('success') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @endif

          @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
              {{ session('error') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @endif

          <!-- Onglets -->
          <ul class="nav nav-tabs mb-4" id="sectionsTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link {{ request('type', 'all') == 'all' ? 'active' : '' }}" 
                 href="{{ route('homepage-sections.index', array_merge(request()->query(), ['type' => 'all'])) }}">
                جميع الأقسام
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link {{ request('type') == 'static' ? 'active' : '' }}" 
                 href="{{ route('homepage-sections.index', array_merge(request()->query(), ['type' => 'static'])) }}">
                الأقسام الثابتة
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link {{ request('type') == 'dynamic' ? 'active' : '' }}" 
                 href="{{ route('homepage-sections.index', array_merge(request()->query(), ['type' => 'dynamic'])) }}">
                الأقسام الديناميكية
              </a>
            </li>
          </ul>

          <!-- Tableau des sections statiques -->
          @if(in_array(request('type', 'all'), ['all', 'static']) && $staticSections->count() > 0)
          <div class="mb-5">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 class="mb-0">الأقسام الثابتة</h5>
              <small class="text-muted">(غير قابلة للحذف)</small>
            </div>
            
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th width="5%" class="text-center">#</th>
                    <th width="10%" class="text-center">الترتيب</th>
                    <th width="15%" class="text-center">المفتاح</th>
                    <th class="text-center">العنوان</th>
                    <th width="12%" class="text-center">الحالة</th>
                    <th width="15%" class="text-center">إجراءات</th>
                  </tr>
                </thead>
                <tbody id="static-sections-body">
                  @foreach($staticSections as $index => $section)
                  <tr data-id="{{ $section->id }}" class="sortable-row">
                    <td class="text-center">{{ $index + 1 }}</td>
                    <td class="text-center">
                      <div class="d-flex align-items-center justify-content-center">
                        <i class="fa fa-arrows-alt handle me-2" style="cursor: move; color: #6c757d;"></i>
                        <span class="badge bg-secondary">{{ $section->position }}</span>
                      </div>
                    </td>
                    <td class="text-center">
                      <span class="badge bg-info text-white">{{ $section->section_key }}</span>
                    </td>
                    <td class="text-center">{{ $section->title }}</td>
                    <td class="text-center">
                      <div class="d-flex justify-content-center">
                        <div class="form-check form-switch">
                          <input class="form-check-input toggle-visibility" 
                                 type="checkbox" 
                                 data-id="{{ $section->id }}"
                                 {{ $section->is_visible ? 'checked' : '' }}>
                          <label class="form-check-label ms-2">
                            {{ $section->is_visible ? 'ظاهر' : 'مخفي' }}
                          </label>
                        </div>
                      </div>
                    </td>
                    <td class="text-center">
                      <div class="d-flex justify-content-center gap-2">
                        <!-- Visualiser sur le site -->
                        <a href="{{ url('/') }}#{{ $section->section_key }}" 
                           target="_blank" 
                           class="btn btn-sm btn-outline-info" 
                           title="عرض على الموقع">
                          <i class="la la-eye"></i>
                        </a>
                        
                        <!-- Modifier l'ordre (via drag & drop) -->
                        <button type="button" class="btn btn-sm btn-outline-secondary handle" 
                                title="سحب لتغيير الترتيب">
                          <i class="la la-arrows-alt"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
          @endif

          <!-- Tableau des sections dynamiques -->
          @if(in_array(request('type', 'all'), ['all', 'dynamic']) && $dynamicSections->count() > 0)
          <div>
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 class="mb-0">الأقسام الديناميكية</h5>
              <small class="text-muted">(قابلة للتعديل والحذف)</small>
            </div>
            
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th width="5%" class="text-center">#</th>
                    <th width="10%" class="text-center">الترتيب</th>
                    <th class="text-center">العنوان</th>
                    <th width="15%" class="text-center">المستخدم</th>
                    <th width="10%" class="text-center">العناصر</th>
                    <th width="12%" class="text-center">الحالة</th>
                    <th width="20%" class="text-center">إجراءات</th>
                  </tr>
                </thead>
                <tbody id="dynamic-sections-body">
                  @forelse($dynamicSections as $i => $section)
                  <tr data-id="{{ $section->id }}" class="sortable-row">
                    <td class="text-center">{{ $dynamicSections->firstItem() + $i }}</td>
                    <td class="text-center">
                      <div class="d-flex align-items-center justify-content-center">
                        <i class="fa fa-arrows-alt handle me-2" style="cursor: move; color: #6c757d;"></i>
                        <span class="badge bg-secondary">{{ $section->position }}</span>
                      </div>
                    </td>
                    <td class="text-center">{{ $section->titre_ar }}</td>
                    <td class="text-center">{{ $section->user->nom_prenom ?? '-' }}</td>
                    <td class="text-center">
                      <span class="badge bg-primary">{{ $section->contents_count ?? $section->contents->count() }}</span>
                    </td>
                    <td class="text-center">
                      <span class="badge {{ $section->is_active ? 'bg-success' : 'bg-danger' }}">
                        {{ $section->is_active ? 'نشط' : 'غير نشط' }}
                      </span>
                    </td>
                    <td class="text-center">
                      <div class="d-flex justify-content-center gap-2">
                        <!-- Visualiser -->
                        <a href="{{ url('/') }}#section-{{ $section->id }}" 
                           target="_blank" 
                           class="btn btn-sm btn-outline-info" 
                           title="عرض">
                          <i class="la la-eye"></i>
                        </a>

                        <!-- Modifier -->
                        <a href="{{ route('homepage-sections.edit', $section->id) }}" 
                           class="btn btn-sm btn-outline-warning" 
                           title="تعديل">
                          <i class="la la-edit"></i>
                        </a>

                        <!-- Supprimer -->
                        <form action="{{ route('homepage-sections.destroy', $section->id) }}" 
                              method="POST" 
                              class="d-inline">
                          @csrf
                          @method('DELETE')
                          <button type="button"
                                  onclick="confirmAction('هل تريد حذف هذا القسم؟', null, this.closest('form'))"
                                  class="btn btn-sm btn-outline-danger" 
                                  title="حذف">
                              <i class="la la-trash"></i>
                          </button>
                        </form>

                        <!-- Modifier l'ordre -->
                        <button type="button" class="btn btn-sm btn-outline-secondary handle" 
                                title="سحب لتغيير الترتيب">
                          <i class="la la-arrows-alt"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td colspan="7" class="text-center py-4">لا توجد أقسام ديناميكية.</td>
                  </tr>
                  @endforelse
                </tbody>
              </table>
            </div>

            <!-- Pagination pour sections dynamiques -->
            @if($dynamicSections->hasPages())
            <div class="mt-4">
              {{ $dynamicSections->links('pagination::bootstrap-5') }}
            </div>
            @endif
          </div>
          @endif

          <!-- Message si aucun résultat -->
          @if((request('type', 'all') == 'all' && $staticSections->isEmpty() && $dynamicSections->isEmpty()) ||
              (request('type') == 'static' && $staticSections->isEmpty()) ||
              (request('type') == 'dynamic' && $dynamicSections->isEmpty()))
          <div class="alert alert-warning text-center py-4">
            <i class="la la-info-circle me-2"></i>
            لا توجد أقسام مطابقة للبحث.
          </div>
          @endif

        </div>

      </div>
    </div>
  </div>
</div>

<!-- Bouton pour sauvegarder l'ordre -->
@if($staticSections->count() > 0 || $dynamicSections->count() > 0)
<div class="position-fixed bottom-0 end-0 m-4" style="z-index: 1050;">
  <button id="save-order-btn" class="btn btn-success btn-lg shadow-lg">
    <i class="la la-save me-2"></i> حفظ الترتيب
  </button>
</div>
@endif

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialiser Sortable pour les sections statiques
    const staticBody = document.getElementById('static-sections-body');
    if (staticBody) {
        Sortable.create(staticBody, {
            group: 'sections',
            animation: 150,
            ghostClass: 'sortable-ghost',
            handle: '.handle',
            onEnd: function() {
                updateOrderBtn();
            }
        });
    }
    
    // Initialiser Sortable pour les sections dynamiques
    const dynamicBody = document.getElementById('dynamic-sections-body');
    if (dynamicBody) {
        Sortable.create(dynamicBody, {
            group: 'sections',
            animation: 150,
            ghostClass: 'sortable-ghost',
            handle: '.handle',
            onEnd: function() {
                updateOrderBtn();
            }
        });
    }
    
    // Activer/désactiver le bouton sauvegarder
    function updateOrderBtn() {
        const btn = document.getElementById('save-order-btn');
        if (btn) {
            btn.disabled = false;
            btn.innerHTML = '<i class="la la-save me-2"></i> حفظ الترتيب (تم التغيير)';
        }
    }
    
    // Sauvegarder l'ordre
    const saveOrderBtn = document.getElementById('save-order-btn');
    if (saveOrderBtn) {
        saveOrderBtn.addEventListener('click', function() {
            const btn = this;
            btn.disabled = true;
            btn.innerHTML = '<i class="la la-spinner la-spin me-2"></i> جاري الحفظ...';
            
            // Récupérer les IDs des sections statiques
            const staticIds = [];
            const staticRows = document.querySelectorAll('#static-sections-body tr[data-id]');
            staticRows.forEach(row => {
                staticIds.push(row.getAttribute('data-id'));
            });
            
            // Récupérer les IDs des sections dynamiques
            const dynamicIds = [];
            const dynamicRows = document.querySelectorAll('#dynamic-sections-body tr[data-id]');
            dynamicRows.forEach(row => {
                dynamicIds.push(row.getAttribute('data-id'));
            });
            
            // Envoyer la requête
            fetch("{{ route('homepage-sections.update-order') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    static_sections: staticIds,
                    dynamic_sections: dynamicIds
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        title: 'تم!',
                        text: data.message,
                        icon: 'success',
                        confirmButtonText: 'حسناً'
                    });
                    btn.innerHTML = '<i class="la la-save me-2"></i> تم حفظ الترتيب';
                    
                    // Recharger la page après 1 seconde
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    Swal.fire({
                        title: 'خطأ!',
                        text: data.message,
                        icon: 'error',
                        confirmButtonText: 'حسناً'
                    });
                    btn.disabled = false;
                    btn.innerHTML = '<i class="la la-save me-2"></i> حفظ الترتيب';
                }
            })
            .catch(error => {
                Swal.fire({
                    title: 'خطأ!',
                    text: 'حدث خطأ في الاتصال',
                    icon: 'error',
                    confirmButtonText: 'حسناً'
                });
                btn.disabled = false;
                btn.innerHTML = '<i class="la la-save me-2"></i> حفظ الترتيب';
            });
        });
    }
    
    // Toggle visibility pour les sections statiques
    document.querySelectorAll('.toggle-visibility').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const sectionId = this.dataset.id;
            const isChecked = this.checked;
            
            fetch(`/backoffice/homepage-sections/toggle-visibility/${sectionId}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Mettre à jour le label
                    const label = this.nextElementSibling;
                    label.textContent = data.is_visible ? 'ظاهر' : 'مخفي';
                    
                    // Afficher notification
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: data.message,
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            })
            .catch(error => {
                Swal.fire('خطأ', 'حدث خطأ أثناء التحديث', 'error');
                this.checked = !isChecked; // Revert
            });
        });
    });
});

function confirmAction(message, url = null, form = null) {
    Swal.fire({
        title: 'تأكيد',
        text: message,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#d33',
        confirmButtonText: 'نعم',
        cancelButtonText: 'إلغاء',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            if (url) {
                window.location.href = url;
            } else if (form) {
                form.submit();
            }
        }
    });
}
</script>

<style>
/* Styles généraux */
.block-card {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.block-card-header {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.widget-title {
    color: #2c3e50;
    font-weight: 600;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.bg-rgb-primary1 {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.bg-rgb-primary1:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Table styles */
.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 8px;
}

.table td {
    padding: 12px 8px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.02);
}

/* Badges */
.badge {
    font-size: 0.85em;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

.badge.bg-info {
    background-color: #17a2b8 !important;
}

.badge.bg-primary {
    background-color: #0d6efd !important;
}

.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

/* Form switch */
.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* Drag & drop */
.sortable-ghost {
    opacity: 0.4;
    background-color: #f8f9fa;
}

.handle {
    cursor: move;
    user-select: none;
}

/* Nav tabs */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

.nav-tabs .nav-link {
    color: #495057;
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    color: #0d6efd;
}

.nav-tabs .nav-link.active {
    color: #0d6efd;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    border-bottom-color: transparent !important;
    font-weight: 600;
}

/* Save order button */
#save-order-btn {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    transition: all 0.3s ease;
}

#save-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

#save-order-btn:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    transform: none;
    box-shadow: none;
}

/* Alert messages */
.alert {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .block-card-header {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .block-card-header .btn {
        margin-top: 10px;
        width: 100%;
    }
    
    .table-responsive {
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }
    
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    #save-order-btn {
        padding: 10px 20px;
        font-size: 14px;
        bottom: 20px;
        right: 20px;
    }
}

/* RTL support */
[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .me-4 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}
</style>

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

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

@endsection