@extends('layouts.frontend')

@section('title', 'চেকআউট - ' . \App\Models\Setting::get('site_name', config('app.name')))

@section('content')
<div class="checkout-page py-6" style="background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); min-height: calc(100vh - 200px);">
    <div class="container mx-auto px-4">
        <form action="{{ route('checkout.process') }}" method="POST" x-data="checkoutForm()">
            @csrf
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Left: Customer Info Form -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2" style="color: var(--primary-color);">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        আপনার অর্ডার নিশ্চিত করতে, তথ্য পূরণ করুন
                    </h2>
                    
                    <div class="space-y-4">
                        <!-- Name -->
                        <div>
                            <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                আপনার নাম লিখুন *
                            </label>
                            <input type="text" name="name" value="{{ old('name', $customer->name ?? '') }}" required 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 @error('name') border-red-500 @enderror">
                            @error('name')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Phone -->
                        <div>
                            <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                                মোবাইল নম্বর লিখুন *
                            </label>
                            <input type="tel" name="phone" value="{{ old('phone', $customer->phone ?? '') }}" required 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 @error('phone') border-red-500 @enderror">
                            @error('phone')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Address -->
                        <div>
                            <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                ডেলিভারির ঠিকানা লিখুন *
                            </label>
                            <input type="text" name="address" value="{{ old('address', $customer->address ?? '') }}" required 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 @error('address') border-red-500 @enderror">
                            @error('address')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Delivery Area -->
                        <div>
                            <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                ডেলিভারি এরিয়া সিলেক্ট করুন *
                            </label>
                            <select name="shipping_area" x-model="shippingArea" @change="updateShipping()" required 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 @error('shipping_area') border-red-500 @enderror">
                                @foreach($shippingCharges as $charge)
                                <option value="{{ $charge->id }}" data-charge="{{ $charge->charge ?? $charge->amount ?? 0 }}">{{ $charge->name ?? $charge->area ?? 'ঢাকা সিটির বাইরে' }} - ৳{{ number_format($charge->charge ?? $charge->amount ?? 0, 0) }} টাকা</option>
                                @endforeach
                            </select>
                            @error('shipping_area')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Payment Method -->
                        <div>
                            <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                                Payment Method (optional)
                            </label>
                            <div class="flex flex-wrap gap-4">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="radio" name="payment_method" value="cod" checked class="w-4 h-4 text-pink-600 focus:ring-pink-500">
                                    <span class="text-sm">Cash On Delivery</span>
                                </label>
                                @foreach($paymentGateways as $gateway)
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="radio" name="payment_method" value="{{ $gateway->code }}" class="w-4 h-4 text-pink-600 focus:ring-pink-500">
                                    <span class="text-sm">{{ $gateway->name }}</span>
                                </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" class="w-full py-4 text-white rounded-lg font-bold text-lg transition flex items-center justify-center gap-2" style="background: var(--primary-color);">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                            অর্ডার নিশ্চিত করুন
                        </button>
                    </div>
                </div>

                <!-- Right: Order Summary -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-lg font-bold text-gray-900 mb-5 uppercase tracking-wide" style="color: var(--primary-color);">ORDER INFORMATION</h2>
                    
                    <!-- Cart Items Table -->
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b">
                                    <th class="text-left py-2 text-sm font-medium text-gray-600">Delete</th>
                                    <th class="text-left py-2 text-sm font-medium text-gray-600">Product</th>
                                    <th class="text-center py-2 text-sm font-medium text-gray-600">Quantity</th>
                                    <th class="text-right py-2 text-sm font-medium text-gray-600">Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($cart as $key => $item)
                                <tr class="border-b">
                                    <td class="py-3">
                                        <button type="button" onclick="removeCartItem('{{ $key }}')" class="w-8 h-8 bg-red-500 text-white rounded flex items-center justify-center hover:bg-red-600 transition">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        </button>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex items-center gap-2">
                                            <img src="{{ asset('storage/' . ($item['image'] ?? 'products/placeholder.jpg')) }}" alt="{{ $item['name'] }}" class="w-10 h-10 object-cover rounded">
                                            <span class="text-sm text-gray-700 line-clamp-1">{{ Str::limit($item['name'], 25) }}</span>
                                        </div>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex items-center justify-center gap-1">
                                            <span class="w-8 text-center text-sm">{{ $item['quantity'] }}</span>
                                        </div>
                                    </td>
                                    <td class="py-3 text-right font-medium" style="color: var(--primary-color);">৳ {{ number_format($item['price'] * $item['quantity'], 0) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Price Summary -->
                    <div class="mt-4 space-y-2 border-t pt-4">
                        <div class="flex justify-between text-gray-600">
                            <span>Total</span>
                            <span>৳ {{ number_format($subtotal, 0) }}</span>
                        </div>
                        <div class="flex justify-between text-gray-600">
                            <span>Delivery charges</span>
                            <span x-text="'৳ ' + shipping">৳ 0</span>
                        </div>
                        <div class="flex justify-between text-lg font-bold text-gray-900 pt-2 border-t">
                            <span>Total price</span>
                            <span style="color: var(--primary-color);" x-text="'৳ ' + total">৳ {{ number_format($subtotal, 0) }}</span>
                        </div>
                    </div>

                    <!-- Coupon -->
                    <div class="mt-6 pt-4 border-t">
                        <p class="text-sm text-gray-600 mb-2">Have a coupon?</p>
                        @if($appliedCoupon)
                        <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
                            <span class="text-green-700 font-medium">{{ $appliedCoupon['code'] }}</span>
                            <button type="button" onclick="removeCoupon()" class="text-red-500 hover:text-red-700 text-sm">Remove</button>
                        </div>
                        @else
                        <div class="flex gap-2">
                            <input type="text" id="coupon_code" placeholder="Enter coupon code" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500">
                        </div>
                        <button type="button" onclick="applyCoupon()" class="mt-2 px-6 py-2 text-white rounded-lg font-medium" style="background: var(--primary-color);">Apply Coupon</button>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
// Incomplete Orders Tracking System
let incompleteOrderTimer = null;
let incompleteOrderKey = localStorage.getItem('incomplete_order_key') || '';
let lastSavedData = null;
let formData = {};
let cartData = @json($cart);

function checkoutForm() {
    return {
        shippingArea: '{{ $shippingCharges->first()->id ?? '' }}',
        shipping: {{ $shippingCharges->first()->charge ?? $shippingCharges->first()->amount ?? 0 }},
        subtotal: {{ $subtotal }},
        discount: {{ $discount }},
        get total() {
            return this.subtotal - this.discount + this.shipping;
        },
        updateShipping() {
            const select = document.querySelector('select[name="shipping_area"]');
            const option = select.options[select.selectedIndex];
            this.shipping = parseFloat(option.dataset.charge) || 0;
            
            // Update incomplete order with new shipping
            formData.shipping_charge = this.shipping;
            scheduleIncompleteOrderUpdate();
        }
    }
}

// Initialize incomplete order tracking
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initializing incomplete order tracking...');
    
    // Track all form fields
    const fields = ['name', 'phone', 'address', 'shipping_area'];
    fields.forEach(fieldName => {
        const field = document.querySelector(`[name="${fieldName}"]`);
        if (field) {
            // Store initial value
            formData[fieldName] = field.value || '';
            
            // Add event listeners
            field.addEventListener('input', function() {
                formData[fieldName] = this.value;
                scheduleIncompleteOrderUpdate();
            });
            
            field.addEventListener('change', function() {
                formData[fieldName] = this.value;
                scheduleIncompleteOrderUpdate();
            });
        }
    });
    
    // Track payment method
    document.querySelectorAll('[name="payment_method"]').forEach(radio => {
        radio.addEventListener('change', function() {
            formData.payment_method = this.value;
            scheduleIncompleteOrderUpdate();
        });
    });
    
    // Initial capture after 2 seconds
    setTimeout(() => {
        captureIncompleteOrder();
    }, 2000);
});

