@extends('layouts.app')

@section('title', 'مرتجع فاتورة حجز')
@section('page_heading', 'مرتجع حجز #' . $reservation->id)

@section('content')
<div class="app-grid gap-7">
    <div class="xl:col-span-7">
        <div class="app-card app-card--flush">
            <div class="app-card__header">
                <h3 class="app-card__title">إرجاع من فاتورة الحجز #{{ $reservation->id }}</h3>
            </div>
            <div class="app-card__body">
                <form method="POST" action="{{ route('dashboard.reservations.returns.store', $reservation) }}">
                    @csrf
                    <div class="mb-6">
                        <label class="app-label">نوع المرتجع</label>
                        <select name="return_type" id="reservation_return_type" class="app-input app-select">
                            <option value="partial">إرجاع جزئي</option>
                            <option value="full">إرجاع كامل الفاتورة</option>
                        </select>
                    </div>

                    <div class="mb-6" id="reservation_return_amount_wrap">
                        <label class="app-label">مبلغ المرتجع</label>
                        <input type="number" step="0.01" min="0.01" max="{{ number_format($reservation->returnable_amount, 2, '.', '') }}" name="refunded_amount" class="app-input" value="{{ old('refunded_amount', number_format($reservation->returnable_amount, 2, '.', '')) }}">
                    </div>

                    <div class="mb-6">
                        <label class="app-label">ملاحظات</label>
                        <textarea name="notes" class="app-input" rows="3">{{ old('notes') }}</textarea>
                    </div>

                    <div class="separator my-8"></div>

                    <div class="app-check app-check--switch mb-6">
                        <input class="app-check__input" type="checkbox" value="1" id="has_damage" name="has_damage" {{ old('has_damage') ? 'checked' : '' }}>
                        <label class="app-check__label font-bold" for="has_damage">تسجيل تلف أو تعديل يحتاج صيانة</label>
                    </div>

                    <div id="damage_fields" style="{{ old('has_damage') ? '' : 'display:none;' }}">
                        <div class="mb-6">
                            <label class="app-label">عنوان التلف / الصيانة</label>
                            <input type="text" name="damage_title" class="app-input" value="{{ old('damage_title') }}" placeholder="مثال: تمزق في الذيل أو تعديل مقاس">
                        </div>

                        <div class="mb-6">
                            <label class="app-label">وصف التلف</label>
                            <textarea name="damage_description" class="app-input" rows="3">{{ old('damage_description') }}</textarea>
                        </div>

                        <div class="app-grid gap-4">
                            <div class="md:col-span-6">
                                <label class="app-label">تكلفة الصيانة</label>
                                <input type="number" step="0.01" min="0" name="maintenance_cost" class="app-input" value="{{ old('maintenance_cost', 0) }}">
                            </div>
                            <div class="md:col-span-6">
                                <label class="app-label">تحميل على العميل</label>
                                <input type="number" step="0.01" min="0" name="customer_charge_amount" class="app-input" value="{{ old('customer_charge_amount', 0) }}">
                            </div>
                        </div>

                        <div class="mt-6 mb-6">
                            <label class="app-label">طريقة التحميل على العميل</label>
                            <select name="customer_charge_type" class="app-input app-select">
                                <option value="none" {{ old('customer_charge_type') === 'none' ? 'selected' : '' }}>بدون تحميل</option>
                                <option value="deduct_from_refund" {{ old('customer_charge_type') === 'deduct_from_refund' ? 'selected' : '' }}>خصم من قيمة المرتجع</option>
                                <option value="add_to_reservation" {{ old('customer_charge_type') === 'add_to_reservation' ? 'selected' : '' }}>إضافة رسوم على الحجز</option>
                            </select>
                        </div>

                        <div class="mb-6">
                            <label class="app-label">ملاحظات الصيانة</label>
                            <textarea name="maintenance_notes" class="app-input" rows="3">{{ old('maintenance_notes') }}</textarea>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('dashboard.reservations.show', $reservation) }}" class="app-btn app-btn--secondary">رجوع</a>
                        <button type="submit" class="app-btn app-btn--primary">تسجيل المرتجع</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="xl:col-span-5">
        <div class="app-card app-card--flush h-full">
            <div class="app-card__header">
                <h3 class="app-card__title">ملخص فاتورة الحجز</h3>
            </div>
            <div class="app-card__body">
                <div class="flex flex-col gap-4">
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">العميل</span><span class="font-bold">{{ $reservation->customer?->name ?: '-' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">المنتج</span><span class="font-bold">{{ $reservation->product?->name ?: '-' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">إجمالي الفاتورة</span><span class="font-bold">{{ number_format($reservation->price, 2) }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">المرتجع السابق</span><span class="font-bold text-red-600 dark:text-red-400">{{ number_format($reservation->refunded_amount, 2) }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">المتاح للمرتجع</span><span class="font-bold text-emerald-600 dark:text-emerald-400">{{ number_format($reservation->returnable_amount, 2) }}</span></div>
                    <div class="app-alert app-alert--warning mt-4 mb-0">
                        عند تفعيل تسجيل التلف سيتم فتح سجل صيانة للقطعة وتحويل حالتها إلى "في الصيانة" لمنع أي حجز جديد عليها حتى إغلاق السجل.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('reservation_return_type');
    const amountWrap = document.getElementById('reservation_return_amount_wrap');
    const damageToggle = document.getElementById('has_damage');
    const damageFields = document.getElementById('damage_fields');

    function syncType() {
        amountWrap.style.display = typeSelect.value === 'full' ? 'none' : '';
    }

    function syncDamageFields() {
        damageFields.style.display = damageToggle.checked ? '' : 'none';
    }

    typeSelect.addEventListener('change', syncType);
    damageToggle.addEventListener('change', syncDamageFields);
    syncType();
    syncDamageFields();
});
</script>
@endsection