@extends('backoffice.dashboard')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<style>
.block-card { border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.05); }
.block-card-header { padding:18px; border-bottom:1px solid #eee; }
.block-card-body { padding:18px; }
.badge-available { background:#198754; color:#fff; padding:.4rem .7rem; border-radius:6px; }
.badge-occupied  { background:#dc3545; color:#fff; padding:.4rem .7rem; border-radius:6px; }
.lit-box { border:1px solid #eee; border-radius:8px; padding:12px; }
.small-muted { color:#6c757d; font-size:.9rem; }
.dir-rtl { direction: rtl; text-align: right; }
.btn-toggle { min-width:100px; }
.input-date { width:160px; display:inline-block; margin-left:8px; }
</style>

<div class="container dir-rtl mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="block-card mb-3">
                <div class="block-card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="widget-title mb-0">الغرفة: <strong class="text-danger">{{ $chambre->num_chambre }}</strong></h3>
                        <div class="small-muted">الطاقة الإستيعابية: <strong>{{ $chambre->capacite }}</strong> سرير</div>
                    </div>
                </div>

                <div class="block-card-body">
                    <div class="mb-3 d-flex align-items-center justify-content-between">
                        <div class="dir-rtl">
                            <label class="small-muted mb-0">التاريخ:</label>
                            <input type="date" id="dispoDate" class="form-control input-date"
                                   value="{{ $date ?? \Carbon\Carbon::today()->toDateString() }}">
                            <button id="refreshDateBtn" class="btn bg-rgb-primary1 font-weight-medium" style="margin-right:8px;">
                                عرض
                            </button>
                            <small class="small-muted d-block mt-1">اختر التاريخ لعرض/تعديل التوافر (افتراضي: اليوم)</small>
                        </div>

                        <div class="text-start">
@php
    $totalHommeOccupe = 0;
    $totalFemmeOccupe = 0;
    $litsDisponiblesCount = 0;

    foreach($lits as $lit) {
        if(!$lit['est_dispo']) {
            if($lit['sexe_occupe'] === 'homme') $totalHommeOccupe++;
            if($lit['sexe_occupe'] === 'femme') $totalFemmeOccupe++;
        } else {
            $litsDisponiblesCount++;
        }
    }
@endphp

<div class="mb-1">
    <small class="small-muted">مشغول (رجال)</small> 
    <strong>{{ $totalHommeOccupe }}</strong>
</div>
<div class="mb-1">
    <small class="small-muted">مشغول (نساء)</small> 
    <strong>{{ $totalFemmeOccupe }}</strong>
</div>
<div>
    <small class="small-muted">الأسرّة المتاحة</small> 
    <strong>{{ $litsDisponiblesCount }}/{{ $chambre->capacite }}</strong>
</div>

</div>

                    </div>

                    <div class="mb-3">
                        <button id="blockRoomBtn" class="btn bg-rgb-primary1 font-weight-medium">
                            <i class="la la-lock mr-1"></i> غلق/فتح كل الأسرة
                        </button>
                        <small class="small-muted d-block mt-1">اضغط هنا لجعل الغرفة غير قابلة للتعيين (قفل) أو إعادتها متاحة.</small>
                    </div>

                    <div class="row g-3">
   @foreach($lits as $num => $lit)
<div class="col-md-6">
    <div class="lit-box">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="mb-0">السرير رقم {{ $num }}</h6>
            <span class="{{ $lit['est_dispo'] ? 'badge-available' : 'badge-occupied' }}">
                {{ $lit['est_dispo'] 
                    ? 'متاح' 
                    : 'مشغول (' . ($lit['sexe_occupe'] === 'homme' ? 'رجل' : 'امرأة') . ')' 
                }}
            </span>

        </div>

        <div class="mt-2 small-muted">
            اقتراح: اضغط لتغيير حالة هذا السرير بسرعة.
        </div>

        <div class="d-flex justify-content-between mt-2">
            <button class="btn btn-sm btn-toggle {{ $lit['est_dispo'] ? 'btn-outline-success' : 'btn-outline-danger' }} js-toggle"
                    data-chambre="{{ $chambre->id_chambre_tente }}"
                    data-lit="{{ $num }}"
                    data-sexe="homme"
                    data-estado="{{ $lit['est_dispo'] ? 1 : 0 }}">
                {{ $lit['est_dispo'] ? 'متاح' : 'مشغول' }}
            </button>
        </div>
    </div>
</div>
@endforeach

</div>


                    <div class="mt-4 text-center">
                        <a href="{{ route('chambres.index', $chambre->auberge_id) }}" class="btn bg-rgb-primary1 font-weight-medium">
                            <i class="la la-arrow-right mr-1"></i> عودة
                        </a>
                    </div>
                </div>

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

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('click', function(e){
    // toggle single lit
    const btn = e.target.closest('.js-toggle');
    if (btn) { handleToggle(btn); return; }

    // refresh date
    const refreshBtn = e.target.closest('#refreshDateBtn');
    if (refreshBtn) {
        const d = document.getElementById('dispoDate').value;
        const url = new URL(window.location.href);
        url.searchParams.set('date', d);
        window.location.href = url.toString();
        return;
    }

    // global block/unblock
    const blockBtn = e.target.closest('#blockRoomBtn');
    if (blockBtn) {
        Swal.fire({
            title: 'هل تريد فعلاً تبديل حالة كل الأسرّة؟',
            showCancelButton: true,
            confirmButtonText: 'نعم',
            cancelButtonText: 'إلغاء'
        }).then(res => {
            if (!res.isConfirmed) return;
            const dateValue = document.getElementById('dispoDate').value || new Date().toISOString().slice(0,10);
            const shouldOpen = {{ $globalDisponible ? 'false' : 'true' }}; // si global disponible => action = fermer (false)
            fetch("{{ route('chambres.disponibilite.block', $chambre->id_chambre_tente) }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ est_dispo: shouldOpen ? 1 : 0, date: dateValue })
            }).then(r => r.json()).then(data => {
                if (data.success) {
                    Swal.fire({ icon: 'success', title: data.message, timer:1200, showConfirmButton:false })
                        .then(()=> location.reload());
                } else {
                    Swal.fire({ icon: 'error', title: data.message || 'حدث خطأ' });
                }
            }).catch(err => {
                console.error(err);
                Swal.fire({ icon: 'error', title: 'خطأ في الاتصال بالخادم' });
            });
        });
        return;
    }
});

function handleToggle(btn) {
    const chambreId = btn.dataset.chambre;
    const litNum = btn.dataset.lit;
    const sexe = btn.dataset.sexe;
    const current = parseInt(btn.dataset.estado, 10);
    const newState = current ? 0 : 1;
    const dateValue = document.getElementById('dispoDate').value || new Date().toISOString().slice(0,10);

    Swal.fire({
        title: newState ? 'تأكيد تفعيل السرير؟' : 'تأكيد تعطيل السرير؟',
        showCancelButton: true,
        confirmButtonText: 'نعم',
        cancelButtonText: 'إلغاء'
    }).then(result => {
        if (!result.isConfirmed) return;
        fetch("{{ route('chambres.disponibilite.toggle') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                chambre_id: chambreId,
                lit_num: litNum,
                sexe: sexe,
                est_dispo: newState,
                date: dateValue
            })
        }).then(async r => {
            if (!r.ok) {
                const text = await r.text();
                console.error('Response not ok:', r.status, text);
                throw new Error('HTTP ' + r.status);
            }
            return r.json();
        }).then(data => {
            if (data.success) {
                btn.dataset.estado = newState;
                if (newState) {
                    btn.classList.remove('btn-outline-danger');
                    btn.classList.add('btn-outline-success');
                    btn.textContent = 'متاح';
                } else {
                    btn.classList.remove('btn-outline-success');
                    btn.classList.add('btn-outline-danger');
                    btn.textContent = 'مشغول';
                }
                Swal.fire({ icon: 'success', title: data.message, timer:1100, showConfirmButton:false });
            } else {
                Swal.fire({ icon: 'error', title: data.message || 'حدث خطأ' });
            }
        }).catch(err => {
            console.error(err);
            Swal.fire({ icon: 'error', title: 'خطأ في الاتصال بالخادم' });
        });
    });
}
</script>
@endsection