function scheduleIncompleteOrderUpdate() {
    clearTimeout(incompleteOrderTimer);
    incompleteOrderTimer = setTimeout(() => {
        captureIncompleteOrder();
    }, 1000); // Save after 1 second of inactivity
}

function captureIncompleteOrder() {
    // Only capture if we have at least a phone number
    if (!formData.phone || formData.phone.length < 11) {
        console.log('Phone number not valid yet, skipping capture');
        return;
    }
    
    // Prepare data
    const data = {
        name: formData.name || '',
        phone: formData.phone || '',
        address: formData.address || '',
        shipping_area: formData.shipping_area || '',
        shipping_charge: formData.shipping_charge || {{ $shippingCharges->first()->charge ?? $shippingCharges->first()->amount ?? 0 }},
        payment_method: formData.payment_method || 'cod',
        cart: cartData,
        subtotal: {{ $subtotal }},
        order_key: incompleteOrderKey
    };
    
    // Check if data has changed
    const dataString = JSON.stringify(data);
    if (dataString === lastSavedData) {
        console.log('No changes detected, skipping save');
        return;
    }
    
    console.log('Saving incomplete order...', data);
    
    // Save to server
    fetch('{{ route('incomplete-orders.capture') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            console.log('Incomplete order saved successfully');
            lastSavedData = dataString;
            
            // Store order key for future updates
            if (result.order_key) {
                incompleteOrderKey = result.order_key;
                localStorage.setItem('incomplete_order_key', incompleteOrderKey);
            }
        } else {
            console.error('Failed to save incomplete order:', result.message);
        }
    })
    .catch(error => {
        console.error('Error saving incomplete order:', error);
    });
}

