@extends('layouts.front_end')
@section('title', 'Checkout')
@section('content')
<div>
    <style>
        #headerOneCheckOut,
        #sticky-header,
        #headerThreeCheckout,
        #footerOneCheckOut {
            display: none;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
            table-layout: fixed;
        }

        table caption {
            font-size: 1.5em;
            margin: .5em 0 .75em;
        }

        table tr {
            background-color: #fdfdfd;
            border: 1px solid #ddd;
            padding: .35em;
        }

        table th,
        table td {
            padding: .625em;
            text-align: center;
        }

        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        @media screen and (max-width: 600px) {
            table {
                border: 0;
            }

            table caption {
                font-size: 1.3em;
            }

            table thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }

            table tr {
                border-bottom: 3px solid #ddd;
                display: block;
                margin-bottom: .625em;
            }

            table td {
                border-bottom: 1px solid #ddd;
                display: block;
                font-size: .8em;
                text-align: right;
            }

            table td::before {
                /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            table td:last-child {
                border-bottom: 0;
            }
        }

        /* general styling */
        body {
            font-family: "Open Sans", sans-serif;
            line-height: 1.25;
        }

        #mobileResponsiveFooter {
            display: none;
        }

        .stock-info{
            display: block;
            color: #fff;
            /*font-size: 12px;*/
            padding: 1px 13px;
            border-radius: 4px;
        }

        .stock-info-bg-color{
            background: #ff6000;
            padding: 2px;
            border-radius: 2px;
            text-align: left;
        }
    </style>

    <main>
        <form id="checkout" method="POST" action="{{ route('confirm-order') }}" enctype="multipart/form-data"
            class="checkout-form" accept-charset="utf-8">
            <section class="checkout-area pb-20">
                <div class="text-center py-2 rounded"
                    style="background-color: black;position: fixed;width: 100%;z-index: 2;">
                    <a href="{{ route('home') }}" class="float-left">

                        <i class="fas fa-arrow-left pl-1" style="color: white;font-size: 20px;"></i>
                    </a>
                    <span class="mt-1" style="color: white;font-weight: bold; font-size: 20px;">
                        @if (isset($language->checkout_page_header_title))
                        {{$language->checkout_page_header_title}}
                        @else
                        Quick Checkout
                        @endif
                    </span>
                </div>

                <div class="container pt-40">

                    @csrf
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="checkout-wrap">
                                <div class="row mt-4">
                                    @if(!Auth::user())
                                    <div class="col-sm-12">
                                        <div class="form-grp">
                                            <label for="business_name" style="color: black;">
                                                @if (isset($language->business_name_label))
                                                {{$language->business_name_label}}
                                                @else
                                                Business Name
                                                @endif
                                                <span>*</span></label>
                                            <input class="form-control" type="text" name="business_name" required
                                                value="@if(Auth::user()){{Auth::user()->Contact->business_name}}@endif"
                                                placeholder="@if (isset($language->business_name_placeholder)) {{$language->business_name_placeholder}} @else Name @endif
                                                ">
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-grp">
                                            <label for="fName">
                                                @if (isset($language->your_name_label))
                                                {{$language->your_name_label}}
                                                @else
                                                Name
                                                @endif
                                                <span>*</span>
                                            </label>
                                            <input type="text" name="fName" required
                                                value="@if(Auth::user()){{Auth::user()->name}}@endif" placeholder=" @if (isset($language->your_name_placeholder)) {{$language->your_name_placeholder}} @else Name @endif
                                                ">
                                        </div>
                                    </div>

                                    <div class="col-sm-12">
                                        <div class="form-grp">
                                            <label for="mobile">
                                                @if (isset($language->mobile_number_label))
                                                {{$language->mobile_number_label}}
                                                @else
                                                Mobile Number
                                                @endif
                                                <span>*</span></label>
                                            <input type="text" name="mobile" required
                                                   value="@if(Auth::user()){{Auth::user()->mobile}}@endif"
                                                   placeholder="@if (isset($language->your_mobile_number_placeholder)) {{$language->your_mobile_number_placeholder}} @else Your Mobile Number @endif ">


