@extends('web.layouts.app')

@section('title', 'طريقة الدفع')


@section('styles')
<style>
    .payment-section {
        padding: 1.5rem;
    }
    
    .section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        color: #333;
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .section-title i {
        color: #f74e36;
    }
    
    .payment-options {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .payment-option {
        position: relative;
    }
    
    .payment-option input[type="radio"] {
        display: none;
    }
    
    .payment-label {
        display: flex;
        align-items: center;
        padding: 1rem;
        border: 1px solid #ddd;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0;
        background: #fff;
    }
    
    .payment-option input[type="radio"]:checked + .payment-label {
        border-color: #f74e36;
        background-color: #fff9f8;
        box-shadow: 0 2px 8px rgba(247, 78, 54, 0.1);
    }
    
    .payment-check {
        width: 20px;
        height: 20px;
        border: 2px solid #ddd;
        border-radius: 50%;
        margin-left: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .check-circle {
        width: 10px;
        height: 10px;
        background: #f74e36;
        border-radius: 50%;
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s ease;
    }
    
    .payment-option input[type="radio"]:checked + .payment-label .payment-check {
        border-color: #f74e36;
    }
    
    .payment-option input[type="radio"]:checked + .payment-label .check-circle {
        opacity: 1;
        transform: scale(1);
    }
    
    .payment-info {
        flex: 1;
    }
    
    .payment-name {
        display: block;
        font-weight: 600;
        color: #333;
        margin-bottom: 0.25rem;
    }
    
    .payment-description {
        display: block;
        color: #666;
        font-size: 0.85rem;
    }
    
    .payment-icon {
        font-size: 1.5rem;
        color: #f74e36;
        opacity: 0.8;
    }
    
    .confirm-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1rem;
        background-color: #f74e36;
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
    }
    
    .confirm-btn:hover {
        background-color: #e63e28;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    @media (hover: hover) {
        .payment-label:hover {
            border-color: #f74e36;
            transform: translateY(-1px);
        }
    }
    
    @media (max-width: 576px) {
        .payment-section {
            padding: 1rem;
        }
        
        .payment-label {
            padding: 0.75rem;
        }
        
        .payment-icon {
            font-size: 1.25rem;
        }
    }
    </style>
    
@endsection

@section('content')
<div class="content">

    <div class="checkout-page">
        <div class="container">

            <div class="checkout">
                <h6>إتمام الطلب</h6>

                <div class="section-padding">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="steps steps-sm">
                                    <ul class="row">

                                        <li class="col active">
                                            <a href="{{ route('cart') }}">
                                                <span class="step-item" data-text="السلة"><span>1</span></span>
                                            </a>
                                        </li>

                                        <li class="col active">
                                            <a href="{{ route('checkout.address') }}">
                                                <span class="step-item" data-text="الشحن"><span>2</span></span>
                                            </a>
                                        </li>

                                        <li class="col current">
                                            <a href="{{ route('checkout.payment') }}">
                                                <span class="step-item" data-text="الدفع"><span>3</span></span>
                                            </a>
                                        </li>

                                        <li class="col">
                                            <a href="{{ route('checkout.complete') }}">
                                                <span class="step-item" data-text="إنهاء"><span>4</span></span>
                                            </a>
                                        </li>

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

                <div class="row">
                    <div class="col-lg-5">
                        <div class="shop-cards">
                            @foreach ($cartItems as $item)
                                <div class="shop-card">
                                    <div class="dropdown-box-list-item">

                                        <div class="cart-item-preview">
                                            <a class="cart-item-preview-image" href="{{ route('products.details', $item->product->id) }}">
                                                <img src="{{ Storage::url($item->product->main_image) }}" alt="{{ $item->product->name }}">
                                            </a>
                                            <div class="cart-item-preview-text">
                                                {{ $item->product->category ? $item->product->category->name : 'قسم غير محدد' }}
                                            </div>
                                            <div class="cart-item-preview-title">
                                                {{ $item->product->name }}
                                            </div>
                                            <div class="cart-item-preview-price">
                                                <span>
                                                    {{ $item->product->price }}
                                                    <span class="q">x {{ $item->quantity }}</span>
                                                    <span class="highlighted">L.E</span>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="item-price">
                                            <h6>
                                                {{ $item->quantity * $item->price }}
                                                <span class="highlighted">L.E</span>
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="sidebar-box">
                            <div class="sidebar-box-content">
                                <div class="totals-line">
                                    <div class="totals-line-title">السلة ({{ $cartItems->count() }})</div>
                                    <div class="price-title-small" id="subtotal">
                                        {{ number_format($cartItems->sum(fn($item) => $item->product ? $item->quantity * $item->product->price : 0), 2) }}
                                        <span class="currency">L.E</span>
                                    </div>
                                </div>

                                <div class="totals-line">
                                    <div class="totals-line-title">مصاريف الشحن</div>
                                    <div class="price-title-small" id="shipping-cost-value">
                                        {{ $shippingCost }}<span class="currency">L.E</span>
                                    </div>
                                </div>

                                @if ($cart && $cart->coupon)
                                    <div class="totals-line">
                                        <div class="totals-line-title">كود خصم: {{ $cart->coupon->code }}</div>
                                        <div class="price-title-small" id="discount-amount">
                                            @if ($cart->coupon->discount_type == 'percentage')
                                                {{ $cart->coupon->discount_value }}%
                                            @else
                                                {{ number_format($cart->coupon->discount_value, 2) }}
                                                <span class="currency">L.E</span>
                                            @endif
                                        </div>
                                    </div>
                                @endif

                                <div class="totals-line totals-line-bold">
                                    <div class="totals-line-title">الإجمالى</div>
                                    <div class="price-title-small" id="cart-total">
                                        {{ number_format($total, 2) }}
                                        <span class="currency">L.E</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-7">
                        <div class="billing-info">
                            <div class="bill-box">

                                <div class="bill-box-header">
                                    <div class="section-header-info">
                                        <h3>تفاصيل الدفع</h3>
                                    </div>
                                    <a href="{{ route('checkout.address') }}">تغيير العنوان
                                        <i class="fa fa-edit"></i>
                                    </a>
                                </div>

                                <div class="bill-box-container payment-section">
                                    <form action="{{ route('checkout.complete') }}" method="POST">
                                        @csrf
                                        <div class="payment-methods">
                                            <div class="section-title">
                                                <i class="fas fa-credit-card"></i>
                                                <span>اختر طريقة الدفع</span>
                                            </div>
                                            
                                            <div class="payment-options">
                                                @foreach ($paymentMethods as $method)
                                                <div class="payment-option">
                                                    <input type="radio" 
                                                           name="payment_method" 
                                                           id="payment-{{ $method->id }}" 
                                                           value="{{ $method->id }}"
                                                           @if($loop->first) checked @endif>
                                                    <label for="payment-{{ $method->id }}" class="payment-label">
                                                        <div class="payment-check">
                                                            <div class="check-circle"></div>
                                                        </div>
                                                        <div class="payment-info">
                                                            <span class="payment-name">{{ $method->name }}</span>
                                                            <small class="payment-description">
                                                                @switch($method->id)
                                                                    @case(1)
                                                                        الدفع عند الاستلام
                                                                        @break
                                                                    @case(2)
                                                                        الدفع عبر البطاقة البنكية
                                                                        @break
                                                                    @default
                                                                        طريقة دفع آمنة وسريعة
                                                                @endswitch
                                                            </small>
                                                        </div>
                                                        <div class="payment-icon">
                                                            <i class="fas @switch($method->id)
                                                                @case(1)
                                                                    fa-money-bill-wave
                                                                    @break
                                                                @case(2)
                                                                    fa-credit-card
                                                                    @break
                                                                @default
                                                                    fa-wallet
                                                                @endswitch">
                                                            </i>
                                                        </div>
                                                    </label>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                
                                        <button type="submit" class="confirm-btn">
                                            <span class="btn-content">
                                                <i class="fas fa-check ml-2"></i>
                                                تأكيد الطلب
                                            </span>
                                            <div class="btn-loader d-none">
                                                <div class="spinner-border spinner-border-sm text-light" role="status">
                                                    <span class="sr-only">جارِ التحميل...</span>
                                                </div>
                                            </div>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            const btn = this.querySelector('.confirm-btn');
            const content = btn.querySelector('.btn-content');
            const loader = btn.querySelector('.btn-loader');
            
            content.classList.add('d-none');
            loader.classList.remove('d-none');
            btn.disabled = true;
        });
    </script>
@endsection