@extends('layouts.app')
@section('title', 'إدارة الأقساط')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <a href="{{ route('installments.create') }}" class="btn btn-primary">
        <i class="fa-solid fa-plus me-2"></i> إضافة قسط جديد
    </a>
</div>

<div class="premium-card">
    <div class="card-header">الأقساط المستحقة والمدفوعة</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>المحل / العقد</th>
                        <th>تاريخ الاستحقاق</th>
                        <th>المبلغ الأساسي</th>
                        <th>المدفوع</th>
                        <th>المتبقي</th>
                        <th>الحالة</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $totalRemaining = $installments->sum('amount') - $installments->sum('paid_amount');
                    @endphp
                    @foreach($installments as $installment)
                    <tr>
                        <td>{{ $installment->contract->shop->shop_name ?? '' }} (عقد #{{ $installment->contract->id ?? '' }})</td>
                        <td>{{ $installment->due_date }}</td>
                        <td class="fw-bold text-dark">{{ number_format($installment->amount, 2) }}</td>
                        <td class="text-success fw-bold">{{ number_format($installment->paid_amount, 2) }}</td>
                        <td class="text-danger fw-bold">{{ number_format($installment->amount - $installment->paid_amount, 2) }}</td>
                        <td>
                            @if($installment->is_paid)
                                <span class="badge badge-success">مدفوع بالكامل</span>
                            @elseif($installment->paid_amount > 0)
                                <span class="badge badge-info text-dark">مدفوع جزئي</span>
                            @else
                                <span class="badge badge-warning text-dark">غير مدفوع</span>
                            @endif
                        </td>
                        <td>
                            @if(!$installment->is_paid)
                                <button type="button" class="btn btn-sm btn-success rounded-pill px-3 py-1 shadow-sm d-inline-flex align-items-center justify-content-center fw-bold" style="font-size: 0.75rem;" onclick="openPayModal({{ $installment->id }}, {{ $installment->amount - $installment->paid_amount }}, {{ $totalRemaining }})" title="سداد القسط">
                                    <i class="fa-solid fa-money-bill-wave ms-1"></i>سداد
                                </button>
                            @endif
                            <form action="{{ route('installments.destroy', $installment->id) }}" method="POST" class="d-inline" onsubmit="return confirm('تأكيد الحذف؟')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger text-white rounded-pill px-3 py-1 shadow-sm d-inline-flex align-items-center justify-content-center fw-bold" style="font-size: 0.75rem;" title="حذف">
                                    <i class="fa-solid fa-trash ms-1"></i>حذف
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Pay Installment Modal -->
<div class="modal fade" id="payModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow" style="border-radius: 16px;">
            <div class="modal-header bg-success text-white border-0" style="border-top-left-radius: 16px; border-top-right-radius: 16px;">
                <h5 class="modal-title fw-bold"><i class="fa-solid fa-money-bill-wave ms-2"></i>سداد قسط (كلي / جزئي)</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="payForm" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">المبلغ المراد سداده</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-coins text-warning"></i></span>
                            <input type="number" step="0.01" class="form-control border-start-0 bg-light" name="amount" id="payAmount" required>
                        </div>
                        <div class="form-text">المبلغ المتبقي: <span id="remainingAmount" class="fw-bold text-danger"></span> درهم</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">طريقة الدفع</label>
                        <select class="form-select bg-light" name="payment_method" required>
                            <option value="cash">نقدي (Cash)</option>
                            <option value="bank_transfer">تحويل بنكي</option>
                            <option value="card">بطاقة ائتمان / شبكة</option>
                            <option value="cheque">شيك</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">ملاحظات (اختياري)</label>
                        <textarea name="notes" class="form-control bg-light" rows="2" placeholder="أدخل أي ملاحظات حول عملية الدفع..."></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0" style="border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;">
                    <button type="button" class="btn btn-secondary px-4 rounded-pill" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-success px-4 rounded-pill shadow-sm"><i class="fa-solid fa-check ms-1"></i> تأكيد السداد</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function openPayModal(installmentId, remainingAmount, totalRemainingAmount) {
        document.getElementById('payForm').action = '{{ url("installments") }}/' + installmentId + '/pay';
        document.getElementById('payAmount').value = remainingAmount;
        document.getElementById('payAmount').max = totalRemainingAmount;
        document.getElementById('remainingAmount').innerText = remainingAmount.toFixed(2) + ' (ويمكنك دفع مبلغ أكبر ليتم ترحيله للأقساط القادمة)';
        
        var myModal = new bootstrap.Modal(document.getElementById('payModal'));
        myModal.show();
    }
</script>

@endsection