@extends('frontend::layouts.master')

@section('title')
    <title>{{ $seo?->title }}</title>
    <meta name="title" content="{{ $seo?->title }}" />
    <meta name="description" content="{{ strip_tags($seo?->description) }}" />
    <meta name="keywords" content="{{ strip_tags($seo?->keywords) }}" />
@endsection

@push('style')
    <link rel="stylesheet" href="{{ asset('frontend/assets/css/shop.css') }}">
    <style>
        .payment_image {
            max-width: 100px;
            margin-inline-start: 10px;
            margin-top: 10px;
        }
    </style>
@endpush

@section('content')
    <!-- main-area -->
    <main class="fix">
        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('frontend::translate.Home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('frontend::translate.Checkout') }}</li>
            </ol>
        </x-frontend::breadcrumb>

        <!-- checkout area -->
        <section class="checkout-area pb-100 pt-125">
            <div class="container">
                <form id="checkout-form" action="{{ route('checkout.process') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="tg-checkout-form-wrapper mr-50">
                                <h2 class="tg-checkout-form-title mb-30">{{ __('frontend::translate.Billing Details') }}
                                </h2>
                                <div class="row gx-24">
                                    <div class="tg-checkout-form-input mb-25">
                                        <label>{{ __('frontend::translate.Full Name') }}</label>
                                        <input class="input  @error('billing_name') is-invalid @enderror" type="text"
                                            value="{{ auth()->user()->name ?? '' }}" name="billing_name"
                                            placeholder="{{ __('frontend::translate.Full Name') }}">

                                        @error('billing_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="tg-checkout-form-input mb-25">
                                        <label>{{ __('frontend::translate.Email') }}</label>
                                        <input class="input  @error('billing_email') is-invalid @enderror" type="email"
                                            value="{{ auth()->user()->email ?? '' }}" name="billing_email"
                                            placeholder="{{ __('frontend::translate.Email') }}">

                                        @error('billing_email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="tg-checkout-form-input mb-25">
                                        <label>{{ __('frontend::translate.WhatsApp Number') }}</label>
                                        <input class="input  @error('billing_phone') is-invalid @enderror" type="text"
                                            value="{{ auth()->user()->phone ?? '' }}" name="billing_phone"
                                            placeholder="{{ __('frontend::translate.WhatsApp Number') }}">

                                        @error('billing_phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="tg-checkout-form-input mb-25">
                                        <label>{{ __('frontend::translate.Full Address') }}</label>
                                        <input class="input  @error('billing_address') is-invalid @enderror"
                                            class="house-number" name="billing_address" type="text"
                                            placeholder="{{ __('frontend::translate.House number and Street name') }}">

                                        @error('billing_address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="tg-blog-sidebar top-sticky mb-30">
                                <div class="tg-blog-sidebar-box mb-30">
                                    <h4 class="mb-15">
                                        {{ __('frontend::translate.Your Order') }}</h4>
                                    <div class="tg-checkout-order-table table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="product-name">{{ __('frontend::translate.Product') }}</th>
                                                    <th class="product-total text-end">
                                                        {{ __('frontend::translate.Subtotal') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @foreach ($carts as $cart)
                                                    <tr class="cart_item first">
                                                        <td class="product-name">
                                                            {{ Str::limit($cart->cartable?->title, 35) }}
                                                            <b> X </b>
                                                            {{ $cart->quantity }}
                                                        </td>
                                                        <td class="product-total">
                                                            <span
                                                                class="amount">{{ exchangeAmount($cart->cartable->getCurrentPrice() * $cart->quantity) }}</span>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>

                                                <tr class="cart-subtotal">
                                                    <th>{{ __('frontend::translate.Subtotal') }}</th>
                                                    <td class="sub_total">
                                                        <span
                                                            class="amount sub_total">{{ exchangeAmount($sub_total) }}</span>
                                                        <input type="hidden" name="subtotal" value="{{ $sub_total }}">
                                                    </td>
                                                </tr>
                                                <tr class="cart-subtotal">
                                                    <th>{{ __('frontend::translate.Total') }}</th>
                                                    <td class="total">
                                                        <span
                                                            class="amount total-amount">{{ exchangeAmount($sub_total) }}</span>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <!-- Payment Methods -->
                                <div class="tg-blog-sidebar-box">
                                    <div class="payment-methods">
                                        <h4 class="checkout-title mb-4">{{ __('frontend::translate.Payment Methods') }}
                                        </h4>

                                        @if ($paymentMethods->count() > 0)
                                            <div class="payment-options">
                                                @foreach ($paymentMethods as $method)
                                                    <div class="payment-option mb-3 d-flex">
                                                        <div class="form-check payment-radio align-items-start mt-0">
                                                            <input class="form-check-input mt-1" type="radio"
                                                                name="payment_method" id="payment_{{ $method->driver }}"
                                                                value="{{ $method->driver }}"
                                                                {{ old('payment_method') == $method->driver ? 'checked' : '' }}
                                                                {{ $loop->first && !old('payment_method') ? 'checked' : '' }}>
                                                            <label class="form-check-label payment-label"
                                                                for="payment_{{ $method->driver }}">
                                                                <div class="payment-info">
                                                                    <div class="payment-header">
                                                                        <h5 class="payment-name mb-1">{{ $method->name }}
                                                                        </h5>
                                                                    </div>
                                                                    @if ($method->description)
                                                                        <p class="payment-description">
                                                                            {{ $method->description }}</p>
                                                                    @endif
                                                                </div>
                                                            </label>
                                                        </div>

                                                        @if ($method->image)
                                                            <div class="payment_image">
                                                                <img src="{{ asset($method->image) }}" />
                                                            </div>
                                                        @endif

                                                    </div>
                                                @endforeach
                                            </div>
                                            @error('payment_method')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        @else
                                            <div class="alert alert-warning">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                No payment methods are currently available. Please contact support.
                                            </div>
                                        @endif
                                    </div>
                                    <div class="tg-checkout-form-btn">
                                        <button type="submit"
                                            class="btn w-100 text-center justify-content-center">{{ __('frontend::translate.Place Your Order') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- checkout area end-->

    </main>
@endsection


@push('script')
    <script>
        $(document).ready(function() {
            // Form validation and submission
            $('#checkout-form').on('submit', function(e) {
                e.preventDefault();

                const $form = $(this);
                const $submitBtn = $('#place-order-btn');
                const originalText = $submitBtn.html();

                // Check if payment method is selected
                if (!$('input[name="payment_method"]:checked').length) {
                    toastr.error('Please select a payment method');
                    return;
                }

                // Disable submit button and show loading
                $submitBtn.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-2"></i>Processing...');

                // Submit the form
                setTimeout(() => {
                    $form.off('submit').submit();
                }, 1000);
            });

            // Payment method selection styling
            $('input[name="payment_method"]').on('change', function() {
                $('.payment-option').removeClass('selected');
                $(this).closest('.payment-option').addClass('selected');
            });

            // Initialize with first payment method selected
            if ($('input[name="payment_method"]:checked').length) {
                $('input[name="payment_method"]:checked').closest('.payment-option').addClass('selected');
            }
        });
    </script>
@endpush