@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>تسجيل دفعة جديدة</h1>
        <a href="{{ route('orders.show', $order) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right"></i> العودة للطلب
        </a>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">تفاصيل الطلب #{{ $order->id }}</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <p><strong>الطاولة:</strong> {{ $order->table ? $order->table->name : ($order->is_external_order ? 'طلب خارجي ' . ($order->car_number ? '(سيارة: ' . $order->car_number . ')' : '') : 'غير محدد') }}</p>
                            <p><strong>العميل:</strong> {{ $order->customer_name ?? 'غير محدد' }}</p>
                            <p><strong>النادل:</strong> {{ $order->user->name }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>تاريخ الطلب:</strong> {{ $order->created_at->format('Y-m-d H:i') }}</p>
                            <p><strong>حالة الطلب:</strong> 
                                <span class="status-badge status-{{ $order->status }}">
                                    @switch($order->status)
                                        @case('pending')
                                            قيد الانتظار
                                            @break
                                        @case('preparing')
                                            قيد التحضير
                                            @break
                                        @case('completed')
                                            مكتمل
                                            @break
                                        @case('cancelled')
                                            ملغي
                                            @break
                                    @endswitch
                                </span>
                            </p>
                            <p><strong>حالة الدفع:</strong>
                                <span class="status-badge {{ $order->payment_status == 'paid' ? 'status-completed' : ($order->payment_status == 'partially_paid' ? 'status-preparing' : 'status-pending') }}">
                                    @switch($order->payment_status)
                                        @case('pending')
                                            غير مدفوع
                                            @break
                                        @case('partially_paid')
                                            مدفوع جزئياً
                                            @break
                                        @case('paid')
                                            مدفوع
                                            @break
                                    @endswitch
                                </span>
                            </p>
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>المنتج</th>
                                    <th>السعر</th>
                                    <th>الكمية</th>
                                    <th>الإجمالي</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($order->items as $item)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $item->product->name }}</td>
                                        <td>{{ number_format($item->unit_price, 2) }}</td>
                                        <td>{{ $item->quantity }}</td>
                                        <td>{{ number_format($item->total_price, 2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" class="text-end">المجموع:</th>
                                    <th>{{ number_format($order->total_amount, 2) }}</th>
                                </tr>
                                <tr>
                                    <th colspan="4" class="text-end">الخصم:</th>
                                    <th>{{ number_format($order->discount, 2) }}</th>
                                </tr>
                                <tr>
                                    <th colspan="4" class="text-end">الضريبة:</th>
                                    <th>{{ number_format($order->tax, 2) }}</th>
                                </tr>
                                <tr>
                                    <th colspan="4" class="text-end">الإجمالي:</th>
                                    <th>{{ number_format($order->final_amount, 2) }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            
            @if($order->payments->count() > 0)
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title">المدفوعات السابقة</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>المبلغ</th>
                                        <th>طريقة الدفع</th>
                                        <th>الحالة</th>
                                        <th>التاريخ</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($order->payments as $payment)
                                        <tr>
                                            <td>{{ $payment->id }}</td>
                                            <td>{{ number_format($payment->amount, 2) }}</td>
                                            <td>
                                                @switch($payment->payment_method)
                                                    @case('cash')
                                                        <i class="fas fa-money-bill-wave"></i> نقداً
                                                        @break
                                                    @case('credit_card')
                                                        <i class="fas fa-credit-card"></i> بطاقة ائتمان
                                                        @break
                                                    @case('debit_card')
                                                        <i class="fas fa-credit-card"></i> بطاقة خصم
                                                        @break
                                                    @case('mobile_payment')
                                                        <i class="fas fa-mobile-alt"></i> دفع إلكتروني
                                                        @break
                                                @endswitch
                                            </td>
                                            <td>
                                                <span class="status-badge {{ $payment->payment_status == 'completed' ? 'status-completed' : ($payment->payment_status == 'refunded' ? 'status-cancelled' : 'status-pending') }}">
                                                    @switch($payment->payment_status)
                                                        @case('completed')
                                                            مكتمل
                                                            @break
                                                        @case('failed')
                                                            فاشل
                                                            @break
                                                        @case('refunded')
                                                            مسترجع
                                                            @break
                                                    @endswitch
                                                </span>
                                            </td>
                                            <td>{{ $payment->created_at->format('Y-m-d H:i') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">تسجيل دفعة</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('payments.store', ['order' => $order->id]) }}" method="POST" id="paymentForm">
                        @csrf
                        <input type="hidden" name="order_id" value="{{ $order->id }}">
                        
                        <div class="mb-3">
                            <label for="amount" class="form-label">المبلغ <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control @error('amount') is-invalid @enderror" id="amount" name="amount" value="{{ $remainingAmount }}" min="0.01" max="{{ $remainingAmount }}" step="0.01" required>
                                <button class="btn btn-outline-secondary" type="button" id="fullAmountBtn">كامل المبلغ</button>
                            </div>
                            @error('amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">المبلغ المتبقي: {{ number_format($remainingAmount, 2) }}</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="payment_method" class="form-label">طريقة الدفع <span class="text-danger">*</span></label>
                            <select class="form-select @error('payment_method') is-invalid @enderror" id="payment_method" name="payment_method" required>
                                <option value="">اختر طريقة الدفع</option>
                                <option value="cash">نقداً</option>
                                <option value="credit_card">بطاقة ائتمان</option>
                                <option value="debit_card">بطاقة خصم</option>
                                <option value="mobile_payment">دفع إلكتروني</option>
                            </select>
                            @error('payment_method')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div id="cardDetails" class="d-none">
                            <div class="mb-3">
                                <label for="card_number" class="form-label">رقم البطاقة</label>
                                <input type="text" class="form-control @error('card_number') is-invalid @enderror" id="card_number" name="card_number" value="{{ old('card_number') }}">
                                @error('card_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="card_expiry" class="form-label">تاريخ الانتهاء</label>
                                        <input type="text" class="form-control @error('card_expiry') is-invalid @enderror" id="card_expiry" name="card_expiry" placeholder="MM/YY" value="{{ old('card_expiry') }}">
                                        @error('card_expiry')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="card_cvv" class="form-label">CVV</label>
                                        <input type="text" class="form-control @error('card_cvv') is-invalid @enderror" id="card_cvv" name="card_cvv" value="{{ old('card_cvv') }}">
                                        @error('card_cvv')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="notes" class="form-label">ملاحظات</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="2">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> تسجيل الدفعة
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">ملخص الدفع</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>إجمالي الطلب:</span>
                        <span>{{ number_format($order->final_amount, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>المدفوع:</span>
                        <span>{{ number_format($paidAmount, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>المتبقي:</span>
                        <span>{{ number_format($remainingAmount, 2) }}</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between fw-bold">
                        <span>الحالة:</span>
                        <span class="status-badge {{ $order->payment_status == 'paid' ? 'status-completed' : ($order->payment_status == 'partially_paid' ? 'status-preparing' : 'status-pending') }}">
                            @switch($order->payment_status)
                                @case('pending')
                                    غير مدفوع
                                    @break
                                @case('partially_paid')
                                    مدفوع جزئياً
                                    @break
                                @case('paid')
                                    مدفوع
                                    @break
                            @endswitch
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Set full amount
        $('#fullAmountBtn').click(function() {
            $('#amount').val({{ $remainingAmount }});
        });
        
        // Toggle card details based on payment method
        $('#payment_method').change(function() {
            const method = $(this).val();
            if (method === 'credit_card' || method === 'debit_card') {
                $('#cardDetails').removeClass('d-none');
            } else {
                $('#cardDetails').addClass('d-none');
            }
        });
        
        // Format card expiry
        $('#card_expiry').on('input', function() {
            let value = $(this).val().replace(/\D/g, '');
            if (value.length > 2) {
                value = value.substring(0, 2) + '/' + value.substring(2, 4);
            }
            $(this).val(value);
        });
        
        // Form validation
        $('#paymentForm').submit(function(event) {
            const amount = parseFloat($('#amount').val());
            const maxAmount = {{ $remainingAmount }};
            
            if (amount <= 0) {
                event.preventDefault();
                alert('يجب أن يكون المبلغ أكبر من صفر');
                return false;
            }
            
            if (amount > maxAmount) {
                event.preventDefault();
                alert('المبلغ أكبر من المبلغ المتبقي');
                return false;
            }
            
            const paymentMethod = $('#payment_method').val();
            if (!paymentMethod) {
                event.preventDefault();
                alert('يرجى اختيار طريقة الدفع');
                return false;
            }
            
            if (paymentMethod === 'credit_card' || paymentMethod === 'debit_card') {
                const cardNumber = $('#card_number').val();
                const cardExpiry = $('#card_expiry').val();
                const cardCvv = $('#card_cvv').val();
                
                if (!cardNumber || !cardExpiry || !cardCvv) {
                    event.preventDefault();
                    alert('يرجى إدخال تفاصيل البطاقة');
                    return false;
                }
            }
        });
    });
</script>
@endpush