@extends('front.layouts.app')
@section('content')

    <nav aria-label="breadcrumb" class="pagebtitle">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('front.home') }}"><i class="far fa-home"></i></a></li>
                <li class="breadcrumb-item"><a href="{{ route('front.all.product') }}">Account</a></li>
                <li class="breadcrumb-item active" aria-current="page">BILLING INFORMATION</li>
            </ol>
        </div>
    </nav>

    <div class="checkOutStyle">
        <div class="container">
            <div class="row">
                <form action="{{ route('front.checkout.store') }}" method="post" class="row formStyle">
                    @csrf
                    <div class="col-md-12">
                        <div class="title inner">
                            <!-- <h2 class="section-heading">Billing Address</h2> -->
                            <h4>Fill the form below to complete your purchase</h4>
                            <p class="checkout-subheading"><span>Already Registered?</span> Click here to <a
                                    href="{{ route('login') }}">Login now</a></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>first Name</label>
                        <input type="text" class="form-control" name="first_name" required
                               value="{{ Auth::check() ? Auth::user()->first_name : '' }}"
                            {{ Auth::check() ? 'disabled="disabled"' : '' }}>
@error('first_name')
                        <label class="alert-danger">{{$message}}</label>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label>Last Name</label>
                        <input type="text" class="form-control" name="last_name" required
                               value="{{ Auth::check() ? Auth::user()->last_name : '' }}"
                            {{ Auth::check() ? 'disabled="disabled"' : '' }}>
                    </div>
                    <div class="col-md-6">
                        <label>email address</label>
                        <input type="email" class="form-control" name="email" required
                               value="{{ Auth::check() ? Auth::user()->email : '' }}"
                            {{ Auth::check() ? 'disabled="disabled"' : '' }}>
                    </div>
                    <div class="col-md-6">
                        <label>Phone</label>
                        <input type="number" class="form-control" name="phone" required
                               value="{{ Auth::check() ? Auth::user()->phone_number : '' }}"
                            {{ Auth::check() ? 'disabled="disabled"' : '' }}>
                    </div>
                    @if(!Auth::check())
                        <div class="col-md-6">
                            <label>password</label>
                            <input type="password" class="form-control" name="password" required>
                            @error('password')
                            <label class="alert-danger">{{$message}}</label>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>confirm password</label>
                            <input type="password" class="form-control" name="password_confirmation" required>
                            @error('password_confirmation')
                            <label class="alert-danger">{{$message}}</label>
                            @enderror
                        </div>
                    @endif
                    <div class="col-md-12">
                        <label>address</label>
                        <input type="text" class="form-control" name="address"
                               value="{{ Auth::check() ? Auth::user()->address : '' }}"
                            {{ Auth::check() && Auth::user()->address != null ? 'disabled="disabled"' : '' }}
                        >
                    </div>
                    <div class="col-md-6">
                        <label>Country</label>
                        <input type="text" class="form-control" name="country"
                               value="{{ Auth::check() ? Auth::user()->country : '' }}"
                            {{ Auth::check() && Auth::user()->country != null ? 'disabled="disabled"' : '' }}
                        >
                    </div>
                    <div class="col-md-6">
                        <label>city</label>
                        <input type="text" class="form-control" name="city"
                               value="{{ Auth::check() ? Auth::user()->city : '' }}"
                            {{ Auth::check() && Auth::user()->city != null ? 'disabled="disabled"' : '' }}
                        >
                    </div>
                    <div class="col-md-6">
                        <label>ZIP/POSTAL CODE</label>
                        <input type="text" class="form-control" name="zip"
                               value="{{ Auth::check() ? Auth::user()->zip : '' }}"
                            {{ Auth::check() && Auth::user()->zip != null ? 'disabled="disabled"' : '' }}
                        >
                    </div>
                    <div class="col-md-6">
                        <label>STATE/PROVINCE</label>
                        <input type="text" class="form-control" name="state"
                               value="{{ Auth::check() ? Auth::user()->state : '' }}"
                            {{ Auth::check() && Auth::user()->state != null ? 'disabled="disabled"' : '' }}
                        >
                    </div>
                    @if(!Auth::check())
                    <div class="col-md-12">
                        <div class="checkbox">
                            <input type="checkbox" id="box-1" value="1" name="create_account">
                            <label for="box-1">Create an account for later use</label>
                        </div>
                    </div>
                    @endif
                    <div class="col-md-12">
                        <div class="checkbox">
                            <input type="checkbox" id="shipToAnotherAddress">
                            <label for="shipToAnotherAddress">Ship to another address </label>
                        </div>
                    </div>

                    <div class="row" id="shipmentAddress" style="display: none;">
                        <div class="col-md-12">
                            <label>address</label>
                            <input type="text" name="shipment_address" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label>Country</label>
                            <input type="text" name="shipment_country" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label>city</label>
                            <input type="text" name="shipment_city" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label>ZIP/POSTAL CODE</label>
                            <input type="text" name="shipment_zip" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label>STATE/PROVINCE</label>
                            <input type="text" name="shipment_state" class="form-control">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="title inner">
                            <h2 class="section-heading">Payment Detail</h2>
                            <h4>Fill the form below to complete your purchase</h4>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>Card Number</label>
                        <input type="number" class="form-control" name="card_number" id="card_number" placeholder="card number" required>
                        @error('card_number')
                        <label class="alert-danger">{{$message}}</label>
                        @enderror
                        <span id="cardNumberError" class="text-danger"></span>
                    </div>
                    <div class="col-md-6">
                        <label>Name on Card</label>
                        <input type="text" class="form-control" name="card_name" placeholder="card title" required>
                        @error('card_name')
                        <label class="alert-danger">{{$message}}</label>
                        @enderror
                    </div>
                        <div class="col-md-4">
                            <label>Expiration Month</label>
                            <input type="text" class="form-control" id="cardExpireMonth" name="card_expire_month" placeholder="MM" required>
                            <span id="expireMonthError" class="text-danger"></span>
                        </div>

                    <div class="col-md-4">
                        <label>Expiration Year</label>
                        <input type="text" class="form-control" id="cardExpireYear" name="card_expire_year" placeholder="YYYY" required>
                        <span id="expireYearError" class="text-danger"></span>
                    </div>

                    <div class="col-md-4">
                        <label>CVV</label>
                        <input type="number" class="form-control" name="card_cvv" required>
                        <span id="cvvError" class="text-danger"></span>
                    </div>

                    <div class="col-md-12 title my-5 text-center">
                        <h2 class="section-heading">Order Summary</h2>
                    </div>
                    <div class="col-md-12 order-summery">
                        <div class="row no-gutters">
                            <div class="col-6">
                                <span>Subtotal ({{ count($cart) }} items)</span>
                            </div>
                            @php
                                $formattedPrice = \App\Helper\PriceHelper::formatPrice($totalAmount);

                            @endphp
                            <div class="col-6 text-right">
                                <strong>$ {{ $formattedPrice }}</strong>
                            </div>
                            <hr class="w-100">
                            <div class="col-6">
                                <span style="color: red">Gst Tax Includes</span>
                            </div>
                            <div class="col-6 text-right">
                                <strong>7.25%</strong>
                            </div>
                            <hr class="w-100">
                            <div class="col-md-12">
                                <div class="applyCoupon d-sm-flex">
                                    <input type="text" class="form-control" placeholder="Enter Voucher Code">
                                    <button class="btn themeBtn btn-block">Apply</button>
                                </div>
                            </div>
                            <hr class="w-100">
                            <div class="col-6">
                                <span>Total</span>
                            </div>
                        
                        <!-- Display total amount with GST -->
                            <div class="col-6 text-right">
                                <strong>$ {{ number_format($totalAmountWithGST, 2) }}</strong>
                            </div>
                            <hr class="w-100">
                            <div class="col-md-12 mt-4">
                                <input type="hidden" name="total_amount" value="{{ $totalAmountWithGST }}">
                                <button type="submit" class="btn themeBtn btn-block">Place Order</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const shipToAnotherAddressCheckbox = document.getElementById('shipToAnotherAddress');
            const shipmentAddressDiv = document.getElementById('shipmentAddress');

            shipToAnotherAddressCheckbox.addEventListener('change', function () {
                if (this.checked) {
                    shipmentAddressDiv.style.display = '';
                } else {
                    shipmentAddressDiv.style.display = 'none';
                }
            });

            $('#cardExpireMonth').on('blur', function() {
                // Validation for expiration month (optional)
                var currentMonth = new Date().getMonth() + 1; // Adding 1 to get month in range 1-12
                var enteredMonth = parseInt($(this).val());
                if (enteredMonth < 1 || enteredMonth > 12) {
                    $('#expireMonthError').text('Please enter a valid month (1-12).');
                    $(this).val(''); // Clear the input field
                }  else {
                    $('#expireMonthError').text('');
                }
                // if (enteredMonth < currentMonth) {
                //     $('#expireMonthError').text('Expiration month must be current or greater.');
                //     $(this).val(''); // Clear the input field
                // } else {
                //     $('#expireMonthError').text('');
                // }
            });
            $('#card_number').on('blur', function() {
                var cardNumber = $(this).val().trim(); // Trim to remove any leading or trailing whitespace
                var cardNumberDigits = parseInt(cardNumber); // Convert to an integer

                if (isNaN(cardNumberDigits) || cardNumber.length !== 16) {
                    $('#cardNumberError').text('Card number must be exactly 16 digits.');
                    $(this).val(''); // Clear the input field
                } else {
                    $('#cardNumberError').text('');
                }
            });

            $('#cardExpireYear').on('blur', function() {
                // Validation for expiration year
                var currentYear = new Date().getFullYear();
                var enteredYear = parseInt($(this).val());

                if (enteredYear < currentYear) {
                    $('#expireYearError').text('Expiration year must be current or greater.');
                    $(this).val(''); // Clear the input field
                } else {
                    $('#expireYearError').text('');
                }
            });

            $('input[name="card_cvv"]').on('blur', function() {
                // Validation for CVV
                var cvv = $(this).val();

                if (cvv.length !== 3 || isNaN(cvv)) {
                    $('#cvvError').text('CVV must be a 3-digit number.');
                    $(this).val(''); // Clear the input field
                } else {
                    $('#cvvError').text('');
                }
            });
        });
    </script>
@endpush