@extends('layouts.master')

@section('title', 'Trew India Pvt Ltd')

@section('content')

    <main class="main"> 

        <!-- breadcrumb -->
        <div class="site-breadcrumb">
            <div class="site-breadcrumb-bg" style="background:#d8f5fd"></div>
            <div class="container">
                <div class="site-breadcrumb-wrap">
                    <h4 class="breadcrumb-title">Product Checkout</h4>
                    <ul class="breadcrumb-menu">
                        <li><a href="{{ url('/') }}"><i class="far fa-home"></i> Home</a></li>
                        <li class="active">Product Checkout</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- breadcrumb end -->

        <!-- shop checkout -->
        <div class="shop-checkout py-5">
            <div class="container-fluid">
                <div class="shop-checkout-wrap">
                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <div class="shop-checkout-form p-4 shadow rounded border">

                                {{-- Show success / error messages --}}
                                @if(session('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif
                                @if($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach($errors->all() as $e)
                                                <li>{{ $e }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <form action="{{ route('products.checkout.submit') }}" method="POST">
                                    @csrf

                                    <h4 class="mb-4">Product Details</h4>
                                    <div class="row g-3">

                                        {{-- Hidden product id & indices (so server knows which product & selections) --}}
                                        <input type="hidden" name="product_id" value="{{ old('product_id', $product->id ?? '') }}">
                                        <input type="hidden" name="volume_index" id="volume_index" value="{{ old('volume_index', $selectedVolumeIndex ?? '') }}">
                                        <input type="hidden" name="fragrance_index" id="fragrance_index" value="{{ old('fragrance_index', $selectedFragranceIndex ?? '') }}">

                                        <div class="col-lg-3">
                                            <label class="form-label">Product Name</label>
                                            <input type="text" class="form-control" name="product_name"
                                                   placeholder="Enter Product Name"
                                                   value="{{ old('product_name', $product->product_name ?? '') }}" required readonly>
                                            {{-- readonly because product selected from product page; remove readonly if you want editable --}}
                                        </div>

                                        <div class="col-lg-3">
                                            <label class="form-label">Product Quantity (Liters)</label>
                                            @php
                                                // Determine liter: prefer old(), then selected volume's volume text, then query volume name, then empty
                                                $pref_liter = old('product_liter');
                                                if (!$pref_liter) {
                                                    if (isset($selectedVolumeIndex) && isset($product->product_volumes[$selectedVolumeIndex])) {
                                                        $pref_liter = $product->product_volumes[$selectedVolumeIndex]['volume'] ?? '';
                                                    } elseif (!empty($selectedVolumeName)) {
                                                        $pref_liter = $selectedVolumeName;
                                                    } else {
                                                        $pref_liter = '';
                                                    }
                                                }
                                            @endphp
                                            <input type="text" class="form-control" name="product_liter"
                                                   placeholder="e.g., 5"
                                                   value="{{ $pref_liter }}" required>
                                            {{-- note: volume could be non-numeric (e.g., "1L") so using text keeps fidelity --}}
                                        </div>

                                        <div class="col-lg-3">
                                            <label class="form-label">Product Fragrance</label>
                                            @php
                                                $pref_frag = old('product_fragrance');
                                                if (!$pref_frag) {
                                                    if (isset($selectedFragranceIndex) && isset($product->fragrances[$selectedFragranceIndex])) {
                                                        $pref_frag = $product->fragrances[$selectedFragranceIndex]['name'] ?? '';
                                                    } elseif (!empty($selectedFragranceName)) {
                                                        $pref_frag = $selectedFragranceName;
                                                    } else {
                                                        $pref_frag = '';
                                                    }
                                                }
                                            @endphp
                                            <input type="text" class="form-control" name="product_fragrance"
                                                   placeholder="e.g., Lavender"
                                                   value="{{ $pref_frag }}" required>
                                        </div>

                                        <div class="col-lg-3">
                                            <label class="form-label">Product Quantity (No. of Items)</label>
                                            <input type="number" class="form-control" name="product_quantity"
                                                   placeholder="e.g., 2" min="1"
                                                   value="{{ old('product_quantity', $selectedQuantity ?? 1) }}" required>
                                        </div>
                                    </div>

                                    <h4 class="mt-4 mb-3">Customer Information</h4>
                                    <div class="row g-3">
                                        <div class="col-lg-4">
                                            <label class="form-label">Customer Name</label>
                                            <input type="text" class="form-control" name="customer_name"
                                                placeholder="Enter Full Name"
                                                oninput="this.value=this.value.replace(/[^a-zA-Z\s]/g,'')"
                                                value="{{ old('customer_name') }}" required>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label">Email</label>
                                            <input type="email" class="form-control" name="email"
                                                placeholder="Enter Email Address"
                                                value="{{ old('email') }}" required>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label">Phone</label>
                                            <input type="tel" class="form-control" name="phone"
                                                placeholder="Enter 10-digit Phone Number" maxlength="10"
                                                oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                                                value="{{ old('phone') }}" required>
                                        </div>
                                        <div class="col-lg-12">
                                            <label class="form-label">Address</label>
                                            <textarea class="form-control" name="address" placeholder="Enter Full Address" rows="2" required>{{ old('address') }}</textarea>
                                        </div>
                                    </div>

                                    <h4 class="mt-4 mb-3">Location</h4>
                                    <div class="row g-3">
                                        <div class="col-lg-3">
                                            <label class="form-label">Country</label>
                                            <select class="form-control" name="country" required>
                                                <option value="">Select Country</option>
                                                <option value="IN" {{ old('country') == 'IN' ? 'selected' : '' }}>India</option>
                                                <option value="US" {{ old('country') == 'US' ? 'selected' : '' }}>United States</option>
                                                <option value="UK" {{ old('country') == 'UK' ? 'selected' : '' }}>United Kingdom</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-3">
                                            <label class="form-label">City</label>
                                            <input type="text" class="form-control" name="city" placeholder="City"
                                                value="{{ old('city') }}" required>
                                        </div>
                                        <div class="col-lg-3">
                                            <label class="form-label">State</label>
                                            <input type="text" class="form-control" name="state" placeholder="State"
                                                value="{{ old('state') }}" required>
                                        </div>
                                        <div class="col-lg-3">
                                            <label class="form-label">Post Code</label>
                                            <input type="text" class="form-control" name="post_code"
                                                placeholder="Post Code" value="{{ old('post_code') }}" required>
                                        </div>
                                    </div>

                                    <div class="mt-4 text-end">
                                        <button type="submit" class="theme-btn px-4 py-2">
                                            Submit <i class="fas fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </main>

@endsection