{{--                                            @if(Auth::user()){{Auth::user()->mobile}}@endif--}}
{{--                                            <input type="text" name="mobile" value="{{$contact_info?->mobile}}" placeholder="@if (isset($language->your_mobile_number_placeholder)) {{$language->your_mobile_number_placeholder}} @else Your Mobile Number @endif" required>--}}
                                        </div>
                                    </div>
                            <div class="col-sm-12">
                                <div class="form-grp">
                                    <label>
                                        @if (isset($language->zilla_label))
                                        {{$language->zilla_label}}
                                        @else
                                        Zila
                                        @endif
                                        *</label>
                                    <select class="custom-select district" name="district_id" required>
                                        <option value="">
                                            @if (isset($language->select_zila_option_text))
                                            --{{$language->select_zila_option_text}}--
                                            @else
                                            --Select--
                                            @endif
                                        </option>
                                        @foreach ($Districts as $zilla)
                                        <option value="{{$zilla->id}}"
                                            class="district-items division_id_{{$zilla->division_id}} " @if($zilla->
                                            name=='Dhaka') selected @endif style="color:black;">{{$zilla->name}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                    <div class="col-12">
                        <div class="form-grp">
                            <label for="shipping_address">
                                @if (isset($language->full_address_label))
                                {{$language->full_address_label}}
                                @else
                                Full address
                                @endif
                                *
                            </label>

                            <textarea id="shipping_address" name="shipping_address"
                                placeholder="@if (isset($language->full_address_placeholder)) {{$language->full_address_placeholder	}} @else Full Address @endif"
                                required>@if(Auth::user()){{Auth::user()->address}}@endif</textarea>
                        </div>
                    </div>
                    @endif

                    @if(Auth::user())
                    <div class="col-12 mt-0 mb-0 pb-0 pt-3">
                        <div class="form-grp mt-0 pt-0">
                            <label for="business_name" style="font-weight: bold;">
                                @if(isset($language->business_name_label))
                                {{$language->business_name_label}}
                                @else
                                Business Name
                                @endif
                            </label>
                            <input type="text" name="business_name" required
                                value="@if(Auth::user()) @if(Auth::user()->Contact) {{Auth::user()->Contact->business_name}} @endif @endif"
                                placeholder="@if(isset($language->business_name_placeholder)) {{$language->business_name_placeholder	}} @else Business Name @endif"
                                readonly>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-grp">
                            <label for="fName">
                                @if (isset($language->your_name_label))
                                {{$language->your_name_label}}
                                @else
                                Name
                                @endif
                                <span>*</span>
                            </label>
                            <input type="text" name="fName" required
                                value="@if(Auth::user()){{Auth::user()->name}}@endif" placeholder=" @if (isset($language->your_name_placeholder)) {{$language->your_name_placeholder}} @else Name @endif
                                ">
                        </div>
                    </div>
                    <div class="col-12 mt-0 mb-0 pb-0 pt-0">
                        <div class="form-grp mt-0 pt-0">
                            <label for="district_id" style="font-weight: bold;">
                                @if(isset($language->zilla_label))
                                {{$language->zilla_label}}
                                @else
                                Zilla
                                @endif
                            </label>
                            <select class="custom-select district" name="district_id" required>
                                <option value="">
                                    @if(isset($language->select_zila_option_text))
                                    --{{$language->select_zila_option_text}}--
                                    @else
                                    --Select--
                                    @endif
                                </option>
                                @foreach ($Districts as $zilla)
                                <option value="{{$zilla->id}}"
                                    class="district-items division_id_{{$zilla->division_id}} " @if(!Auth::user()->
                                    Contact->District) @if($zilla->name=='Dhaka') selected @endif
                                    @elseif($zilla->name==Auth::user()->Contact->District->name) selected @endif
                                    style="color:black;">{{$zilla->name}}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-12 mt-0 mb-0 pb-0 pt-0">
                        <div class="form-grp mt-0 pt-0">
                            <label for="shipping_address" style="font-weight: bold;">
                                @if(isset($language->delivery_address_label))
                                {{$language->delivery_address_label}}
                                @else
                                Delivery address
                                @endif
                            </label>
                            <textarea id="shipping_address" class="form-control" name="shipping_address"
                                placeholder="@if(isset($language->full_address_placeholder)) {{$language->full_address_placeholder	}} @else Full Address @endif"
                                required readonly
                                style="background-color: white;">@if(Auth::user()) @if(Auth::user()->Contact) {{Auth::user()->Contact->shipping_address}} @endif @endif</textarea>

                        </div>
                    </div>
                    <div class="col-12 mt-0 pt-0">
                        <div class="form-grp mt-0 pt-0">
                            <label for="mobile" style="font-weight: bold;">
                                @if(isset($language->mobile_number_label))
                                {{$language->mobile_number_label}}
                                @else
                                Mobile
                                @endif
                            </label>
                            <input type="text" name="mobile" required
                                value="@if(Auth::user()) @if(Auth::user()->Contact) {{Auth::user()->Contact->mobile}} @endif @endif"
                                placeholder="মোবাইল নাম্বার" readonly>
                        </div>
                    </div>

                    @endif
                </div>
</div>
</div>
</div>
</div>

<div class="container">
    {{-- Start Cart Product --}}
    <h5 class="text-center" style="color: #ff5c00;">
        @if (isset($language->ordered_product_title))
        {{$language->ordered_product_title}}
        @else
        Ordered Product
        @endif
    </h5>
    <div class="table-responsive-xl">
        @php $totalPrice = 0; $totalCashBack  = 0; @endphp
        @if($cardBadge['data']['products'])
        @php $totalPrice = $cardBadge['data']['total_price'] @endphp
        <table class="" style="width: 100%;">
            <thead>
                <tr>
                    <th class="product-thumbnail"></th>
                    {{-- <th scope="col" class="product-name" style="font-weight: bold;">পণ্য</th> --}}
                    <th scope="col" class="product-price" style="font-weight: bold;">Price</th>
                    <th scope="col" class="product-quantity" style="font-weight: bold;">Quantity</th>
                    <th scope="col" class="product-subtotal" style="font-weight: bold;">SUBTOTAL</th>
                </tr>
            </thead>
            <tbody>
                @foreach($cardBadge['data']['products'] as $productId => $product)

                    @php
			$db_product_slug = \App\Models\Backend\ProductInfo\Product::where(['id'=>$product['product_id']])->first(['slug']);
                        $min_order_quantity =  $product['minimum_order_quantity'];
                        if($product['is_multiplication'] == 1){
                            $min_order_quantity = $product['multiplication_value'];
                        }
                    @endphp

                <tr id="row_{{ $productId }}" style="color: black;">
                    <td class="product-thumbnail" style="border-style: none;">
                        <a href="javascript:void(0)" class="wishlist-remove" data-product-id="{{ $productId }}"><i
                                class="flaticon-cancel-1 text-danger" style="font-weight: bold;"></i></a>
                        <a href="{{ route('product-details',['id'=>$db_product_slug?->slug]) }}" style="float:left;min-height: 104px;">
                            <img loading="lazy" @if($product['Info']['image']!='blank-product-image.png' )
                                src="{{ asset('storage/photo/'.$product['Info']['image']) }}" @else
                                src="{{ asset('image-not-available.jpg') }}" @endif
                                style="height: 90px;width:103px;" alt="">
                        </a>
                        {{-- </td>
                                 <td class="product-name">
                                     <h4> --}}
                        <a href="{{ route('product-details',['id'=>$db_product_slug?->slug]) }}"
                            style="text-transform: capitalize;float: left;font-weight: bold;color: black;text-align: left;">
                            @if(strlen($product['Info']['product_name'])>23)
                            {{ substr($product['Info']['product_name'], 0,22).'...' }}
                            @else
                                {{ $product['Info']['product_name'] }}
                            @endif

                            <br/>
                            @if(isset($product['modelData']) && count($product['modelData']) > 0)
                                    <p style="margin: 0px;padding: 0px;display: block; font-size: 11px;max-width: 160px;color: black;font-weight: 600;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
                                    @foreach($product['modelData'] as $mmodel)
                                    @php
                                        $mm = (array)$mmodel;
                                    @endphp
                                     <span> {{$mm['model']}} - {{$mm['qty']}} </span>,
                                     @endforeach
                                    </p>
                                @endif


                                @if($product['is_have_stock'] == 0)
                                    <br/>
                                    <span class="stock-info m-0 mt-1" style="width: 100%"><span class="stock-info-bg-color">Out of Stock</span></span>
                                @endif
                        </a>


                        {{-- </h4> --}}
                        {{-- <p>Cramond Leopard & Pythong Anorak</p>
                                     <span>65% poly, 35% rayon</span> --}}
                    </td>
                    <td data-label="মূল্য" class="product-price" style="border-style: none; @if(isset($product['modelData']) && count($product['modelData']) > 0) margin-top: 35px; @else margin-top: 14px; @endif">
                        @if($currencySymbol)
                        {{ $currencySymbol->symbol }}
                        @endif
                        <span id="product_unit_price_{{ $productId }}">{{ $product['unit_price'] }}</span>
                    </td>
                    <td data-label="সংখ্যা" class="product-quantity py-0 mt-3 pl-2" style="height: 50px;color: black;">
                        <div class="cart-plus float-right">
                            @if($product['product_type'] == '1')
                            <span>{{ $product['quantity'] }}</span>
                            @else
                            <form action="#">
                                <div class="cart-plus-minus" data-product-id="{{ $productId }}" data-device="desktop">
                                    <input type="text" class="product_quantity product-quantity-cart"
                                        id="product_quantity_{{ $productId }}" data-product-id="{{ $productId }}"
                                        data-minimum-quantity="{{ $min_order_quantity }}"
                                        value="{{ $product['quantity'] }}">
                                    <div class="dec qtybutton">-</div>
                                    <div class="inc qtybutton">+</div>
                                </div>
                            </form>
                           @endif
                        </div>
                        <input type="hidden" id="checkout_page_product_type_{{ $productId }}" value="{{$product['product_type']}}">
                        <input type="hidden" id="is_multiplication_{{ $productId }}" value="{{$product['is_multiplication']}}">
                        <input type="hidden" id="multiplication_value_{{ $productId }}" value="{{$product['multiplication_value']}}">
                        <br>
                    </td>
                    <td data-label="SUBTOTAL" class="product-subtotal" id="product_subtotal_{{ $productId }}"
                        style="font-weight: bold;">
                        <span>
                            @if($currencySymbol)
                            {{ $currencySymbol->symbol }}
                            @endif
                            {{ $product['total_price'] }}
                        </span>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @else
        <div class="alert alert-warning text-center">
            @if(isset($language->no_product_in_shopping_bag_alert_text))
            {{$language->no_product_in_shopping_bag_alert_text}}
            @else
            অর্ডার করতে পণ্য যুক্ত করুন!!
            @endif
            {{-- @if($null_product_message)
               {{ $null_product_message }}
            @endif --}}
        </div>
        @endif
    </div>
    {{-- End Cart Product --}}
</div>
<div class="row p-0 m-0" style="width:100%;">
    <div class="col-12 pb-3">
        <div class="shop-cart-widget py-0 my-0 pt-1">
            <h6 class="title text-center">
                @if (isset($language->bill_total_title))
                {{$language->bill_total_title}}
                @else
                Bill Total
                @endif
            </h6>
            <ul>
                {{-- <li style="color: black;"><span>SUBTOTAL:</span>
                                        @if($currencySymbol)
                                            {{ $currencySymbol->symbol }}
                @endif
                {{ $cardBadge['data']['total_price'] }}
                </li> --}}
                <li class="cart-total-amount pt-2" style="color: black;font-weight: bold;">
                    <center>
                        <span>
                            @if (isset($language->sub_total))
                            {{$language->sub_total}} -
                            @else
                            Subtotal -
                            @endif
                        </span>
                        <span class="amount cart-total-price">
                            @if($currencySymbol)
                            {{ $currencySymbol->symbol }}
                            @endif
                            {{ $totalPrice }}
                            <br>
                            <br>
                        </span>
                    </center>
                </li>
                <li style="display: none">
                    <span>SHIPPING -</span>
                    <div class="shop-check-wrap">
                        @if($shipping_charge)
                        @foreach ($shipping_charge as $shippingCharge )
                        <div class="custom-control custom-radio">
                            <input type="radio" name="shipping_charge" class="shipping-charge" id="customCheck_"
                                value="{{$shippingCharge->shipping_fee}}">{{$shippingCharge->title}}:
                            {{$shippingCharge->shipping_fee}}
                            {{--<input type="radio" name="shipping_charge" class="custom-control-input" id="customCheck_">
                                                <label class="custom-control-label" for="customCheck1">{{$shippingCharge->title}}:
                            {{$shippingCharge->shipping_fee}}</label>--}}
                        </div>
                        @endforeach
                        @else
                        <div class="custom-control custom-radio">
                            <input type="radio" name="shipping_charge" class="shipping-charge" id="customCheck_"
                                value="0" checked> FREE SHIPPING
                            {{--<input type="radio" name="shipping_charge" class="custom-control-input" id="customCheck_">
                                                <label class="custom-control-label" for="customCheck2">FREE SHIPPING</label>--}}
                        </div>
                        @endif
                    </div>
                </li>

                @if($deductible_cash_back_amount > 0)
                <li class="cart-total-amount py-1" style="color: black;font-weight: bold">
                    <center>
                        <span>
                             পূর্বের অর্ডারের ক্যাশ ব্যাক -
                        </span>
                        <span>
                            @if($currencySymbol)
                                {{ $currencySymbol->symbol }}
                            @endif
                            {{$deductible_cash_back_amount}}
                        </span>
                    </center>
                </li>
                @endif




                <li class="cart-total-amount py-1" style="color: black;">
                    <center>
                        <span>
                            @if (isset($language->discount))
                            {{$language->discount}} -
                            @else
                            Discount -
                            @endif
                        </span>
                        <span>
                            @if($currencySymbol)
                            {{ $currencySymbol->symbol }}
                            @endif
                            {{$cardBadge['data']['coupon_discount']}}
                        </span>
                    </center>
                </li>


                <li class="cart-total-amount pt-2" style="color: black;font-weight: bold;">
                    {{-- <span>সর্বমোট বিল:</span>
                                        <input type="hidden" name="check_out_total_amount"
                                            class="check-out-total-amount"
                                            value="{{ $cardBadge['data']['total_price'] - $deductible_cash_back_amount - $cardBadge['data']['coupon_discount'] }}">
                    <span class="amount check-out-total-amount">
                        @if($currencySymbol)
                        {{ $currencySymbol->symbol }}
                        @endif
                        {{ $cardBadge['data']['total_price'] }}
                    </span> --}}
                    <center>
                        <span>
                            @if (isset($language->total))
                            {{$language->total}} -
                            @else
                            Total -
                            @endif
                        </span>
                        <span class="amount cart-total-price-checkout">
                            @if($currencySymbol)
                            {{ $currencySymbol->symbol }}
                            @endif
                            {{ $totalPrice - $deductible_cash_back_amount - $cardBadge['data']['coupon_discount']}}
                            <br>
                            <br>
                        </span>
                    </center>
                </li>
            </ul>
            <div class="bank-transfer">
                <div class="form-group">
                    <label for="basicpill-lastname-input" style="color: #ff5c00;;font-weight:bold;"><i class="fas fa-star" style=></i>@if(isset($companyInfo->order_offer_amount_message)){{$companyInfo->order_offer_amount_message}} @endif<i class="fas fa-star" style=></i></label> <br><br>
                    <label for="basicpill-lastname-input" style="color: #ff5c00;;font-weight:bold;">গ্যারান্টিযুক্ত রিপ্লেস প্রডাক্টের নাম & সংখ্যা লিখুন:</label>
                    <textarea class="form-control" id="note" name="note" rows="3"
                        wire:model.lazy="note"
                        placeholder="এখানে আপনার পূর্বের অর্ডারের গ্যারান্টিযুক্ত ড্যামেজ প্রডাক্টগুলির নাম এবং  সংখ্যা লিখুন!"></textarea>
                </div>
                <center>
                    <input type="checkbox" class="mb-3" id="customCheck4" name="cash_on_delivery" value="Cash On Delivery" checked>
                    <label class="mb-3" for="customCheck4" style="color: black;padding-right: 50px;">
                        @if (isset($language->cash_on_delivery_text))
                        {{$language->cash_on_delivery_text}}
                        @else
                        Cash On Delivery
                        @endif
                    </label>

                    <input type="checkbox" class="mb-3" id="customCheck2" name="delivery_charge" value="1" checked>
                    <label class="mb-3" for="customCheck2" style="color: black;">
                        ডেলিভারি চার্জ প্রযোজ্য
                    </label>
                </center>
            </div>
            <div class="payment-terms py-0 my-0" style="color: black; font-size: 12px;">
                * I have read and agree to the website
                <a href="{{route('terms-conditios')}}">terms
                    and conditions</a>
            </div>

            @if($any_produdct_stockout == 0)
            <button class="btn btn-submit mt-2 btn-hover" type="submit" id="orderFinishCheckout">
                @if (isset($language->checkout_page_order_done_button_text))
                {{$language->checkout_page_order_done_button_text}}
                @else
                Place Order
                @endif
            </button>
            @else
                <button class="btn btn-submit mt-2 btn-hover" type="button" id="orderFinishCheckout" onclick="alert('Please remove stock out product')">
                    @if (isset($language->checkout_page_order_done_button_text))
                        {{$language->checkout_page_order_done_button_text}}
                    @else
                        Place Order
                    @endif
                </button>
            @endif
            <br>
            <br>
        </div>
        <button class="btn btn-submit btn-hover" type="submit"
            style="position: fixed;bottom: 0px;right: 0px;width: 100%;background-color:red;z-index:2;"
            id="orderFinishCheckoutMobile">
            @if (isset($language->checkout_page_order_done_button_text))
            {{$language->checkout_page_order_done_button_text}}
            @else
            Place Order
            @endif
        </button>

        </aside>
    </div>
</div>
</section>
<!-- checkout-area-end -->
</form>
</main>
<!-- end row -->
<script>
    var msg = '{{Session::get('null_product_message')}}';
    var exist = '{{Session::has('null_product_message')}}';
    if(exist){
      alert(msg);
    }
  </script>
</div>

@endsection
@section('script')

<script>

    $(document).ready(function (){
        $('.shipping-charge').on('change', function (){
            var subTotal = {{ $cardBadge['data']['total_price'] }}
            var shippingCharge = 0;
            if( $(this).is(":checked") ){
                shippingCharge = parseFloat($(this).val());
            }
            $(".check-out-total-amount").html(shippingCharge+subTotal)
            $(".check-out-total-amount").val(shippingCharge+subTotal)
        });

    $(document).on('change', '.division', function () {
        // console.log("It works");
            $('.district').prop('selectedIndex', 0);
            $('.upazila').prop('selectedIndex', 0);
            let Id = $(this).val();
            // console.log(Id);
            if (Id == 0) {
                $(".district-items").show();
            } else {
                $(".district-items").hide();
                $(".division_id_" + Id).show();
            }
        });
    $(document).on('change', '.district', function () {
            $('.upazila').prop('selectedIndex', 0);
            let Id = $(this).val();
            if (Id == 0) {
                $(".upazila-items").show();
            } else {
                $(".upazila-items").hide();
                $(".district_id_" + Id).show();
            }
        });

        $(document).on('change', '.upazila', function () {
            $('.union').prop('selectedIndex', 0);
            let Id = $(this).val();
            // if (Id == 0) {
                $(".upazila-items").show();
            // } else {
                // $(".union-items").hide();
                $(".upazila_id_" + Id).show();
            // }
        });

    });
</script>
@endsection