@extends('layout.app')
@section('content')

    <!-- ========== Breadcrumb ========== -->
    <div class="container py-12">
        <div class="breadcrumb">
            <ul>
                <li>
                    <a href='/'><span class="inline-flex items-center justify-center"><i class="hgi hgi-stroke hgi-home-01 text-2xl leading-6"></i></span>Home</a>
                </li>
                <li class="text-light-disabled-text">&#8226;</li>
                <li><span class="text-sm leading-[22px]">Checkout</span></li>
            </ul>
        </div>
    </div>

    <!-- ========== Checkout ========== -->
    <div class="pb-[70px]">
        <div class="container">

            {{-- Global error bag --}}
            @if($errors->any())
                <div class="mb-6 bg-red-50 border border-red-200 rounded-2xl px-6 py-4">
                    <ul class="flex flex-col gap-y-1 text-sm " style="color: red; font-weight: bold">
                        @foreach($errors->all() as $error)
                            <li>• {{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form id="checkout-form" method="POST" action="{{ route('checkout.place') }}">
                @csrf
                <div class="grid grid-cols-12 gap-x-6 gap-y-6">

                    {{-- ===== LEFT ===== --}}
                    <div class="xl:col-span-8 col-span-12">
                        <div class="flex flex-col gap-y-6">

                            {{-- Shipping Address --}}
                            <div class="border border-gray-300 rounded-2xl">
                                <div class="py-4 px-6 bg-gray-200 rounded-t-2xl">
                                    <h5>Shipping Address</h5>
                                </div>
                                <div class="md:px-6 px-3 py-6">
                                    <div class="flex flex-col gap-y-6">

                                        {{-- Name row --}}
                                        <div class="grid xl:grid-cols-2 md:grid-cols-2 grid-cols-1 md:gap-x-4 gap-y-6">
                                            <div class="relative w-full">
                                                <input type="text" id="first_name" name="first_name"
                                                       value="{{ old('first_name') }}" required
                                                       class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none @error('first_name') border-red-400 @enderror"
                                                       placeholder="First Name"/>
                                                <label for="first_name" class="float-label">First Name <span class="text-red-500">*</span></label>
{{--                                                @error('first_name')<p class="text-xs text-red-500 mt-1 pl-4">{{ $message }}</p>@enderror--}}
                                            </div>
                                            <div class="relative w-full">
                                                <input type="text" id="last_name" name="last_name"
                                                       value="{{ old('last_name') }}" required
                                                       class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none @error('last_name') border-red-400 @enderror"
                                                       placeholder="Last Name"/>
                                                <label for="last_name" class="float-label">Last Name <span class="text-red-500">*</span></label>
{{--                                                @error('last_name')<p class="text-xs text-red-500 mt-1 pl-4">{{ $message }}</p>@enderror--}}
                                            </div>
                                        </div>

                                        {{-- Phone + Email --}}
                                        <div class="grid xl:grid-cols-2 md:grid-cols-2 grid-cols-1 md:gap-x-4 gap-y-6">
                                            <div class="relative w-full">
                                                <input type="tel" id="phone" name="phone"
                                                       value="{{ old('phone') }}" required
                                                       class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none @error('phone') border-red-400 @enderror"
                                                       placeholder="Phone Number"/>
                                                <label for="phone" class="float-label">Phone Number <span class="text-red-500">*</span></label>
{{--                                                @error('phone')<p class="text-xs text-red-500 mt-1 pl-4">{{ $message }}</p>@enderror--}}
                                            </div>
                                            <div class="relative w-full">
                                                <input type="email" id="email" name="email"
                                                       value="{{ old('email') }}"
                                                       class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                                       placeholder="Email Address (Optional)"/>
                                                <label for="email" class="float-label">Email Address (Optional)</label>
                                            </div>
                                        </div>

                                        {{-- Country + City + State + Zip --}}
                                        <div class="grid xl:grid-cols-2 md:grid-cols-2 grid-cols-1 md:gap-x-4 gap-y-6">
                                            <div class="relative w-full">
                                                <select id="country" name="country" required
                                                        class="address-select label @error('country') border-red-400 @enderror">
                                                    <option value="">Select Country</option>
                                                    @foreach([
                                                        'United States','Canada','United Kingdom','Australia',
                                                        'New Zealand'
                                                    ] as $c)
                                                        <option value="{{ $c }}" {{ old('country') === $c ? 'selected' : '' }}>{{ $c }}</option>
                                                    @endforeach
                                                </select>
                                                <label for="country" class="nice-select-label">Country / Region <span class="text-red-500">*</span></label>
{{--                                                @error('country')<p class="text-xs text-red-500 mt-1 pl-4">{{ $message }}</p>@enderror--}}
                                            </div>
                                            <div class="relative w-full">
                                                <input type="text" id="city" name="city" required
                                                       value="{{ old('city') }}"
                                                       class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none @error('city') border-red-400 @enderror"
                                                       placeholder="City"/>
                                                <label for="city" class="float-label">City <span class="text-red-500">*</span></label>
{{--                                                @error('city')<p class="text-xs text-red-500 mt-1 pl-4">{{ $message }}</p>@enderror--}}
                                            </div>
                                        </div>

                                        <div class="grid xl:grid-cols-2 md:grid-cols-2 grid-cols-1 md:gap-x-4 gap-y-6">
                                            <div class="relative w-full">
                                                <input type="text" id="state" name="state" required
                                                       value="{{ old('state') }}"
                                                       class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                                       placeholder="State"/>
                                                <label for="state" class="float-label">State<span class="text-red-500">*</span></label>
                                            </div>
                                            <div class="relative w-full">
                                                <input type="text" id="zip_code" name="zip_code"
                                                       value="{{ old('zip_code') }}"
                                                       class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                                       placeholder="Zip Code"/>
                                                <label for="zip_code" class="float-label">Zip Code</label>
                                            </div>
                                        </div>

                                        {{-- Address line --}}
                                        <div class="relative w-full">
                                        <textarea id="address_line" name="address_line" rows="4" required
                                                  class="form-control peer input-group medium rounded-[20px] ps-4 pe-6 resize-none placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                                  placeholder="Apartments, suite, unit, etc (Optional)">{{ old('address_line') }}</textarea>
                                            <label for="address_line" class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-focus:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-6 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1">
                                                Apartments, suite, unit, etc<span class="text-red-500">*</span>
                                            </label>
                                        </div>

                                        {{-- Address Type --}}
                                        <div class="pb-6 border-b border-b-gray-300">
                                            <p class="font-semibold text-light-disabled-text mb-2">Address Type</p>
                                            <div class="flex flex-col lg:flex-row gap-y-4 gap-x-4">
                                                @foreach(['home' => 'Home Address', 'office' => 'Office Address', 'other' => 'Others'] as $val => $label)
                                                    <label class="flex items-center cursor-pointer">
                                                    <span class="has-[input:checked]:hover:bg-[#00AB55]/8 flex items-center justify-center w-10 h-10 bg-transparent rounded-full hover:bg-[#919EAB]/8 transition-colors">
                                                        <span class="relative inline-flex w-5 h-5 items-center justify-center">
                                                            <input type="radio" name="address_type" value="{{ $val }}"
                                                                   {{ old('address_type', 'home') === $val ? 'checked' : '' }}
                                                                   class="peer appearance-none w-full h-full border-2 focus:outline-none checked:border-primary border-gray-300 rounded-full bg-white transition-all"/>
                                                            <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-primary opacity-0 scale-0 peer-checked:opacity-100 peer-checked:scale-100 transition-all"></span>
                                                        </span>
                                                    </span>
                                                        <span class="text-light-primary-text text-sm leading-[22px]">{{ $label }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>

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

                            {{-- Payment --}}
                            <div class="border border-gray-300 rounded-2xl">
                                <div class="py-4 px-6 bg-gray-200 rounded-t-2xl">
                                    <h5 class="text-light-primary-text">Payment Method</h5>
                                </div>
                                <div class="md:px-6 px-3 py-6">
                                    <div class="payment-methods flex flex-col gap-y-4">

                                        {{-- Stripe --}}
                                        <label class="border border-gray-300 rounded-xl px-4 py-4 cursor-pointer has-[input:checked]:border-primary has-[input:checked]:bg-primary/5 transition-all">
                                            <div class="flex items-center gap-x-3">
                                            <span class="flex items-center justify-center w-9 h-9 bg-transparent rounded-full hover:bg-[#919EAB]/8 transition-colors">
                                                <span class="relative inline-flex w-5 h-5 items-center justify-center">
                                                    <input type="radio" name="payment_method" value="stripe"
                                                           {{ old('payment_method', 'stripe') === 'stripe' ? 'checked' : '' }}
                                                           class="peer appearance-none w-full h-full border-2 focus:outline-none checked:border-primary border-gray-300 rounded-full bg-white transition-all"/>
                                                    <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-primary opacity-0 scale-0 peer-checked:opacity-100 peer-checked:scale-100 transition-all"></span>
                                                </span>
                                            </span>
                                                <span class="text-light-primary-text font-semibold flex-1">Credit / Debit Card</span>
                                                {{-- Stripe SVG logo --}}
                                               <img src="{{asset('assets/images/stripe.webp')}}" width="100px">
                                            </div>
                                            <p class="text-sm text-gray-500 mt-2 pl-12">Pay securely with your credit or debit card via Stripe.</p>
                                        </label>

                                        {{-- COD --}}
                                        <label class="border border-gray-300 rounded-xl px-4 py-4 cursor-pointer has-[input:checked]:border-primary has-[input:checked]:bg-primary/5 transition-all">
                                            <div class="flex items-center gap-x-3">
                                            <span class="flex items-center justify-center w-9 h-9 bg-transparent rounded-full hover:bg-[#919EAB]/8 transition-colors">
                                                <span class="relative inline-flex w-5 h-5 items-center justify-center">
                                                    <input type="radio" name="payment_method" value="cod"
                                                           {{ old('payment_method') === 'cod' ? 'checked' : '' }}
                                                           class="peer appearance-none w-full h-full border-2 focus:outline-none checked:border-primary border-gray-300 rounded-full bg-white transition-all"/>
                                                    <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-primary opacity-0 scale-0 peer-checked:opacity-100 peer-checked:scale-100 transition-all"></span>
                                                </span>
                                            </span>
                                                <span class="text-light-primary-text font-semibold flex-1">Cash on Delivery</span>
                                                <i class="hgi hgi-stroke hgi-money-bag-01 text-2xl text-warning"></i>
                                            </div>
                                            <p class="text-sm text-gray-500 mt-2 pl-12">Pay with cash when your order arrives.</p>
                                        </label>

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

                        </div>
                    </div>

                    {{-- ===== RIGHT: Order Summary ===== --}}
                    <div class="xl:col-span-4 col-span-12">
                        <div class="border border-gray-300 rounded-2xl md:px-6 md:py-6 px-3 py-4 flex flex-col gap-y-6 sticky top-5">

                            <h5 class="text-light-primary-text">Cart Items</h5>
                            <div class="border border-gray-300 rounded-xl overflow-x-auto">
                                <table class="w-full cart-items-table">
                                    <tbody>
                                    @foreach($cart as $item)
                                        <tr class="border-b border-gray-100 last:border-0">
                                            <td class="py-4 px-4 product-thumbnail">
                                                <div class="w-[60px] h-[60px] rounded-xl bg-[#F4F3F5] overflow-hidden">
                                                    <img src="{{ $item['image'] ?? 'https://placehold.co/60x60/F4F6F8/9CA3AF?text=?' }}"
                                                         alt="{{ $item['name'] }}"
                                                         class="w-full h-full object-cover rounded-xl"/>
                                                </div>
                                            </td>
                                            <td class="py-4 md:pr-4 pr-2 align-middle w-full">
                                                <div class="flex flex-col gap-y-1">
                                                    <p class="text-light-primary-text font-semibold text-sm leading-snug line-clamp-2">
                                                        {{ $item['name'] }}
                                                    </p>
                                                    <div class="flex items-center justify-between gap-x-2">
                                                        <p class="text-xs text-light-secondary-text">
                                                            {{ $item['qty'] }}x
                                                            @if($item['size']) · {{ $item['size'] }} @endif
                                                            @if($item['color']) · {{ $item['color'] }} @endif
                                                        </p>
                                                        <span class="text-sm font-semibold text-primary whitespace-nowrap">
                                                        ${{ number_format($item['price'] * $item['qty'], 2) }}
                                                    </span>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>


                            {{-- Order Summary --}}
                            <div class="bg-gray-100 md:px-6 px-4 py-6 rounded-2xl">
                                <div class="flex flex-col gap-y-6">
                                    <h5>Order Summary</h5>
                                    <div>
                                        <div class="flex flex-col gap-y-3 pb-4 border-b border-gray-300">
                                            <p class="flex items-center justify-between text-sm">
                                                Sub-Total
                                                <span class="text-gray-900 font-semibold">${{ number_format($subtotal, 2) }}</span>
                                            </p>
                                            <p class="flex items-center justify-between text-sm">
                                                Shipping
                                                <span class="text-gray-900 font-semibold">$0.00</span>
                                            </p>
                                            <p class="flex items-center justify-between text-sm">
                                                Tax
                                                <span class="text-gray-900 font-semibold">$0.00</span>
                                            </p>
                                        </div>
                                        <h6 class="flex items-center justify-between text-light-primary-text pt-4">
                                            Total
                                            <span class="text-gray-900">${{ number_format($total, 2) }}</span>
                                        </h6>
                                    </div>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <button type="submit" id="checkout-submit-btn"
                                    class="btn btn-primary py-3 rounded-[80px] w-full flex items-center justify-center gap-x-2">
                                <i class="hgi hgi-stroke hgi-lock-01 text-xl text-white"></i>
                                <span id="checkout-btn-text">Proceed to Checkout</span>
                            </button>

                            <p class="text-xs text-center text-gray-400">
                                <i class="hgi hgi-stroke hgi-shield-check text-sm"></i>
                                Your information is 100% secure and encrypted.
                            </p>

                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>

    {{-- Float label style --}}
    <style>
        .float-label {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            line-height: 18px;
            transition: all 0.2s;
            background: white;
            pointer-events: none;
        }
        .peer:placeholder-shown ~ .float-label {
            color: #919eab;
            font-size: 16px;
            top: 50%;
        }
        .peer:focus ~ .float-label,
        .peer:not(:placeholder-shown) ~ .float-label {
            font-size: 12px;
            top: 0;
            padding: 0 4px;
        }
    </style>


@endsection

@push('scripts')
    <script>
        // Show loading state on submit
        document.getElementById('checkout-form').addEventListener('submit', function () {
            const btn  = document.getElementById('checkout-submit-btn');
            const text = document.getElementById('checkout-btn-text');
            btn.disabled    = true;
            btn.classList.add('opacity-75');
            text.textContent = 'Processing…';
        });
    </script>
@endpush