@extends('backoffice.dashboard')

@section('content')

@if(Auth::check())
<style>
    .my-table table {
    font-size: 14px;
}

.my-table table th {
    font-size: 13px;
    white-space: nowrap;
}

.my-table table td {
    font-size: 13px;
    padding: 6px 8px;
}

/* ==== BADGE MODERNE ==== */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
    font-weight: 600;
    min-width: 75px;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.status-badge--success {
    background-color: #e8f9ee;
    color: #27ae60;
}
.status-badge--danger {
    background-color: #fde8ea;
    color: #e74c3c;
}
.status-badge--pending {
    background-color: #fff8e1;
    color: #d4a017;
}

/* ==== ACTION BUTTONS ==== */
.actions-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    background-color: #f8f9fa;
    font-size: 16px;
    transition: 0.2s;
}

.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* couleurs */
.btn-icon--primary {
    background-color: #e3f2fd;
    color: #0d6efd;
}
.btn-icon--danger {
    background-color: #f8d7da;
    color: #dc3545;
}

</style>
<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">

                
                <div class="block-card-header px-4 border-bottom-0 pb-0 d-flex justify-content-between">
                   <h2 class="widget-title pb-0">قائمة الحجوزات</h2>

                    
                    <!--a class="btn btn-orange font-weight-medium" href="{{ route('reservation.archives') }}">
                        <i class="la la-plus mr-1"></i>  الأرشيف
                    </a-->
                </div>

                

                @if(session('success'))
                    <div class="alert alert-success mt-2">{{ session('success') }}</div>
                @endif

                <div class="block-card-body">
                    <div class="my-table table-responsive">
                        <table class="table align-items-center table-flush mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th width="5%">#</th>
                                    <th width="15%">إسم الحريف</th>
                                    <th width="15%">إسم المركب الشبابي</th>
                                    <th width="10%">تاريخ الحجز</th>
                                    <th width="10%">تاريخ الوصول</th>
                                    <th width="10%">تاريخ المغادرة</th>
                                    <th width="10%">السعر الإجمالي</th>
                                    <th width="10%">وضعية الطلب</th>
                                    <th width="15%">إجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($reservations as $reserv)
                                    <tr>
                                        <td>{{ $reserv->id_reserv }}</td>
                                        <td>{{ $reserv->user?->nom_prenom ?? '---' }}</td>
                                        <td>{{ $reserv->auberge?->nom_ar ?? '---' }}</td>
                                        <td>{{ $reserv->date_reserv ?? '---' }}</td>
                                        <td>{{ $reserv->date_arrive ?? '---' }}</td>
                                        <td>{{ $reserv->date_depart ?? '---' }}</td>
                                        <td>{{ $reserv->total_price ?? '---' }}</td>
                                        <td><span class="status-badge 
                                                {{ $reserv->statut?->statut_ar == 'قبول' ? 'status-badge--success' : 
                                                ($reserv->statut?->statut_ar == 'رفض' ? 'status-badge--danger' : 'status-badge--pending') }}">
                                                {{ $reserv->statut?->statut_ar  ?? 'في الانتظار' }}
                                            </span>
                                        </td>
                                        
                                      


                                        <td class="text-center" style="white-space: nowrap;">
                                            <div class="d-flex justify-content-center align-items-center gap-1">

                                                <div class="actions-cell d-inline-flex gap-2">

                                                    <a href="{{ route('reservation.show', $reserv->id_reserv) }}"
                                                    class="btn-icon btn-icon--primary"
                                                    title="عرض">
                                                        <i class="la la-eye"></i>
                                                    </a>

                                                    @if($reserv->statut_id == 2)
                                                        <form action="{{ route('reservation.updateStatus', $reserv->id_reserv) }}" method="POST">
                                                                        @csrf
                                                                        @method('PUT')

                                                            <input type="hidden" name="statut_id" value="1">

                                                            <button type="button"
                                                                    onclick="confirmStatusChange10(this.closest('form'))"
                                                                    class="btn-icon btn-icon--secondary"
                                                                    title="تغيير الحالة">
                                                                <i class="la la-toggle-on"></i>
                                                            </button>
                                                        </form>
                                                    @endif


                                                    @if($reserv->statut_id == 1)
                                                        <a href="{{ route('reservation.chambres', $reserv->id_reserv) }}" 
                                                        class="btn-icon btn-icon--primary" 
                                                        title="Affecter chambres">
                                                            <i class="la la-bed"></i>
                                                        </a>
                                                    @endif

                                                </div>

                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center">لا يوجد حجز.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                    </div>

                   <div class="d-flex justify-content-between align-items-center mt-3">
                      {{ $reservations->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>

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

<div id="back-to-top">
    <i class="la la-arrow-up" title="Go top"></i>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function ensurePutMethodOnForm(form) {
    try { form.method = 'POST'; } catch(e) {}
    let methodInput = form.querySelector('input[name="_method"]');
    if (!methodInput) {
        methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        form.appendChild(methodInput);
    }
    methodInput.value = 'PUT';
}

function confirmStatusChange10(form) {
    Swal.fire({
        title: "تأكيد",
        text: "هل تريد قبول أو رفض هذا الحجز ؟",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "قبول",
        cancelButtonText: "رفض",
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            ensurePutMethodOnForm(form);
            let s = form.querySelector('input[name="statut_id"]');
            if (s) s.value = 1;
            form.submit();
        } else if (result.dismiss === Swal.DismissReason.cancel) {
            Swal.fire({
                title: "رفض الحجز",
                html: `
                    <textarea id="motifReject" 
                              class="swal2-textarea" 
                              placeholder="اكتب سبب الرفض هنا..." 
                              style="direction: rtl; text-align: right;"></textarea>
                `,
                showCancelButton: true,
                confirmButtonText: "تأكيد الرفض",
                cancelButtonText: "إلغاء",
                preConfirm: () => {
                    let motif = document.getElementById("motifReject").value;
                    if (!motif) {
                        Swal.showValidationMessage("الرجاء كتابة سبب الرفض");
                        return false;
                    }
                    return motif;
                }
            }).then((result2) => {
                if (result2.isConfirmed) {
                    ensurePutMethodOnForm(form);
                    let input = form.querySelector('input[name="commentaire_motif"]');
                    if (!input) {
                        input = document.createElement("input");
                        input.type = "hidden";
                        input.name = "commentaire_motif";
                        form.appendChild(input);
                    }
                    input.value = result2.value;
                    let s = form.querySelector('input[name="statut_id"]');
                    if (s) s.value = 3;
                    else {
                        let si = document.createElement("input");
                        si.type = "hidden";
                        si.name = "statut_id";
                        si.value = 3;
                        form.appendChild(si);
                    }

                    form.submit();
                }
            });
        }
    });
}
</script>


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

@endsection