@extends('front.include.app')

@section('content')
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{ asset('front/images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>checkout</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="check-out-section chkot-pag">
        <div class="container">
            <div class="check-out-form">
                <h2 class="primary-heading">Billing Address</h2>
                <p>Fill the form below to complete your purchase</p>

                @guest
                    <p class="checkout-subheading">
                        @if (!Auth::check())
                            <a href="">Already Registered?</a> Click here to <a class="text-uppercase"
                                data-toggle="modal" data-target=".bd-example-modal-lg">Login now</a>
                        @endif
                    </p>
                @endguest

                <form action="{{ route('checkout.process') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <label for="">First Name</label>
                            <input type="text" class="form-control" name="first_name"
                                value="{{ old('first_name', auth()->user()->first_name ?? '') }}">
                            @error('first_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">Last Name</label>
                            <input type="text" class="form-control" name="last_name"
                                value="{{ old('last_name', auth()->user()->last_name ?? '') }}">
                            @error('last_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Only show email and password fields if user is not logged in -->
                        @guest
                            <div class="col-md-6">
                                <label for="">Email Address</label>
                                <input type="email" class="form-control email-input" name="email" value="{{ old('email') }}">
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Phone</label>
                                <input type="text" class="form-control" name="phone_number"
                                    value="{{ old('phone_number') }}">
                                @error('phone_number')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        @endguest

                        <div class="col-md-12">
                            <label for="">Address</label>
                            <textarea name="address" cols="30" rows="6" class="form-control">{{ old('address', trim(auth()->user()->address ?? '')) }}</textarea>
                            @error('address')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>


                        <div class="col-md-12">
                            <label for="">Country</label>
                            <input type="text" class="form-control" name="country"
                                value="{{ old('country', auth()->user()->country ?? '') }}">
                            @error('country')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <label for="">City</label>
                            <input type="text" class="form-control" name="city"
                                value="{{ old('city', auth()->user()->city ?? '') }}">
                            @error('city')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <label for="">Province Code</label>
                            <input type="text" class="form-control" name="pro_code"
                                value="{{ old('pro_code', auth()->user()->pro_code ?? '') }}">
                            @error('pro_code')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">ZIP/Postal Code</label>
                            <input type="text" min="10" class="form-control" name="zip_code"
                                value="{{ old('zip_code', auth()->user()->zip_code ?? '') }}">
                            @error('zip_code')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <hr>
                    <input type="hidden" name="price" value="({{ count(session()->get('cart') ?? '') }})">
                    <div class="order-summery">
                        <h2 class="primary-heading text-center">Order Summary</h2>
                        <div class="row bb-1">
                            <div class="col-md-12">
                                <label for="coupon_code">Have a coupon code?</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="coupon_code" id="coupon_code" placeholder="Enter coupon code">
                                    <div class="input-group-append">
                                        <button class="themeBtn" type="button" id="apply-coupon">Apply</button>
                                    </div>
                                </div>
                                <div id="coupon-message" class="mt-2"></div>
                            </div>
                        </div>
                        <div class="row bb-1">
                            <div class="col-md-6">
                                <span>Subtotal ({{ count(session()->get('cart') ?? '') }})</span>
                            </div>
                            @php
                                $cart = session()->get('cart', []);
                                $cartTotal = 0;
                                foreach ($cart as $item) {
                                    $cartTotal += $item['price'] * $item['quantity'];
                                }
                            @endphp
                            <div class="col-md-6 text-right">
                                CAD ${{ $cartTotal ?? '' }}
                            </div>
                            <input type="hidden" value="{{ $cartTotal ?? '' }}" name="price">
                            <input type="hidden" value="{{ $cartTotal ?? '' }}" name="size">
                            <input type="hidden" value="{{ $cartTotal ?? '' }}" name="color">
                        </div>
                        <div class="row bb-1 d-none" id="discount-row">
                            <div class="col-md-6">
                                <span>Discount</span>
                            </div>
                            <div class="col-md-6 text-right">
                                CAD $<span id="discount-amount">0.00</span>
                            </div>
                        </div>
                        <div class="row bb-1 d-none" id="total-after-discount-row">
                            <div class="col-md-6">
                                <span>Total After Discount</span>
                            </div>
                            <div class="col-md-6 text-right">
                                CAD $<span id="total-after-discount">0.00</span>
                            </div>
                        </div>
                        <div class="col-md-12 mt-4 p-0">
                            <button type="submit" class="themeBtn w-100">proceed to checkout</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-body" style="padding: 50px">
                    <div id="login-errors" class="alert alert-danger d-none"></div>
                    <form id="login-form">
                        <h2 class="mainHead">Login</h2>
                        <h3 class="subHeading">Enter Your Login Details</h3>
                        <div class="row">
                            <div class="col-12">
                                <div class="inputField">
                                    <label>Email Or Mobile Phone Number</label>
                                    <input type="text" name="identifier">
                                </div>
                            </div>
                            <!-- Forgot Password Section -->
                            <div class="col-12">
                                <div class="inputField">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <label>Password</label>
                                    </div>
                                    <input type="password" name="password" class="form-control">
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="inputField">
                                    <button type="submit" class="themeBtn w-100">submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection


@section('script')
    <script>
        $(document).ready(function() {
            $('#login-form').on('submit', function(e) {
                e.preventDefault();
                $('#login-errors').addClass('d-none').html(''); // Clear previous errors
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'POST',
                    url: '{{ route('login.ajax') }}',
                    data: $(this).serialize(),
                    success: function(response) {
                        if (response.success == true) {
                            toastr.success('Login successful');
                            setTimeout(function() {
                                window.location.reload();

                            }, 1000);

                        } else if (response.status === 'validation_error') {
                            let errors = response.errors;
                            let errorHtml = '<ul>';
                            $.each(errors, function(key, messages) {
                                $.each(messages, function(i, msg) {
                                    errorHtml += '<li>' + msg + '</li>';
                                });
                            });
                            errorHtml += '</ul>';
                            $('#login-errors').removeClass('d-none').html(errorHtml);
                        } else {
                            $('#login-errors').removeClass('d-none').html(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            let errors = xhr.responseJSON.errors;
                            let errorHtml = '<ul>';
                            $.each(errors, function(key, messages) {
                                $.each(messages, function(i, msg) {
                                    errorHtml += '<li>' + msg + '</li>';
                                });
                            });
                            errorHtml += '</ul>';
                            $('#login-errors').removeClass('d-none').html(errorHtml);
                        } else {
                            $('#login-errors').removeClass('d-none').html(
                                'An error occurred. Please try again.');
                        }
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#apply-coupon').click(function() {
                var couponCode = $('#coupon_code').val();
                var subtotal = {{ $cartTotal }};
                var email = $('.email-input').val();

                if (!couponCode) {
                    $('#coupon-message').html('<span class="text-danger">Please enter a coupon code</span>');
                    return;
                }

                $.ajax({
                    url: '{{ route("validate.coupon") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        coupon_code: couponCode,
                        subtotal: subtotal,
                        email: email,
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#coupon-message').html('<span class="text-success">'+response.message+'</span>');
                            $('#discount-amount').text(response.discount_amount.toFixed(2));
                            $('#total-after-discount').text(response.total_after_discount.toFixed(2));
                            $('#discount-row').removeClass('d-none');
                            $('#total-after-discount-row').removeClass('d-none');
                        } else {
                            $('#coupon-message').html('<span class="text-danger">'+response.message+'</span>');
                            $('#discount-row').addClass('d-none');
                            $('#total-after-discount-row').addClass('d-none');
                        }
                    },
                    error: function(xhr) {
                        $('#coupon-message').html('<span class="text-danger">Error validating coupon</span>');
                    }
                });
            });
        });
    </script>
@endsection