@extends('backoffice.dashboard')
@section('content')

<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire.css') }}">

<style>
    /* Unified form styling */
    .form-section-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        margin-bottom: 2rem;
        overflow: hidden;
        border: 1px solid #e9ecef;
    }

    .form-section-header {
        background: #f8f9fa;
        padding: 1rem 1.5rem;
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        border-bottom: 2px solid #e0e7ff;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-section-header i {
        color: #4f46e5;
        font-size: 1.3rem;
    }

    .form-section-body {
        padding: 1.5rem;
    }

    /* Status badges refinement */
    .status-badge {
        padding: 0.35rem 0.9rem;
        border-radius: 30px;
        font-weight: 500;
        font-size: 0.9rem;
    }


    /* Timeline compact style */
    .compact-timeline {
        max-height: 300px;
        overflow-y: auto;
        padding-right: 0.5rem;
    }

    .compact-item {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .compact-item:last-child {
        border-bottom: none;
    }

    .compact-date {
        font-size: 0.8rem;
        color: #64748b;
    }

    .compact-user {
        font-size: 0.7rem;
        color: #94a3b8;
    }

    .compact-arrow {
        color: #94a3b8;
        margin: 0 0.25rem;
    }

    .compact-to {
        font-weight: 600;
    }


    /* Read-only field styling */
    .readonly-field {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        color: #495057;
    }

    .compact-timeline { display:flex; flex-direction:column; gap:6px; }
    .compact-item { padding:6px 4px; border-bottom:1px solid rgba(0,0,0,0.06); }
    .left-block { width:160px; min-width:120px; margin-left:12px; }
    .compact-date { font-size:12px; color:#6c757d; }
    .compact-user { font-size:11px; color:#8a8f94; margin-top:2px; }
    .right-block { display:flex; align-items:center; gap:6px; justify-content:flex-start; }
    .compact-from { color:#6c757d; font-size:13px; }
    .compact-arrow { color:#6c757d; font-size:14px; margin:0 4px; }
    .compact-to { font-size:13px; padding:3px 8px; border-radius:10px; }
    .badge-success { background:#198754; color:#fff; }
    .badge-danger  { background:#dc3545; color:#fff; }
    .badge-muted   { background:#6c757d; color:#fff; }
    .compact-comment summary { list-style:none; cursor:pointer; outline:none; padding:0; }
</style>

<div class="container-fluid py-3">
    <!-- Header with title and PDF button -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div></div> <!-- placeholder for symmetry -->
        <div class="text-center">
            <h3 class="title-form">استمارة الإعلام ببداية النشاط</h3>
        </div>
        <a href="{{ route('admin.debut_activite.pdf', $debutActivite->id_debut) }}" target="_blank" class="btn btn-danger">
            <i class="fa fa-file-pdf"></i> تحميل PDF
        </a>
    </div>

    <!-- Main card -->
    <div class="form-section-card">
        <div class="form-section-header">
            <i class="bx bx-file"></i> تفاصيل المطلب
        </div>
        <div class="form-section-body">

            <!-- Status card inside -->
            <div class="card shadow-lg border-0 mb-4 rounded-4">
                <div class="card-header bg-custom-gray text-dark d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">الوضعية الحالية:</h5>
                    @if($debutActivite->id_statut == 1)
                        <span class="status-badge status-badge--success">مقبول</span>
                    @elseif($debutActivite->id_statut == 3)
                        <span class="status-badge status-badge--danger">مرفوض</span>
                    @else
                        <span class="status-badge status-badge--pending">في الانتظار</span>
                    @endif
                </div>

                @if($debutActivite->id_statut == 3 && $debutActivite->commentaire_motif)
                    <div class="card-body">
                        <p class="text-danger fw-bold">سبب الرفض:</p>
                        <p>{{ $debutActivite->commentaire_motif }}</p>
                    </div>
                @endif
            </div>

            {{-- history card (compact) --}}
            <div class="card shadow-lg border-0 mb-4 rounded-4">
                <div class="card-header bg-light py-2">
                    <h5 class="mb-0 fw-bold">تاريخ تغيّر الوضعية</h5>
                </div>

                <div class="card-body p-2" dir="rtl">
                    @if($debutActivite->statutHistories->isEmpty())
                        <p class="text-muted mb-0">لا توجد تغييرات سابقة.</p>
                    @else
                        <div class="compact-timeline">
                            @foreach($debutActivite->statutHistories as $hist)
                                @php
                                    $from = optional($hist->fromStatut)->statut_ar ?? optional($hist->fromStatut)->libelle_ar ?? '—';
                                    $to = optional($hist->toStatut)->statut_ar ?? optional($hist->toStatut)->libelle_ar ?? '—';
                                    $toId = optional($hist->toStatut)->id_statut;
                                    $badgeClass = $toId === 1 ? 'badge-success' : ($toId === 3 ? 'badge-danger' : 'badge-muted');
                                    $changer = optional($hist->changer)->nom_prenom ?? optional($hist->changer)->email ?? 'نظام';
                                @endphp

                                <div class="compact-item">
                                    <div class="compact-row d-flex align-items-center justify-content-between w-100">
                                        <div class="left-block text-end">
                                            <div class="small text-muted compact-date">{{ $hist->created_at->format('d/m/Y H:i') }}</div>
                                            <div class="very-small text-muted compact-user">بواسطة: {{ $changer }}</div>
                                        </div>

                                        <div class="right-block text-right flex-fill">
                                            <span class="compact-from small text-muted">{{ $from }}</span>
                                            <span class="compact-arrow" aria-hidden="true"> &larr; </span>
                                            <span class="compact-to small {{ $badgeClass }}">{{ $to }}</span>
                                        </div>
                                    </div>

                                    @if($hist->commentaire)
                                        <details class="compact-comment mt-1">
                                            <summary class="very-small text-danger">سبب / تعليق</summary>
                                            <div class="very-small text-muted mt-1">{{ $hist->commentaire }}</div>
                                        </details>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            <!-- هوية الباعث -->
            <div class="form-section-card mt-4">
                <div class="form-section-header">
                    <i class="bx bx-user"></i> هوية الباعث
                </div>
                <div class="form-section-body">

                    {{-- Type de relation (hidden) --}}
                    <input type="hidden" value="{{ $debutActivite->getTypeFormule() }}" readonly>

                    <div class="form-group row mb-3">
                        <label class="col-sm-2 col-form-label fw-bold">الاسم و اللقب أو الاسم التجاري</label>
                        <div class="col-sm-10">
                            <div class="readonly-field">{{ $utilisateur ? $utilisateur->nom_prenom : '-' }}</div>
                        </div>
                    </div>

                    <div class="form-group row mb-3">
                        <label class="col-sm-2 col-form-label fw-bold">رقم الهوية</label>
                        <div class="col-sm-10">
                            <div class="readonly-field">{{ $utilisateur ? ($utilisateur->cin ?? $utilisateur->passport ?? $utilisateur->num_fiscal ?? '-') : '-' }}</div>
                        </div>
                    </div>

                    <div class="form-group row mb-3">
                        <label class="col-sm-2 col-form-label fw-bold">الهاتف</label>
                        <div class="col-sm-4">
                            <div class="readonly-field">{{ $utilisateur ? $utilisateur->tel : '-' }}</div>
                        </div>
                        <label class="col-sm-2 col-form-label fw-bold">البريد الإلكتروني</label>
                        <div class="col-sm-4">
                            <div class="readonly-field">{{ $utilisateur ? $utilisateur->email : '-' }}</div>
                        </div>
                    </div>

                    @if($utilisateur && $utilisateur->adresse)
                    <div class="form-group row mb-3">
                        <label class="col-sm-2 col-form-label fw-bold">العنوان</label>
                        <div class="col-sm-10">
                            <div class="readonly-field">{{ $utilisateur->adresse }}</div>
                        </div>
                    </div>
                    @endif

                    @if($gouvernorat)
                    <div class="form-group row mb-3">
                        <label class="col-sm-2 col-form-label fw-bold">المندوبية الجهوية للشباب و الرياضة</label>
                        <div class="col-sm-10">
                            <div class="readonly-field">{{ $gouvernorat->nom_ar }}</div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- تاريخ بداية النشاط -->
            <div class="form-section-card mt-4">
                <div class="form-section-header">
                    <i class="bx bx-calendar"></i> تاريخ بداية النشاط
                </div>
                <div class="form-section-body">
                    <div class="form-group row mb-3">
                        <label class="col-sm-2 col-form-label fw-bold">التاريخ</label>
                        <div class="col-sm-4">
                            <div class="readonly-field">{{ $debutActivite->date_debut_activite ? $debutActivite->date_debut_activite->format('Y-m-d') : '-' }}</div>
                        </div>
                    </div>
                    <p class="text-muted">تاريخ بداية النشاط يجب ان يكون بعد 15 يوما من تاريخ استلام وصل التسجيل.</p>
                </div>
            </div>

            <!-- الوثائق المرفقة -->
            <div class="form-section-card mt-4">
                <div class="form-section-header">
                    <i class="bx bx-file"></i> الوثائق المرفقة
                </div>
                <div class="form-section-body">
                    @php
                        $docs = [
                            'preuve_propriete_location' => [
                                'label' => 'نسخة من شهادة الملكية أو عقد الكراء',
                                'desc'  => 'وثيقة تثبت ملكية أو كراء الفضاء'
                            ],
                            'plan_architectural' => [
                                'label' => 'مخطط معماري',
                                'desc'  => 'المخطط الهندسي المعتمد'
                            ],
                            'declaration_investissement' => [
                                'label' => 'شهادة تصريح بالاستثمار',
                                'desc'  => 'تصريح رسمي بالاستثمار'
                            ],
                            'identification' => [
                                'label' => 'بطاقة تعريف / جواز سفر',
                                'desc'  => 'وثيقة تعريف صاحب المشروع'
                            ],
                            'extrait_registre_national_entreprise' => [
                                'label' => 'السجل الوطني للمؤسسات',
                                'desc'  => 'وثيقة تسجيل المؤسسة'
                            ],
                            'certificat_prevention' => [
                                'label' => 'شهادة الوقاية',
                                'desc'  => 'وثيقة السلامة والوقاية'
                            ],
                            'contrat_assurance' => [
                                'label' => 'عقد التأمين',
                                'desc'  => 'عقد تأمين ساري المفعول'
                            ],
                            'approbation_autorite_minicipale' => [
                                'label' => 'اعتماد السلطة المحلية',
                                'desc'  => 'ترخيص من السلطة المحلية'
                            ],
                        ];
                    @endphp

                    @foreach($docs as $field => $meta)
                        <div class="border rounded-3 p-3 mb-3 bg-light shadow-sm">
                            <div class="fw-bold mb-1">
                                {{ $meta['label'] }}
                            </div>
                            @if(!empty($debutActivite->$field))
                                <a href="{{ route('debutActivite.download', ['id' => $debutActivite->id_debut, 'field' => $field]) }}"
                                   target="_blank"
                                   class="btn btn-sm btn-outline-primary mt-1">
                                    <i class="fa fa-eye"></i> عرض الملف
                                </a>
                            @else
                                <span class="text-muted">غير متوفر</span>
                            @endif
                            @if(!empty($meta['desc']))
                                <div class="small text-muted mt-2">
                                    {{ $meta['desc'] }}
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Buttons -->
            <div class="form-group text-center mt-5 no-print">
                <div class="d-flex flex-wrap justify-content-center align-items-center gap-2" style="max-width: 600px; margin: 0 auto;">
                    <a href="{{ route('admin.debut_activite.pdf', $debutActivite->id_debut) }}" target="_blank" class="btn btn-danger d-flex align-items-center justify-content-center gap-1 flex-fill">
                        <i class="fa fa-file-pdf"></i> تحميل PDF
                    </a>
                    <a href="{{ route('admin.debut_activite.index') }}" class="btn btn-primary d-flex align-items-center justify-content-center gap-1 flex-fill">
                        <i class="bx bx-arrow-back" style="margin-left:5px;"></i> رجوع
                    </a>
                </div>
            </div>

        </div> <!-- end form-section-body -->
    </div> <!-- end main form-section-card -->
</div>

<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.4.0/css/all.min.css" integrity="sha512-pO6Faa4sdB7Z3K/ZzF8O1NjcZk7CjJmUjeF3fXxOZbq1dsm7GJxSFeWmyt3E5kzZ+vHVH3K2Yv/Vs1QY7PZ3UQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@endsection