@extends('frontend.layouts.app', ['title' => 'Checkout'])

@section('content')

    <div class="wrapper">
        <x-breadcrumb :items="[
            [
                'label' => 'Checkout',
                'url' => null,
            ],
        ]" />
        @if ($cart_items->isEmpty())
            <div class="main-title-left">
                <h2 class="cart_empty">Your Cart Is Empty</h2>
            </div>
        @else
            {{-- Errors --}}
            <div class="col-lg-12">
                @if (count($errors) > 0)
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ $errors->first() }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <i class="uil uil-multiply"></i>
                            </button>
                        </div>
                    @endif
                @endif
            </div>
            

            {{-- Address Edit Modal --}}
            <div class="header-cate-model main-gambo-model modal fade" id="edit_address_model" tabindex="-1"
                role="dialog">
                <div class="modal-dialog category-area" role="document">
                    <div class="category-area-inner">
                        <div class="model-header  cate-header Update_Address">
                            <h4 class="">Update Address</h4>
                       
                        <button type="button" class="btn-close close-modal-edit-address" data-bs-dismiss="modal"
                            aria-label="Close">
                            <i class="uil uil-multiply"></i>
                        </button>
                    </div>
                        <div class="category-model-content modal-content">
                            
                            <div class="add-address-form">
                                <div class="checout-address-step">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <form id="address-edit-form" method="POST"
                                                action="{{ route('orders.address.update') }}" class="address_model_form">
                                                @csrf
                                                <!-- Multiple Radios (inline) -->
                                                <div class="form-group">
                                                    <input type="hidden" name="address_id" />
                                                    <div class="product-radio">
                                                        <ul class="product-now">
                                                            <li>
                                                                <input type="radio" id="ad1" name="type"
                                                                    value="Home">
                                                                <label for="ad1" class="hover-btn">Home</label>
                                                            </li>
                                                            <li>
                                                                <input type="radio" id="ad2" name="type"
                                                                    value="Office">
                                                                <label for="ad2" class="hover-btn">Office</label>
                                                            </li>
                                                            <li>
                                                                <input type="radio" id="ad3" name="type"
                                                                    value="Other">
                                                                <label for="ad3" class="hover-btn">Other</label>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="address-fieldset">
                                                    <div class="row">
                                                        <div class="col-lg-12 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">Name*</label>
                                                                <input id="receiver_name" name="receiver_name"
                                                                    type="text" placeholder="Name"
                                                                    class="form-control input-md" required />
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">Phone Number*</label>
                                                                <input id="receiver_phone" name="receiver_phone"
                                                                    type="text" placeholder="Contact"
                                                                    class="form-control input-md" required />
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">Email*</label>
                                                                <input id="receiver_email" name="receiver_email"
                                                                    type="text" placeholder="Email"
                                                                    class="form-control input-md" required />
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">Flat / House / Office
                                                                    No.*</label>
                                                                <input id="house_no" name="house_no" type="text"
                                                                    placeholder="Address" class="form-control input-md"
                                                                    required />
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">Street / Society / Office
                                                                    Name*</label>
                                                                <input id="street" name="society" type="text"
                                                                    placeholder="Street Address"
                                                                    class="form-control input-md">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">City*</label>
                                                                <input id="city" name="city" type="text"
                                                                    placeholder="City" class="form-control input-md"
                                                                    required>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">State*</label>
                                                                <input id="state" name="state" type="text"
                                                                    placeholder="State" class="form-control input-md"
                                                                    required>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="form-group mt-4">
                                                                <label class="control-label">Pincode*</label>
                                                                <input id="pincode" name="pincode" type="text"
                                                                    placeholder="Pincode" class="form-control input-md"
                                                                    required="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12">
                                                            <div class="form-group mt-30">
                                                                <div class="address-btns">
                                                                    <button class="w-100 hover-btn">Save</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End Address Edit Modal --}}
            {{-- Errors End --}}
            <div class="all-product-grid checkout_container">
                <div class="container">
                    <div class="row">
                        @if ($addresses->isEmpty())
                            {{-- Address --}}
                            <div class="col-md-6">
                                <h4 class="wizard-btn collapsed check_page_button font-bold-data" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
                                    aria-controls="collapseTwo">
                                    Delivery Address
                                </h4>
                                <div class="category-model-content">
                                    <div class="add-address-form">
                                        <div class="checout-address-step">
                                            <form id="address-store-form" method="POST"
                                                action="{{ route('orders.address.store') }}">
                                                @csrf
                                                <div class="form-group">
                                                    <div class="product-radio">
                                                        <ul class="product-now">
                                                            <li>
                                                                <input type="radio" id="add1" name="type"
                                                                    value="Home" checked>
                                                                <label for="add1" class="hover-btn">Home</label>
                                                            </li>
                                                            <li>
                                                                <input type="radio" id="add2" name="type"
                                                                    value="Office">
                                                                <label for="add2" class="hover-btn">Office</label>
                                                            </li>
                                                            <li>
                                                                <input type="radio" id="add3" name="type"
                                                                    value="Other">
                                                                <label for="add3" class="hover-btn">Other</label>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="address-fieldset form_fields_data">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Name.*</label>
                                                        <input id="name" name="receiver_name" type="text"
                                                            placeholder="Name" class="form-control input-md" required>
                                                    </div>
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Phone.*</label>
                                                        <input id="phone" name="receiver_phone" type="text"
                                                            placeholder="Phone" class="form-control input-md" required>
                                                    </div>
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Email.*</label>
                                                        <input id="receiver_email" name="receiver_email" type="text"
                                                            placeholder="Email" class="form-control input-md" required>
                                                    </div>
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Flat / House / Office No.*</label>
                                                        <input id="flat" name="house_no" type="text"
                                                            placeholder="Address" class="form-control input-md" required>
                                                    </div>
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Street / Society / Office
                                                            Name*</label>
                                                        <input id="street" name="society" type="text"
                                                            placeholder="Street Address" class="form-control input-md">
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group mt-4 col-md-6">
                                                            <label class="control-label">City*</label>
                                                            <input id="city" name="city" type="text"
                                                                placeholder="City" class="form-control input-md" required>
                                                        </div>
                                                        <div class="form-group mt-4 col-md-6">
                                                            <label class="control-label">State*</label>
                                                            <input id="state" name="state" type="text"
                                                                placeholder="State" class="form-control input-md"
                                                                required>
                                                        </div>
                                                    </div>
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Pincode*</label>
                                                        <input id="pincode" name="pincode" type="text"
                                                            placeholder="Pincode" class="form-control input-md" required>
                                                    </div>
                                                    <div class="form-group mt-30">
                                                        <div class="address-btns">
                                                            <button class="w-100 hover-btn">Save</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="col-md-6">
                                <h4 class="sec-title-name">My Addresses</h2>
                                    @foreach ($addresses as $address)
                                        <div class="address-item address_page">
                                            <input type="radio" name="address_id" value="{{ $address->uuid }}"
                                                class="me-2 mt-1" />
                                            <div class="address-icon1">
                                                <i class="uil uil-map-marker"></i>
                                            </div>
                                            <div class="address-dt-all">
                                                <h4>{{ $address->type }}</h4>
                                                <p>{{ $address->house_no }},{{ $address->society }},
                                                    {{ $address->city }},
                                                    {{ $address->state }},{{ $address->pincode }}</p>
                                                <ul class="action-btns">
                                                    <li>
                                                        <a href='#' class="action-btn edit-address"
                                                            data-address-id="{{ $address->uuid }}" data-bs-toggle="modal"
                                                            data-bs-target="#edit_address_model"><i
                                                                class="uil uil-edit"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="{{ route('orders.address.delete', $address->uuid) }}"
                                                            class="action-btn"><i class="uil uil-trash-alt"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    @endforeach
                            </div>
                        @endif
                        {{-- Address End --}}
                        <div class="col-md-6 order-rummst_left order-summary-cart-item">
                            <div class="pdpt-bg">
                                <div class="pdpt-title">
                                    <h4 class="sec-title-name">Order Summary</h4>
                                </div>

                                @if ($cart_items->isNotEmpty())
                                    @php
                                        $total = 0;
                                        $total_saving = 0;
                                        $item_total = 0;
                                    @endphp

                                    @foreach ($cart_items as $item)
                                        @php
                                            $variation = $item->variation;
                                            $product = $item->product;
                                            $imagePath = $variation->image
                                                ? '/storage/' . $variation->image
                                                : '/storage/' . $product->product_image;

                                            $price = $variation->price;
                                            $mrp = $variation->mrp ?? $price;
                                            $item_total = $price * $item->quantity;
                                            $subtotal = $price * $item->quantity;
                                            $saving = ($mrp - $price) * $item->quantity;

                                            $total += $subtotal;
                                            $total_saving += $saving;
                                        @endphp

                                        <div class="cart-item card-tem_two" data-product-id="{{ $item->product_id }}"
                                            data-variant-id="{{ $item->variation_id }}">
                                            <div class="cart-product-img col-md-2">
                                                <img src="{{ asset($imagePath) }}" alt="{{ $product->product_name }}">
                                            </div>
                                            <div class="cart-text col-md-10">
                                                <strong>
                                                    <p>{{ $product->product_name }}</p>
                                                </strong>
                                                <div class="row">


                                                    <div class="col-md-6">
                                                        <p>Quantity: <strong>{{ $item->quantity }}</strong></p>
                                                    </div>

                                                    <div class="price-div-checkout">
                                                        @php
                                                            $percentOff =
                                                                $mrp > 0 && $price > 0
                                                                    ? round((($mrp - $price) / $mrp) * 100)
                                                                    : 0;
                                                        @endphp

                                                        <span class="color-span"
                                                            id="percentage-span">{{ $percentOff }}%
                                                            off</span>
                                                        <span class="price-mrp"
                                                            id="product-price-mrp">MRP<del>₹{{ $mrp }}</del></span>
                                                        <span class="price-regular"
                                                            id="product-price-checkout">₹{{ $price }}</span>
                                                    </div>

                                                    @php
                                                        $attributes = [];
                                                    @endphp

                                                    @if ($variation->variation_attributes->isNotEmpty())
                                                        @foreach ($variation->variation_attributes as $attr)
                                                            @php
                                                                $attributes[] =
                                                                    $attr->attribute->attribute->name .
                                                                    ': ' .
                                                                    $attr->attribute->name;
                                                            @endphp
                                                        @endforeach

                                                        <p>{{ implode(', ', $attributes) }}</p>
                                                    @endif
                                                </div>

                                                <div class="qty-group">
                                                    <strong class="color-span">Total: &nbsp;<div class="cart-item-price">
                                                            ₹{{ $item_total }}</div></strong>
                                                </div>


                                            </div>
                                        </div>
                                    @endforeach

                                    <div class="main-total-cart">
                                        <h2> Total</h2>
                                        <span class="color-span">₹{{ number_format($total, 2) }}</span>
                                    </div>
                                @else
                                    <div class="text-center p-4">
                                        <h5>Your cart is empty</h5>
                                    </div>
                                @endif

                            </div>
                            <div id="checkout_wizard" class="checkout accordion left-chck145">
                                <form method="POST" action="{{ route('checkout') }}" id="order-store-form">
                                    @csrf
                                    <input type="hidden" name="address_id" id="address_id" />
                                    <div class="checkout-step">
                                        <div class="checkout-card" id="headingFour">
                                            <h4 class="sec-title-name">Select
                                                payment</h4>
                                        </div>
                                        <div class="checkout-step-body">
                                            <div class="payment_method-checkout">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="rpt100">
                                                            <ul class="radio--group-inline-container_1">
                                                                <li>
                                                                    <div class="radio-item_1">
                                                                        <input id="cashondelivery1" value="cashondelivery"
                                                                            name="paymentmethod" type="radio" checked>
                                                                        <label for="cashondelivery1"
                                                                            class="radio-label_1">
                                                                            <strong>Cash on delivery</strong><br>
                                                                            <small>Once your order is placed, you will be
                                                                                contacted by our staff to confirm the
                                                                                order.</small>
                                                                        </label>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="radio-item_1">
                                                                        <input id="cardpayment1" value="cardpayment"
                                                                            name="paymentmethod" type="radio">
                                                                        <label for="cardpayment1" class="radio-label_1">
                                                                            <strong>Credit Card/Debit Card/Net
                                                                                Banking</strong><br>
                                                                            <small>Pay using any credit/debit card, net
                                                                                banking or UPI app like Google Pay, PhonePe,
                                                                                Paytm and more..</small>
                                                                        </label>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="submit" class="next-btn16 hover-btn place-order-button">Place
                                        Order</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
    @push('scripts')
        <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
        {!! JsValidator::formRequest('App\Http\Requests\Frontend\Order\OrderStoreRequest', '#order-store-form') !!}
        {!! JsValidator::formRequest('App\Http\Requests\Frontend\Address\AddressStoreRequest', '#address-store-form') !!}
        {!! JsValidator::formRequest('App\Http\Requests\Frontend\Address\AddressUpdateRequest', '#address-edit-form') !!}
        <script>
            $(document).on('click', '.edit-address', function() {
                var address_id = $(this).data('address-id');
                $.ajax({
                    url: '{{ route('customer.address.edit') }}',
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    data: {
                        address_id: address_id
                    },
                    success: function(response) {
                        var address = response.address;
                        console.log(address);
                        $('#address-edit-form input[name="receiver_name"]').val(address.receiver_name);
                        $('#address-edit-form input[name="receiver_phone"]').val(address.receiver_phone);
                        $('#address-edit-form input[name="receiver_email"]').val(address.receiver_email);
                        $('#address-edit-form input[name="email"]').val(address.receiver_email);
                        $('#address-edit-form input[name="house_no"]').val(address.house_no);
                        $('#address-edit-form input[name="society"]').val(address.society);
                        $('#address-edit-form input[name="city"]').val(address.city);
                        $('#address-edit-form input[name="state"]').val(address.state);
                        $('#address-edit-form input[name="pincode"]').val(address.pincode);
                        $('#address-edit-form input[name="address_id"]').val(address.uuid);
                        $('#address-edit-form input[name="type"][value="' + address.type + '"]').prop(
                            'checked', true);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });

            $('input[name="address_id"]').on('change', function() {
                $('#address_id').val($(this).val());
            });
        </script>
    @endpush
@endsection