@extends('partial.layout')
@section('content')
    <x-toast/>
    <div class="container py-5">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header text-white">
                        <h4 class="mb-0">بررسی نهایی سفارش #{{ $order->order_number }}</h4>
                    </div>
                    <div class="card-body">
                        <!-- Order Status -->
                        <div class="alert alert-info mb-4">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle fa-2x ms-3"></i>
                                <div>
                                    <h5 class="mb-1">وضعیت سفارش</h5>
                                    <p class="mb-0">سفارش شما ثبت شده و در انتظار پرداخت است. لطفاً اطلاعات پرداخت را
                                        تکمیل کنید.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Order Items -->
                        <div class="order-items mb-4">
                            <h5 class="border-bottom pb-2 mb-3">اقلام سفارش</h5>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>تصویر</th>
                                        <th>نام محصول</th>
                                        <th>تاریخ تحویل</th>
                                        <th>تخفیف</th>
                                        <th>قیمت</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($orderItems as $item)
                                        <tr>
                                            <td>
                                                <img src="{{ $item['product_image'] }}"
                                                     alt="{{ $item['product_title'] }}"
                                                     class="img-thumbnail"
                                                     style="width: 80px; height: 80px; object-fit: cover;">
                                            </td>
                                            <td>{{ $item['product_title'] }}</td>
                                            <td>{{ $item['delivery_date'] ? \Morilog\Jalali\Jalalian::fromDateTime($item['delivery_date'])->format('Y/m/d') : '-' }}</td>
                                            <td>{{ $item['discount_price'] ? number_format($item['discount_price']) : 0 }}
                                                ریال
                                            </td>
                                            <td>{{ number_format($item['final_price']) }} ریال</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Payment Summary -->
                        <div class="payment-summary mb-4">
                            <h5 class="border-bottom pb-2 mb-3">خلاصه پرداخت</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="payment-details">
                                        <div class="mb-3">
                                            <label class="text-muted">روش پرداخت:</label>
                                            <span class="fw-bold">{{ $paymentSummary['payment_method'] }}</span>
                                            <hr>
                                            <p class="">{!!  $paymentSummary['payment_method_description']  !!}</p>
                                        </div>
                                        <div class="mb-3">
                                            <label class="text-muted">وضعیت پرداخت:</label>
                                            <span
                                                class="badge bg-{{ $paymentSummary['payment_status'] === 'در انتظار پرداخت' ? 'warning' : 'success' }}">
                                            {{ $paymentSummary['payment_status'] }}
                                        </span>
                                            @php
                                                $paymentMethod = $order->paymentMethod;
                                                $expireAt = $order->created_at->addHours((int) $paymentMethod->payment_time);
                                                $now = now();
                                                $isExpired = $now->greaterThan($expireAt);
                                            @endphp
                                            @if($paymentSummary['payment_status'] === 'در انتظار پرداخت' && !$isExpired && $paymentSummary['payment_method_type'] == 'transfer_to_card')
                                                <div class="payment-timer mt-2">
                                                    مهلت پرداخت:
                                                    <span class="badge bg-danger me-2">
                                                    <i class="fa-duotone fa-clock me-1"></i>
                                                    <span class="timer"
                                                          data-expires="{{ $expireAt->timestamp * 1000 }}">
                                                        <span class="hours">00</span>:<span
                                                            class="minutes">00</span>:<span class="seconds">00</span>
                                                    </span>
                                                </span>
                                                    <div class="alert alert-warning mt-3">
                                                        <i class="fas fa-exclamation-triangle ms-2"></i>
                                                        با توجه به نوسانات قیمت در بازار، لطفاً پرداخت خود را تا پیش از
                                                        پایان مهلت تعیین‌شده انجام دهید. در صورت پایان زمان، سفارش شما
                                                        به‌صورت خودکار لغو خواهد شد و امکان ثبت مجدد آن فراهم خواهد بود.
                                                    </div>

                                                </div>
                                            @endif
                                        </div>
                                        @if($paymentSummary['payment_date'])
                                            <div class="mb-3">
                                                <label class="text-muted">تاریخ پرداخت:</label>
                                                <span>{{ \Morilog\Jalali\Jalalian::fromDateTime($paymentSummary['payment_date'])->format('Y/m/d H:i') }}</span>
                                            </div>
                                        @endif
                                        @if($paymentSummary['transition_number'])
                                            <div class="mb-3">
                                                <label class="text-muted">شماره تراکنش:</label>
                                                <span>{{ $paymentSummary['transition_number'] }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="price-summary">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>جمع کل:</span>
                                            <span>{{ number_format($paymentSummary['total_price']) }} ریال</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>تخفیف:</span>
                                            <span class="text-success">@if($paymentSummary['discount_price'] && $paymentSummary['discount_price'] !== 0)
                                                    -{{ number_format($paymentSummary['discount_price']) }}
                                                    ریال
                                                @else
                                                    0
                                                @endif
                                            </span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>هزینه ارسال:</span>
                                            <span>{{ number_format($paymentSummary['delivery_price']) }} ریال</span>
                                        </div>
                                        <div class="d-flex justify-content-between fw-bold">
                                            <span>مبلغ قابل پرداخت:</span>
                                            <span>{{ number_format($paymentSummary['final_price']) }} ریال</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Form -->
                        @if($paymentSummary['payment_status'] === 'در انتظار پرداخت' && $paymentSummary['payment_method_type'] == 'transfer_to_card')
                            <div class="payment-form">
                                <h5 class="border-bottom pb-2 mb-3">ثبت اطلاعات پرداخت</h5>
                                <div class="alert alert-success">
                                    <i class="fas fa-info-circle ms-2"></i>
                                    لطفا پس از انجام پرداخت، اطلاعات تراکنش را وارد کنید.
                                </div>
                                <form id="paymentForm">
                                    <input type="hidden" name="order_id" id="order_id" value="{{ $order->id }}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="transition_number" class="form-label">شماره تراکنش</label>
                                            <input type="text" class="form-control" id="transition_number"
                                                   name="transition_number" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="transition_price" class="form-label">مبلغ پرداخت شده</label>
                                            <input type="number" class="form-control" id="transition_price"
                                                   name="transition_price" required>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-check ms-2"></i>
                                        ثبت اطلاعات پرداخت
                                    </button>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            .order-items img {
                border-radius: 8px;
            }

            .payment-summary {
                background-color: #f8f9fa;
                padding: 20px;
                border-radius: 8px;
            }

            .price-summary {
                background-color: white;
                padding: 15px;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            }

            .payment-form {
                background-color: #f8f9fa;
                padding: 20px;
                border-radius: 8px;
            }

            .payment-timer {
                font-family: 'IRANSans', sans-serif;
            }

            .payment-timer .badge {
                padding: 8px 12px;
                font-size: 0.9rem;
            }

            .payment-timer .timer {
                font-weight: bold;
                letter-spacing: 1px;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            // Add timer functionality
            function updateTimers() {
                document.querySelectorAll('.timer').forEach(timer => {
                    const expiresAt = parseInt(timer.dataset.expires);
                    const now = new Date().getTime();
                    const distance = expiresAt - now;

                    if (distance < 0) {
                        timer.closest('.payment-timer').remove();
                        const paymentForm = document.querySelector('.payment-form');
                        if (paymentForm) {
                            paymentForm.remove();
                        }
                        return;
                    }

                    const hours = Math.floor(distance / (1000 * 60 * 60));
                    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                    timer.querySelector('.hours').textContent = hours.toString().padStart(2, '0');
                    timer.querySelector('.minutes').textContent = minutes.toString().padStart(2, '0');
                    timer.querySelector('.seconds').textContent = seconds.toString().padStart(2, '0');
                });
            }

            // Update timers every second
            setInterval(updateTimers, 1000);
            // Initial update
            updateTimers();

            document.getElementById('paymentForm').addEventListener('submit', function (e) {
                e.preventDefault();
                const orderId = document.getElementById('order_id').value;
                const formData = new FormData(this);

                fetch(`/orders/${orderId}/payment`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        transition_number: formData.get('transition_number'),
                        transition_price: formData.get('transition_price')
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            showAlert({type: 'success', message: data.message});
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else if (data.status === 'expired' && data.redirect) {
                            showAlert({type: 'warning', message: data.message});
                            setTimeout(() => {
                                window.location.href = data.redirect;
                            }, 2000);
                        } else {
                            showAlert({type: 'danger', message: data.message});
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showAlert({type: 'danger', message: 'خطای ارتباط با سرور'});
                    });
            });
        </script>
    @endpush
@endsection