@extends('layouts.frontend')

@section('seo')

<title>{{ $systemInfo->name??null }} | Checkout</title>
<meta charset="UTF-8">
<meta name="description" content="{{ $systemInfo->description??null }}">
<meta name="keywords" content="{{ $systemInfo->description??null }}, {{ $systemInfo->description??null }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@endsection

@section('content')

<!-- checkout section  -->
<section class="checkout-section">
            <div class="container">
                <div class="row justify-content-center ">
                    <div class="col-12 ">
                        <ul class="breadcrumb">
                            <li class="crumb"><a href="{{URL::to('/')}}">Home</a></li>
                            <li class="crumb"><span>Checkout</span></li>
                        </ul>

                    </div>
                </div>
                <div class="row mt-4 ">
                    <div class="col-12 col-lg-8 ">
                        <div class="checkout-address">
                            <h2 class="h3">Billing Details</h2>
                            <form class="login-form  checkout-form my-4" action="{{ route('checkout.store') }}" method="post" autocomplete="off">
                                @csrf
                                <input type="hidden" name="billing_total" value="{{ $newSubtotal }}" />
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="first_name"  value="{{ @$billingAddress->first_name }}" placeholder="First Name*" required />
                                            <label for="input" >First Name*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="last_name" value="{{ @$billingAddress->last_name }}" placeholder="Last Name*" required/>
                                            <label for="input" >Last Name*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <select class="input" name= "country" required>
                                                <option value="">Country / Region</option>
                                                <option value="USA" selected>USA</option>
                                            </select>
                                            <label for="input" >Country / Region*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="company_name" value="{{ @$billingAddress->company_name }}" placeholder="Company Name (optional)" />
                                            <label for="input" >Company Name (optional)</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="street_address"  value="{{ @$billingAddress->address }}" placeholder="Street Address*" required/>
                                            <label for="input" >Street Address*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="apartment_number" value="{{ @$billingAddress->apartment }}" placeholder="Apt, suite, unit (optional)" />
                                            <label for="input" >Apt, suite, unit</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="city_town" value="{{ @$billingAddress->city }}" placeholder="City / Town" required/>
                                            <label for="input" >City / Town*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="state" value="{{ @$billingAddress->state }}" placeholder="State*" required/>
                                            <label for="input" >State*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="postal_code" value="{{ @$billingAddress->postal_code }}"  placeholder="Postal Code*" required />
                                            <label for="input" >Postal Code*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="phone_number" value="{{ @$billingAddress->phone_number }}" placeholder="Phone No**" autocomplete="off" required />
                                            <label for="input" >Phone No*</label>
                                        </div>
                                    </div>
                                    <!-- <div class="col-12">
                                        <div class="input-group submit">
                                            <input class="submit" type="submit" name="submit" value="Continue To Delivery"/>
                                        </div>
                                    </div> -->
                                    <div class="col-12">
                                        <div class="remember-me mb-0">
                                            <label class="d-flex justify-content-start"><input type="checkbox" name="save_information" value="1">Save my information for a faster checkout</label>
                                        </div>
                                    </div>
                                </div>
                            
                        </div>
                        <div class="checkout-address my-5">
                            <h2 class="h3">Shipping Address</h2>
                            <p>Select the address that matches your card or payment method.</p>
                            <div class="shipping-details">
                               
                                   <div class="radio-button shipping_select" data-value="1">
                                        <label class="d-flex justify-content-start"><input checked type="radio" name="same_address"  value="1">Same as Billing address</label>
                                    </div>
                                    <div class="radio-button shipping_select" data-value="2">
                                        <label class="d-flex justify-content-start"><input type="radio" name="same_address"  value="2">Use a different shipping address</label>
                                    </div>
                                    <div class="login-form differnet_shipping_address hide_me mt-3">
                                        <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_first_name" placeholder="First Name*"  />
                                            <label for="input" >First Name*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_last_name" placeholder="Last Name*" />
                                            <label for="input" >Last Name*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <select class="input" name= "shipping_country" >
                                                <option value="">Country / Region</option>
                                                <option value="USA">USA</option>
                                            </select>
                                            <label for="input" >Country / Region*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_company_name" placeholder="Company Name (optional)" />
                                            <label for="input" >Company Name (optional)</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_street_address" placeholder="Street Address*" />
                                            <label for="input" >Street Address*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_apartment_number" placeholder="Apt, suite, unit (optional)" />
                                            <label for="input" >Apt, suite, unit</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_city_town" placeholder="City / Town" />
                                            <label for="input" >City / Town*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_state" placeholder="State*" />
                                            <label for="input" >State*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_postal_code" placeholder="Postal Code*"  />
                                            <label for="input" >Postal Code*</label> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="input-group">
                                            <input class="input" type="text" name="shipping_phone_number" placeholder="Phone No**" />
                                            <label for="input" >Phone No*</label> 
                                        </div>
                                    </div>
                                </div>
                                    </div>
                               
                            </div>
                        </div>
                        <div class="checkout-address my-4">
                            <h2 class="h3">Choose Shippment Method</h2>
                            <p>All Shippment Method.</p>
                            <div class="shipping-details p-3">
                                <select name="serviceType" id="ServiceType" required onchange="handleServiceTypeChange()">
                                    <option data-cost="" value="">Select</option>
                                        @foreach ($carriesTypes as $carryType)
                                            <option data-cost="{{ $carryType['shipmentCost'] }}" value="{{ $carryType['serviceCode'] }}">
                                        {{ $carryType['serviceName'] }} - ${{ $carryType['shipmentCost'] }}
                                    </option>
                                @endforeach
                            </select>  
                            </div>                   
                        </div>
                        <div class="checkout-address my-4">
                            <h2 class="h3">Payment Method</h2>
                            <p>All transactions are secure and encrypted.</p>
                            <div class="shipping-details Payment">
                               
                                    <div class="radio-button">
                                        <label class="d-flex justify-content-start"><input class="payment_type" checked type="radio" name="payment_type"  value="CASH">Cash On Delivery<span>Pay with cash upon delivery.</span></label>
                                    </div>
                                    <div class="radio-button">
                                        <label class="d-flex justify-content-start"><input class="payment_type" type="radio" name="payment_type"  value="CARD">Credit Card/ Debit Card <span>We accept all major credit cards.</span></label>
                                        <div class="row login-form mt-4 card_form_div hide_me">
                                            <div class="col-12 col-md-6">
                                                <div class="input-group">
                                                    <input class="input only_digit_allowed" type="text" name="card_number" placeholder="Card Number" maxlength="16" minlength="16"/>
                                                    <label for="input" >Card Number</label> 
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <div class="input-group">
                                                    <input class="input" type="text" name="card_holder_name" placeholder="Card Holder Name " />
                                                    <label for="input" >Card Holder Name </label> 
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <div class="input-group">
                                                    <input class="input" type="text" name="card_expiration" placeholder="Expiration date (MM/YY)" />
                                                    <label for="input" >Expiration date (MM/YY) </label> 
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <div class="input-group">
                                                    <!-- <span class="icon-eye"><i class="fa-regular fa-eye"></i></span> -->
                                                    <input class="input" type="password" name="card_cvv" placeholder="CVV" />
                                                    <label for="input" >CVV</label> 
                                                </div>
                                            </div> 
                                        </div>
                                    </div>
                                
                            </div>
                            <!-- <div class="col-12 mt-5">
                                <div class="input-group submit">
                                    <a href="#" class="btn btn-primary custom-button px-5">Pay</a>
                                </div>
                            </div> -->
                            <div class="col-12 mt-5 login-form">
                                <div class="input-group submit">
                                    <input class="submit" type="submit" name="submit" value="Continue To Delivery">
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4 shipping-price-with-delivery">
                        <div class="cart-total">
                            <div class="cart-title">
                                <h2 class="h5 mb-0">Order Summary</h2>
                            </div>
                            <div class="product-checkout">
                                <ul class="m-0 p-0">
                                    @foreach(Cart::content() as $item)

                                    <li class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            @if($item->model->photos->count() > 0)
                                                <figure class="mb-0 me-3"><img src="/storage/{{ $item->model->photos->first()->images }}" alt=""></figure>
                                            @else
                                                <figure class="mb-0 me-3"><img src="./images/cart-prod-1.jpg" alt=""></figure>
                                            @endif
                                            <div class="checkout-title me-2">
                                                <div class="d-flex align-items-center">
                                                    <h3 class="h6 ">{{ $item->model->name }} </h3>
                                                    <!-- <h3 class="h6">x2</h3> -->
                                                </div>
                                                <p class="mb-0">Quantity : {{ $item->qty }}</p>
                                                <p class="mb-0">Condition : {{ $item->model->product_condition }}</p>
                                            </div>
                                        </div>
                                        <h4 class="h6 mb-0">${{ $item->subtotal }}</h4>
                                    </li>
                                    @endforeach
                                    <!--<li class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <figure class="mb-0 me-3"><img src="./images/cart-prod-2.png" alt=""></figure>
                                            <div class="checkout-title me-2">
                                                <div class="d-flex align-items-center">
                                                    <h3 class="h6 ">HERO9 Black - Waterproof... </h3>
                                                    <h3 class="h6">x2</h3>
                                                </div>
                                                <p class="mb-0">Condition : Brand New</p>
                                            </div>
                                        </div>
                                        <h4 class="h6 mb-0">$60.30</h4>
                                    </li>
                                    <li class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <figure class="mb-0 me-3"><img src="./images/cart-prod-3.jpg" alt=""></figure>
                                            <div class="checkout-title me-2">
                                                <div class="d-flex align-items-center">
                                                    <h3 class="h6 ">HERO9 Black - Waterproof... </h3>
                                                    <h3 class="h6">x2</h3>
                                                </div>
                                                <p class="mb-0">Condition : Brand New</p>
                                            </div>
                                        </div>
                                        <h4 class="h6 mb-0">$60.30</h4>
                                    </li>-->
                                </ul>
                            </div>
                            <div class="cart-pay-table">
                                <div class="subtotal">
                                    <h3 class="h6">Price ({{Cart::content()->count()}} items)</h3>
                                    <h4 class="h6">${{ $newSubtotal }}</h4>
                                </div>
                                <!--div class="subtotal">
                                    <h3 class="h6">Discount</h3>
                                    <h4 class="h6 green">-$14.00</h4>
                                </div>
                                <div class="subtotal">
                                    <h3 class="h6">Delivery Charges</h3>
                                    <h4 class="h6">+$14.00</h4>
                                </div>-->
                                @php
                                    $tax_percent = config('constants.options.tax');
                                    $tax_val = $newSubtotal/100 * $tax_percent;
                                @endphp
                                <div class="subtotal">
                                    <h3 class="h6">Tax</h3>
                                    <h4 class="h6">${{ $tax_val }}</h4>
                                </div>
                                @php 
                                    $orderTotal = (float) $newSubtotal + (float) $tax_val;
                                @endphp
                                <div class="Total">
                                    <h3 class="h5">Total:</h3>
                                    <h4 class="h5" id="total-price">${{ $orderTotal }}</h4>
                                </div>
                                


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
<!-- checkout section end -->