// Delete incomplete order when order is placed
function deleteIncompleteOrder() {
    if (!incompleteOrderKey) return;
    
    fetch('{{ route('incomplete-orders.delete') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ order_key: incompleteOrderKey })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            console.log('Incomplete order deleted successfully');
            localStorage.removeItem('incomplete_order_key');
            incompleteOrderKey = '';
        }
    })
    .catch(error => {
        console.error('Error deleting incomplete order:', error);
    });
}

// Handle checkout form submission via AJAX
document.addEventListener('DOMContentLoaded', function() {
    const checkoutForm = document.querySelector('form[action="{{ route('checkout.process') }}"]');
    if (checkoutForm) {
        checkoutForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Delete incomplete order before submitting
            deleteIncompleteOrder();
            
            const submitBtn = checkoutForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<svg class="animate-spin w-5 h-5 inline mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> প্রসেসিং...';
            
            const formData = new FormData(checkoutForm);
            
            fetch(checkoutForm.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                    return;
                }
                return response.json().then(data => ({ status: response.status, data }));
            })
            .then(result => {
                if (!result) return;
                
                const { status, data } = result;
                
                if (status === 422 && data.duplicate) {
                    // Show duplicate order popup alert
                    showDuplicateAlert(data.message);
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                } else if (data.redirect) {
                    window.location.href = data.redirect;
                } else if (data.error) {
                    alert(data.error);
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // If it's a redirect (HTML response), submit normally
                checkoutForm.submit();
            });
        });
    }
});

function showDuplicateAlert(message) {
    // Create modal overlay
    const overlay = document.createElement('div');
    overlay.className = 'fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4';
    overlay.id = 'duplicateAlertModal';
    
    overlay.innerHTML = `
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full p-6 text-center">
            <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-3">অর্ডার সতর্কতা</h3>
            <p class="text-gray-600 mb-6">${message}</p>
            <button onclick="closeDuplicateAlert()" class="w-full py-3 text-white rounded-xl font-bold" style="background: var(--primary-color);">
                ঠিক আছে
            </button>
        </div>
    `;
    
    document.body.appendChild(overlay);
    document.body.style.overflow = 'hidden';
}

function closeDuplicateAlert() {
    const modal = document.getElementById('duplicateAlertModal');
    if (modal) {
        modal.remove();
        document.body.style.overflow = '';
    }
}

function removeCartItem(key) {
    if (!confirm('Remove this item from cart?')) return;
    
    fetch('/cart/' + encodeURIComponent(key), {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        // Reload page regardless of response to update cart
        window.location.reload();
    })
    .catch(error => {
        console.error('Error:', error);
        window.location.reload();
    });
}

function removeCoupon() {
    fetch('{{ route('cart.coupon.remove') }}', {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        window.location.reload();
    })
    .catch(error => {
        console.error('Error:', error);
        window.location.reload();
    });
}

function applyCoupon() {
    const code = document.getElementById('coupon_code').value;
    if (!code) return;
    
    fetch('{{ route('cart.coupon.apply') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ coupon_code: code })
    })
    .then(response => {
        window.location.reload();
    })
    .catch(error => {
        console.error('Error:', error);
        window.location.reload();
    });
}
</script>
@endpush
@endsection