@extends('layouts.public')
@section("content")
    @include('includes.corano-breadcrumb', [
        'crumbs' => [
            ['label' => __('public.menu.shop'), 'url' => __url('/shop')],
            ['label' => __('public.checkout')],
        ],
    ])

    <div class="checkout-page-wrapper section-padding">
        <div class="container">
            <div class="section-title text-center">
                <h1 class="title">{{ __('public.checkout') }}</h1>
            </div>

            <div class="alert alert-danger d-none" id="checkout-message"></div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="checkout-billing-details-wrap">
                        <h2>{{ __('public.billing_information') }}</h2>

                        <form action="{{ __url('/checkout/details') }}" id="promo-form" method="GET" class="checkout-coupon-form">
                            <p class="checkout-coupon-hint">{{ __("public.has_coupon") }}</p>
                            <div class="checkout-coupon-row">
                                <input
                                    type="text"
                                    id="promocode"
                                    name="code"
                                    value=""
                                    class="form-control"
                                    placeholder="{{ __("public.enter_coupon") }}"
                                >
                                <button type="submit" class="btn btn-sqr">
                                    {{ __("public.apply_coupon") }}
                                </button>
                            </div>
                            <div id="promocode-feedback" class="invalid-feedback d-block d-none mt-2"></div>
                        </form>

                        <form method="POST" action="{{ __url('/checkout') }}" data-action="onCheckout" class="r-form billing-form-wrap"
                              id="checkout-form" novalidate>
                            @csrf
                            <input type="hidden" name="promo" id="promo-code" value="">
                            <input type="hidden" name="payment_method" value="manual">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="first-name">{{ __("public.profile.first_name") }}</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="first-name"
                                            name="first_name"
                                            value="{{ $user->first_name ?? old('first_name', '') }}"
                                            placeholder="{{ __("public.profile.first_name") }}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="last-name">{{ __("public.profile.last_name") }}</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="last-name"
                                            name="last_name"
                                            value="{{ $user->last_name ?? old('last_name', '') }}"
                                            placeholder="{{ __("public.profile.last_name") }}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="email">{{ __("public.profile.email") }}</label>
                                        <input
                                            type="email"
                                            @auth disabled @endauth
                                            class="form-control"
                                            id="email"
                                            name="email"
                                            value="{{ $user->email ?? old('email', '') }}"
                                            placeholder="{{ __("public.profile.email") }}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="phone">{{ __("public.profile.phone") }}</label>
                                        <input
                                            type="text"
                                            @auth disabled @endauth
                                            class="form-control telephone"
                                            id="phone"
                                            name="phone"
                                            value="{{ $user->phone ?? old('phone', '') }}"
                                            maxlength="20"
                                            placeholder="{{ __("public.profile.phone") }}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="country">{{ __("public.profile.country") }}</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="country"
                                            name="country"
                                            value="{{ $user->country ?? old('country', '') }}"
                                            placeholder="{{ __("public.profile.country") }}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="city">{{ __("public.profile.city") }}</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="city"
                                            name="city"
                                            value="{{ $user->city ?? old('city', '') }}"
                                            placeholder="{{ __("public.profile.city") }}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="single-input-item">
                                        <label for="address">{{ __("public.profile.address") }}</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="address"
                                            name="address"
                                            value="{{ $user->address ?? old('address', '') }}"
                                            placeholder="{{ __("public.profile.address") }}"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="single-input-item">
                                        <label for="zip">{{ __("public.profile.zip") }}</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="zip"
                                            name="zip"
                                            value="{{ $user->zip ?? old('zip', '') }}"
                                            placeholder="{{ __("public.profile.zip") }}"
                                        >
                                    </div>
                                </div>
                            </div>

                            <div class="checkout-notes">
                                <h3>{{ __('public.checkout_item_notes_title') }}</h3>
                                <p>{{ __('public.checkout_item_notes_help') }}</p>
                                @foreach($cart as $item)
                                    @php
                                        $product = $item->getItem();
                                        $title = $product ? (___($product, 'title') ?: ($product->page_title ?: __('alts.product'))) : __('alts.product');
                                    @endphp
                                    <div class="single-input-item">
                                        <label for="note-{{ $item->id }}">{{ $title }}</label>
                                        <textarea
                                            class="form-control"
                                            id="note-{{ $item->id }}"
                                            name="notes[{{ $item->id }}]"
                                            rows="2"
                                            maxlength="2000"
                                            placeholder="{{ __('public.checkout_item_notes_placeholder') }}"
                                        >{{ old('notes.' . $item->id) }}</textarea>
                                    </div>
                                @endforeach
                            </div>

                            <p class="checkout-payment-note">{{ __('public.checkout_payment_later') }}</p>

                            <div class="single-input-item">
                                <div class="checkout-box-wrap">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="agree-terms" value="1" name="agree_terms">
                                        <label class="custom-control-label" for="agree-terms">
                                            {{ __("public.agree_terms") }}
                                            <a href="{{ __url('/terms') }}" target="_blank">{{ __("public.terms") }}</a>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="single-input-item">
                                <button type="submit" id="place-order-btn" class="btn btn-sqr" disabled>
                                    {{ __("public.place_order") }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-lg-6" id="checkout-details">
                    @include('pages.checkout.details', [
                        'cart' => $cart,
                        'promo' => $promo ?? null,
                        'discount' => $discount ?? 0,
                        'discountedTotal' => $discountedTotal ?? $subtotal,
                        'subtotal' => $subtotal,
                    ])
                </div>
            </div>
        </div>
    </div>

    <script>
        window.__checkoutSuccessUrl = @json(url(__url('/checkout/success')));
        window.__checkoutFailUrl = @json(url(__url('/checkout/fail')));

        document.addEventListener('DOMContentLoaded', function () {
            const agreeTermsCheckbox = document.getElementById('agree-terms');
            const placeOrderBtn = document.getElementById('place-order-btn');
            const promoForm = document.getElementById('promo-form');
            const checkoutForm = document.getElementById('checkout-form');
            const orderBtnText = placeOrderBtn ? placeOrderBtn.innerHTML : '';

            if (promoForm) {
                promoForm.addEventListener('submit', function (e) {
                    e.preventDefault();

                    const promoCodeInput = document.getElementById('promocode');
                    const promoFeedback = document.getElementById('promocode-feedback');
                    const code = promoCodeInput ? promoCodeInput.value : '';
                    const promoHidden = document.getElementById('promo-code');
                    if (promoHidden) {
                        promoHidden.value = code || '';
                    }

                    if (promoCodeInput) {
                        promoCodeInput.classList.remove('is-invalid');
                    }
                    if (promoFeedback) {
                        promoFeedback.classList.add('d-none');
                        promoFeedback.textContent = '';
                    }

                    $.ajax('{{ __url('/checkout/details') }}', {
                        data: {code: code},
                        success: function (resp) {
                            if (resp && resp.html) {
                                $('#checkout-details').html(resp.html);
                            }
                        },
                        error: function (xhr) {
                            var message = '{{ __('public.coupon_not_found') }}';
                            if (xhr && xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }
                            if (promoCodeInput) {
                                promoCodeInput.classList.add('is-invalid');
                            }
                            if (promoFeedback) {
                                promoFeedback.textContent = message;
                                promoFeedback.classList.remove('d-none');
                            }
                            if (promoHidden) {
                                promoHidden.value = '';
                            }
                        }
                    });
                });
            }

            if (agreeTermsCheckbox && placeOrderBtn) {
                agreeTermsCheckbox.addEventListener('change', function () {
                    placeOrderBtn.disabled = !this.checked;
                });
                placeOrderBtn.disabled = !agreeTermsCheckbox.checked;
            }

            if (checkoutForm && placeOrderBtn) {
                checkoutForm.addEventListener('submit', function () {
                    placeOrderBtn.disabled = true;
                    placeOrderBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __("public.place_order") }}';
                });

                window.addEventListener('pageshow', function () {
                    placeOrderBtn.innerHTML = orderBtnText;
                    if (agreeTermsCheckbox) {
                        placeOrderBtn.disabled = !agreeTermsCheckbox.checked;
                    } else {
                        placeOrderBtn.disabled = false;
                    }
                });
            }
        });
    </script>
@endsection