@endsection

@section("css")
 <style>
    .hide_me{
        display:none;
    }
    </style>
@endsection

@section("scripts")

<script>
    $(".shipping_select").click(function(){
        let value = $(this).data("value");
        if(value == "1"){
            $(".differnet_shipping_address").addClass("hide_me");
            $(".differnet_shipping_address").find("input").val("");
        }else{
            $(".differnet_shipping_address").removeClass("hide_me");
        }
    });

    $(".payment_type").click(function(){
        let selectedType = $(this).val();
        if(selectedType == "CARD"){
            $(".card_form_div").removeClass("hide_me");
            $(".card_form_div").find("input").prop('required', true);
        }else{
            $(".card_form_div").addClass("hide_me");
            $(".card_form_div").find("input").val("");
            $(".card_form_div").find("input").prop('required', false);
        }
    });

    $(".only_digit_allowed").on('input', function() {
        // Remove any non-digit characters
        $(this).val($(this).val().replace(/\D/g,''));
    });

    //shipment detail


    function handleServiceTypeChange() {
    var selectedValue = $('#ServiceType').val();
    var selectedCost = $('#ServiceType option:selected').data('cost');

    $.ajax({
        url: "{{ route('checkout.shipmentCalculation') }}",  
        type: 'POST', 
        data: {
            serviceCode: selectedValue,
            shipmentCost: selectedCost 
        },
        success: function(response) {
            console.log(response);
            $(".shipping-price-with-delivery").html(response);
        },
        error: function(xhr, status, error) {
            console.error(xhr.responseText);
        }
    });
}

// function handleServiceTypeChange() {
//     var selectedValue = $('#ServiceType').val();
//     var selectedCost = $('#ServiceType option:selected').data('cost');
   
// }



</script>





</script>

@endsection