@extends('layouts.home')
<style>
    :root {
        --harvest-green: #16a34a;
        --harvest-green-light: #22c55e;
        --harvest-green-dark: #16a34a;
        --success-light: #F0F8F0;
    }

    .btn-success {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background-color: var(--harvest-green-dark);
        border-color: var(--harvest-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 142, 35, 0.3);
    }

    .btn-outline-success {
        color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-outline-success:hover {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        color: white;
    }

    .text-success {
        color: var(--harvest-green) !important;
    }

    .bg-success-subtle {
        background-color: var(--success-light) !important;
    }

    .form-control:focus {
        border-color: var(--harvest-green);
        box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
    }

    .form-select:focus {
        border-color: var(--harvest-green);
        box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
    }

    .checkout-step {
        transition: all 0.3s ease;
    }

    .checkout-step:hover {
        background-color: #f8f9fa;
    }

    .product-image-wrapper {
        overflow: hidden;
        border-radius: 0.5rem;
    }

    .shadow-sm {
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05) !important;
    }

    .rounded-3 {
        border-radius: 0.75rem !important;
    }

    .payment-option {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid #dee2e6;
    }

    .payment-option:hover {
        border-color: var(--harvest-green);
        background-color: var(--success-light);
    }

    .payment-option.selected {
        border-color: var(--harvest-green);
        background-color: var(--success-light);
    }

    .payment-option input[type="radio"] {
        display: none;
    }

    .order-item {
        transition: all 0.3s ease;
    }



    @media (max-width: 768px) {
        .container {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .checkout-step {
            padding: 1.5rem 1rem !important;
        }
    }

    /* Loading state */
    .btn-loading {
        position: relative;
        pointer-events: none;
    }

    .btn-loading::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        border: 2px solid transparent;
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

@section('content')
    <main class="min-vh-100 bg-light">
        <!-- Header Section -->
        <div class="bg-white shadow-sm border-bottom">
            <div class="container py-4">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h1 class="h3 mb-1 text-dark fw-bold">Checkout</h1>
                        <p class="text-muted mb-0">Complete your order securely</p>
                    </div>
                    <a href="{{ route('cart') }}" class="btn btn-outline-success d-none d-md-flex align-items-center gap-2">
                        <i class="fas fa-arrow-left"></i>
                        Back to Cart
                    </a>
                </div>
            </div>
        </div>

        <div class="container py-5">
            <form id="checkoutForm" action="{{ route('cart.checkout.process') }}" method="POST">
                @csrf

                <div class="row g-4">
                    <!-- Checkout Form Section -->
                    <div class="col-lg-8">
                        <!-- Customer Information -->
                        <div class="bg-white rounded-3 shadow-sm overflow-hidden mb-4">
                            <div class="p-4 border-bottom bg-light">
                                <h5 class="mb-0 fw-semibold text-dark">
                                    <i class="fas fa-user me-2 text-success"></i>
                                    Customer Information
                                </h5>
                            </div>
                            <div class="p-4">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="first_name" class="form-label">First Name *</label>
                                        <input type="text" class="form-control" id="first_name" name="first_name"
                                            value="{{ old('first_name', auth()->user()->customerInfo->first_name ?? '') }}"
                                            required>
                                        @error('first_name')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="last_name" class="form-label">Last Name *</label>
                                        <input type="text" class="form-control" id="last_name" name="last_name"
                                            value="{{ old('last_name', auth()->user()->customerInfo->last_name ?? '') }}"
                                            required>
                                        @error('last_name')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="email" class="form-label">Email Address *</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            value="{{ old('email', auth()->user()->email ?? '') }}" required disabled>
                                        @error('email')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="phone" class="form-label">Phone Number *</label>
                                        <input type="tel" class="form-control" id="phone" name="phone"
                                            value="{{ old('phone', auth()->user()->customerInfo->phone ?? '') }}" required>
                                        @error('phone')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Shipping Information -->
                        <div class="bg-white rounded-3 shadow-sm overflow-hidden mb-4">
                            <div class="p-4 border-bottom bg-light">
                                <h5 class="mb-0 fw-semibold text-dark">
                                    <i class="fas fa-shipping-fast me-2 text-success"></i>
                                    Shipping Information
                                </h5>
                            </div>
                            <div class="p-4">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label for="address" class="form-label">Block No & Street Address *</label>
                                        <input type="text" class="form-control" id="address" name="address"
                                            value="{{ old('address', auth()->user()->customerInfo->address ?? '') }}"
                                            placeholder="123 Main Street" required>
                                        @error('address')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="city" class="form-label">City *</label>
                                        <input type="text" class="form-control" id="city" name="city"
                                            value="{{ old('city', auth()->user()->customerInfo->city ?? '') }}" required>
                                        @error('city')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="state" class="form-label">State/Province *</label>
                                        <select class="form-control" id="state" name="state" required>
                                            <option value="">Select State/Province</option>
                                            @php
                                                $states = [
                                                    // 'Abu Dhabi',
                                                    'Dubai',
                                                    'Sharjah',
                                                    'Ajman',
                                                    // 'Umm Al Quwain',
                                                    // 'Ras Al Khaimah',
                                                    // 'Fujairah',
                                                ];
                                                $selectedState = old(
                                                    'state',
                                                    auth()->user()->customerInfo->state ?? '',
                                                );
                                            @endphp
                                            @foreach ($states as $state)
                                                <option value="{{ $state }}"
                                                    {{ $selectedState == $state ? 'selected' : '' }}>
                                                    {{ $state }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('state')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- <div class="col-md-6">
                                        <label for="zip" class="form-label">Zip Code *</label>
                                        <input type="text" class="form-control" id="zip" name="zip"
                                            value="{{ old('zip' , auth()->user()->customerInfo->zip ?? '') }}" required>
                                        @error('zip')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div> --}}
                                    <div class="col-md-6">
                                        <label for="country" class="form-label">Country *</label>
                                        <select class="form-select" id="country" name="country" required>
                                            {{-- <option value="US"
                                                {{ old('country', auth()->user()->customerInfo->country ?? '') == 'US' ? 'selected' : '' }}>
                                                United
                                                States</option>
                                            <option value="CA"
                                                {{ old('country', auth()->user()->customerInfo->country ?? '') == 'CA' ? 'selected' : '' }}>
                                                Canada
                                            </option>
                                            <option value="GB"
                                                {{ old('country', auth()->user()->customerInfo->country ?? '') == 'GB' ? 'selected' : '' }}>
                                                United
                                                Kingdom</option>
                                            <option value="AU"
                                                {{ old('country', auth()->user()->customerInfo->country ?? '') == 'AU' ? 'selected' : '' }}>
                                                Australia</option> --}}
                                            <option value="UAE" selected>
                                                United Arab Emirates</option>
                                        </select>
                                        @error('country')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Method -->
                        <div class="bg-white rounded-3 shadow-sm overflow-hidden mb-4">
                            <div class="p-4 border-bottom bg-light">
                                <h5 class="mb-0 fw-semibold text-dark">
                                    <i class="fas fa-credit-card me-2 text-success"></i>
                                    Payment Method
                                </h5>
                            </div>
                            <div class="p-4">
                                <div class="row g-3">
                                    @if ($config->paymeny_options)
                                        @php
                                            $paymentOptions = explode(',', $config->paymeny_options);
                                        @endphp

                                        @foreach ($paymentOptions as $index => $option)
                                            @php
                                                $option = trim($option);
                                                $optionValue = strtolower(str_replace(' ', '_', $option));

                                                // Set icons and descriptions based on payment method
                                                $icon = '';
                                                $description = '';
                                                $extraIcons = '';

                                                switch (strtolower($option)) {
                                                    case 'cash on delivery':
                                                        $icon = 'fas fa-money-bill-wave fa-2x text-success';
                                                        $description = 'Pay when you receive your order';
                                                        break;
                                                    case 'credit on delivery':
                                                        $icon = 'fas fa-credit-card fa-2x text-primary';
                                                        $description = 'Pay with card when you receive your order';
                                                        break;
                                                    case 'credit card':
                                                    case 'debit card':
                                                    case 'credit/debit card':
                                                        $icon = 'fas fa-credit-card fa-2x text-primary';
                                                        $description = 'Pay securely with your card';
                                                        $extraIcons = '<div class="d-flex gap-2">
                                                            <i class="fab fa-cc-visa fa-2x text-primary"></i>
                                                            <i class="fab fa-cc-mastercard fa-2x text-warning"></i>
                                                        </div>';
                                                        break;
                                                    case 'paypal':
                                                        $icon = 'fab fa-paypal fa-2x text-primary';
                                                        $description = 'Pay with your PayPal account';
                                                        break;
                                                    case 'bank transfer':
                                                        $icon = 'fas fa-university fa-2x text-info';
                                                        $description = 'Transfer directly from your bank';
                                                        break;
                                                    case 'mobile payment':
                                                        $icon = 'fas fa-mobile-alt fa-2x text-success';
                                                        $description = 'Pay using mobile payment apps';
                                                        break;
                                                    default:
                                                        $icon = 'fas fa-credit-card fa-2x text-secondary';
                                                        $description = 'Payment method available';
                                                }
                                            @endphp

                                            <div class="col-12">
                                                <div class="payment-option rounded-3 p-3"
                                                    onclick="selectPayment('{{ $optionValue }}')">
                                                    <div class="d-flex align-items-center">
                                                        <input type="radio" name="payment_method"
                                                            value="{{ $optionValue }}" id="payment_{{ $optionValue }}"
                                                            {{ $index == 0 ? 'checked' : '' }}>
                                                        <label for="payment_{{ $optionValue }}"
                                                            class="flex-grow-1 ms-3">
                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <div>
                                                                    <h6 class="mb-1">{{ $option }}</h6>
                                                                    <p class="text-muted small mb-0">{{ $description }}
                                                                    </p>
                                                                </div>
                                                                <div>
                                                                    @if ($extraIcons)
                                                                        {!! $extraIcons !!}
                                                                    @else
                                                                        <i class="{{ $icon }}"></i>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <!-- Default fallback if no payment options configured -->
                                        <div class="col-12">
                                            <div class="alert alert-warning">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                No payment methods are currently configured. Please contact support.
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                @error('payment_method')
                                    <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Mobile Back Button -->
                        <div class="d-md-none mb-3">
                            <a href="{{ route('cart') }}" class="btn btn-outline-success w-100">
                                <i class="fas fa-arrow-left me-2"></i>
                                Back to Cart
                            </a>
                        </div>
                    </div>

                    <!-- Order Summary Section -->
                    <div class="col-lg-4">
                        <div class="position-sticky" style="top: 12em;">
                            <div class="bg-white rounded-3 shadow-sm overflow-hidden">
                                <div class="p-4 border-bottom bg-light">
                                    <h5 class="mb-0 fw-semibold text-dark">Order Summary</h5>
                                </div>

                                <div class="p-4">
                                    <!-- Order Items -->
                                    <div class="order-items mb-4">
                                        @foreach ($cartItems as $item)
                                            <div class="order-item d-flex align-items-center gap-3 py-3 rounded-2 mb-3">
                                                <div class="product-image-wrapper flex-shrink-0">
                                                    @if ($item->product->image)
                                                        <img src="{{ asset('storage/products/' . $item->product->image) }}"
                                                            class="img-fluid rounded" alt="{{ $item->product->name }}"
                                                            style="width: 60px; height: 60px; object-fit: cover;">
                                                    @else
                                                        <img src="{{ asset('/assets/img/no-product.png') }}"
                                                            alt="{{ $item->product->image }}"
                                                            class="img-fluid rounded" style="width: 60px; height: 60px; object-fit: cover;" >
                                                    @endif
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-1 fw-medium">{{ $item->product->name }}</h6>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="text-muted small">
                                                            Qty: {{ $item->quantity }}
                                                        </span>
                                                        <span class="fw-medium text-success">
                                                            {{ $item->total }}
                                                            @if ($config->currancy)
                                                                {{ $config->currancy }}
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <!-- Summary Details -->
                                    <div class="summary-details mb-4">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">Subtotal</span>
                                            <span class="fw-medium">
                                                {{ number_format($cartItems->sum('total'), 2) }}
                                                @if ($config->currancy)
                                                    {{ $config->currancy }}
                                                @endif
                                            </span>
                                        </div>

                                        <hr class="my-3">

                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <span class="h5 mb-0 fw-bold text-dark">Total</span>
                                            <span class="h4 mb-0 fw-bold text-success">
                                                {{ number_format($cartItems->sum('total'), 2) }}
                                                @if ($config->currancy)
                                                    {{ $config->currancy }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>

                                    @if($config->minimum_spent && $config->minimum_spent > 0)
                                        <div class="mb-2">
                                            Minimum Order amount is {{number_format($config->minimum_spent,2)}} {{$config->currancy ?? ''}}
                                        </div>
                                    @endif
                                    <!-- Place Order Button -->
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-success btn-lg" id="placeOrderBtn">
                                            <i class="fas fa-lock me-2"></i>
                                            Place Order
                                        </button>
                                    </div>

                                    <div class="text-center mt-3">
                                        <small class="text-muted">
                                            <i class="fas fa-shield-alt me-1"></i>
                                            Your payment information is secure
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>

    <script>
        function selectPayment(type) {
            // Remove selected class from all options
            document.querySelectorAll('.payment-option').forEach(option => {
                option.classList.remove('selected');
            });

            // Add selected class to clicked option
            event.currentTarget.classList.add('selected');

            // Check the radio button
            document.querySelector(`input[value="${type}"]`).checked = true;
        }

        // Form submission with loading state
        document.getElementById('checkoutForm').addEventListener('submit', function(e) {
            const submitBtn = document.getElementById('placeOrderBtn');
            submitBtn.classList.add('btn-loading');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="me-2">Processing...</span>';
        });

        // Initialize payment selection
        document.addEventListener('DOMContentLoaded', function() {
            const selectedPayment = document.querySelector('input[name="payment_method"]:checked');
            if (selectedPayment) {
                selectedPayment.closest('.payment-option').classList.add('selected');
            }
        });
    </script>
@endsection