@extends('layout')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    /* Global Reset for easier responsiveness */
    * {
        box-sizing: border-box;
    }

    #checkout-page-wrapper {
        padding: 60px 20px;
        background-color: #ffffff;
        font-family: 'Inter', sans-serif;
        color: #333;
    }

    .checkout-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.5fr 1fr; /* Desktop: Form takes more space */
        gap: 40px;
        align-items: start;
    }

    /* Billing Form Styling */
    .checkout-form-section h2 {
        font-size: 24px;
        margin-bottom: 30px;
        font-weight: 700;
    }

    .checkout-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns by default */
        gap: 20px;
    }

    /* Helper class to span full width of the grid */
    .full-width { 
        grid-column: span 2; 
    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 5px; /* Spacing handled by grid gap mostly */
    }

    .input-group label {
        font-size: 14px;
        font-weight: 600;
        color: #444;
    }

    .input-group input, .input-group select {
        width: 100%; /* Ensure inputs fill their grid cell */
        padding: 12px 15px;
        border: 1px solid #e2bc8a;
        border-radius: 8px;
        font-size: 15px; /* 15px+ prevents iOS auto-zoom on focus */
        outline: none;
        transition: border-color 0.3s ease;
    }
    
    .input-group input:focus, .input-group select:focus {
        border-color: #d4af6d;
        box-shadow: 0 0 0 3px rgba(212, 175, 109, 0.1);
    }

    /* Verify Button */
    .verify-btn-container {
        grid-column: span 2;
        display: flex;
        justify-content: flex-end; 
        margin-top: 10px;
    }

    .checkout-verify-btn {
        background: #00569d;
        color: white;
        padding: 12px 40px;
        border-radius: 30px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.3s;
        font-size: 14px;
    }
    
    .checkout-verify-btn:hover {
        background: #004480;
    }

    /* Order Summary Styling */
    .checkout-summary-card {
        border: 1px solid #e2bc8a;
        border-radius: 12px;
        padding: 30px;
        background-color: #fafafa; /* Slight contrast */
        position: sticky; /* Keeps summary in view on desktop */
        top: 20px;
    }

    .checkout-summary-card h2 {
        font-size: 20px;
        margin-top: 0;
        margin-bottom: 25px;
        border-bottom: 1px solid #e2bc8a;
        padding-bottom: 15px;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        font-size: 15px;
        color: #555;
    }

    .summary-row.total-row {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
        font-weight: 700;
        font-size: 20px;
        color: #000;
    }

    .place-order-btn {
        width: 100%;
        background: #d4af6d;
        color: white;
        padding: 16px;
        border-radius: 30px;
        border: none;
        font-weight: 600;
        font-size: 16px;
        margin-top: 25px;
        cursor: pointer;
        transition: background 0.3s;
        box-shadow: 0 4px 15px rgba(212, 175, 109, 0.4);
    }
    
    .place-order-btn:hover {
        background: #c59f5b;
    }

    /* --- MODAL STYLING --- */
    .otp-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        backdrop-filter: blur(5px);
        padding: 20px; /* Prevents edge touching on mobile */
    }

    .otp-modal-content {
        background: white;
        padding: 40px;
        border-radius: 20px;
        width: 100%;
        max-width: 450px;
        text-align: center;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        position: relative;
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .otp-modal-content h3 {
        font-family: 'Libre Baskerville', serif;
        font-size: 24px;
        margin-bottom: 15px;
        margin-top: 0;
    }

    .otp-modal-content p {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .otp-inputs {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: 30px;
    }

    .otp-field {
        width: 50px;
        height: 60px;
        border: 1px solid #e2bc8a;
        border-radius: 10px;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        outline: none;
        background: #fff;
    }

    .otp-field:focus {
        border-color: #00569d;
        background: #f0f8ff;
    }

    .verify-otp-btn {
        background: #d4af6d;
        color: white;
        width: 100%;
        padding: 14px;
        border-radius: 30px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        font-size: 16px;
    }

    /* --- RESPONSIVE MEDIA QUERIES --- */

    /* Tablet and Small Laptops (Max width 992px) */
    @media (max-width: 992px) {
        .checkout-container {
            grid-template-columns: 1fr; /* Stack layout: Form top, Summary bottom */
            gap: 30px;
        }

        .checkout-summary-card {
            position: static; /* Remove sticky on mobile/tablet */
            order: 2; /* Ensure it stays at bottom, or use -1 to put at top */
        }
        
        .verify-btn-container {
            justify-content: center; /* Center button on smaller screens */
        }
    }

    /* Mobile Phones (Max width 576px) */
    @media (max-width: 576px) {
        #checkout-page-wrapper {
            padding: 30px 15px;
        }

        /* Stack form fields (First Name / Last Name) */
        .checkout-grid {
            grid-template-columns: 1fr; 
            gap: 15px;
        }

        /* Reset the full-width span to 1 because we only have 1 column now */
        .full-width {
            grid-column: span 1;
        }
        
        .verify-btn-container {
            grid-column: span 1;
        }

        .checkout-verify-btn {
            width: 100%; /* Full width button on mobile */
        }
        
        /* Modal Adjustments for small screens */
        .otp-modal-content {
            padding: 30px 20px;
        }
        
        .otp-inputs {
            gap: 6px;
        }
        
        .otp-field {
            width: 40px; /* Smaller inputs */
            height: 50px;
            font-size: 18px;
        }
    }
</style>

<div id="checkout-page-wrapper">
    <div class="checkout-container">
        
        <div class="checkout-form-section">
            <h2>Billing Information</h2>
            <div class="checkout-grid">
                <div class="input-group">
                    <label>First name</label>
                    <input type="text" placeholder="Your first name">
                </div>
                <div class="input-group">
                    <label>Last name</label>
                    <input type="text" placeholder="Your last name">
                </div>
                <div class="input-group full-width">
                    <label>Street Address</label>
                    <input type="text" placeholder="Enter Your Street Address">
                </div>
                <div class="input-group">
                    <label>State</label>
                    <select>
                        <option>Select</option>
                        <option>Kerala</option>
                        <option>Karnataka</option>
                    </select>
                </div>
                <div class="input-group">
                    <label>District</label>
                    <select>
                        <option>Select</option>
                        <option>District A</option>
                    </select>
                </div>
                <div class="input-group">
                    <label>Email</label>
                    <input type="email" placeholder="Email Address">
                </div>
                <div class="input-group">
                    <label>Phone</label>
                    <input type="text" placeholder="Phone number">
                </div>

                <div class="verify-btn-container">
                    <button class="checkout-verify-btn" onclick="openOtpModal()">Verify No</button>
                </div>
            </div>
        </div>

        <div class="checkout-summary-card">
            <h2>Order Summary</h2>
            <div class="summary-row">
                <span>Subtotal:</span>
                <span>₹2000.00</span>
            </div>
            <div class="summary-row">
                <span>Discount:</span>
                <span>-1000</span>
            </div>
            <div class="summary-row">
                <span>Tax:</span>
                <span>₹50.00</span>
            </div>
            <div class="summary-row">
                <span>Shipping:</span>
                <span>₹25.00</span>
            </div>
            <div class="summary-row total-row">
                <span>Total:</span>
                <span>₹1084.00</span>
            </div>
            <button class="place-order-btn">Place Order</button>
        </div>

    </div>
</div>

<div class="otp-modal-overlay" id="otpModal">
    <div class="otp-modal-content">
        <h3>Verify Your Number</h3>
        <p>Enter the 5-digit code sent to <strong>+91 813-8172-5977</strong></p>
        
        <div class="otp-inputs">
            <input type="tel" class="otp-field" maxlength="1" oninput="moveNext(this)">
            <input type="tel" class="otp-field" maxlength="1" oninput="moveNext(this)">
            <input type="tel" class="otp-field" maxlength="1" oninput="moveNext(this)">
            <input type="tel" class="otp-field" maxlength="1" oninput="moveNext(this)">
            <input type="tel" class="otp-field" maxlength="1" oninput="moveNext(this)">
        </div>

        <button class="verify-otp-btn" onclick="closeOtpModal()">Verify OTP</button>
    </div>
</div>

<script>
    const modal = document.getElementById('otpModal');

    function openOtpModal() {
        modal.style.display = 'flex';
        // Focus first input
        setTimeout(() => {
            const firstInput = document.querySelector('.otp-field');
            if(firstInput) firstInput.focus();
        }, 100);
    }

    function closeOtpModal() {
        modal.style.display = 'none';
    }

    // Auto-focus next input field
    function moveNext(current) {
        if (current.value.length >= 1) {
            if(current.nextElementSibling) {
                current.nextElementSibling.focus();
            }
        }
    }

    // Handle backspace (User experience improvement)
    document.querySelectorAll('.otp-field').forEach(input => {
        input.addEventListener('keydown', (e) => {
            if (e.key === 'Backspace' && input.value.length === 0) {
                if (input.previousElementSibling) {
                    input.previousElementSibling.focus();
                }
            }
        });
    });

    // Close modal if user clicks outside the box
    window.onclick = function(event) {
        if (event.target == modal) {
            closeOtpModal();
        }
    }
</script>
@endsection