@extends('frontend.m9')
@section('styles')
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('css/trade-in.css') }}">
    <style>
        .trade-in-modal-content {
            border-radius: 30px;
        }
    </style>
@endsection
@section('content')
    <!-- content -->
    <div id="content" role="main">
        <div class="containermake mh-70">
            <div class="checkout-page-container ng-checkout checkout-wrapper clearfix row ng-scope">
                <div class="col-sm-12 col-md-8 checkout-left-content checkout-content toko-left-content">
                    <div class="sticky-content">
                        <h1 class="checkout-title row">
                            Checkout
                        </h1>
                        <section>
                            <div class="step-title active">
                                <span>
                                    <i>1</i>
                                </span>
                                <h2>Shipping & Delivery</h2>
                            </div>

                            <div class="step-body">
                                <!--  <form action="{{ route('admin.orders.store') }}" method="POST" enctype="multipart/form-data"> -->
                                <form method="get" action="{{ url('/payment') }}">
                                    @csrf
                                    <input type="hidden" class="form-control" name="customer_id"
                                        value="{{ $customer->id }}">
                                    <div class="checkout-form-group row">
                                        <div class="checkout-email-address col-sm-12 col-md-7">
                                            <div class="user-email-label"> Email address </div>
                                            <!--  <div class="user-email-label"> yemun56@gmail.com</div> -->
                                            <div class="form-input">
                                                <input type="text" class="form-control" name="order_email"
                                                    id="order_email" value="{{ $customer->email }}">
                                            </div>
                                        </div>

                                        <div class="col-sm-12 col-md-7">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 customer-fields">
                                                    <div class="form-group">
                                                        <label class="control-label">
                                                            <span class="firstName-label">
                                                                First Name
                                                            </span>
                                                        </label>

                                                        <div class="form-input">
                                                            <input type="text" class="form-control"
                                                                id="customer_first_name" name="customer_first_name"
                                                                value="{{ $customer->first_name ?? '' }}">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-12 col-md-12 customer-fields">
                                                    <div class="form-group">
                                                        <label class="control-label">
                                                            <span class="firstName-label">
                                                                Last Name
                                                            </span>
                                                        </label>

                                                        <div class="form-input">
                                                            <input type="text" class="form-control"
                                                                id="customer_last_name" name="customer_last_name"
                                                                value="{{ $customer->last_name ?? '' }}">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-12 col-md-12 customer-fields">
                                                    <div class="form-group">
                                                        <label class="control-label">
                                                            <span class="firstName-label">
                                                                Mobile Number
                                                            </span>
                                                        </label>

                                                        <div class="form-input">
                                                            <input type="text" class="form-control" id="order_phone"
                                                                name="order_phone" value="{{ $customer->phone_no ?? '' }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="checkout-form-group row">
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="headline">
                                                        Delivery Address
                                                    </div>
                                                </div>

                                                <div class="col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label">
                                                            <span>Choose Township</span>
                                                        </label>
                                                        <select name="delivery_id" id="deliveries"
                                                            class="form-control select2 " required>

                                                            <option value="">{{ trans('global.pleaseSelect') }}
                                                            </option>
                                                            @foreach ($deliveries as $id => $delivery)
                                                                <option value="{{ $delivery->id }}"
                                                                    {{ (isset($userInsurance) ? $userInsurance->delivery_id : old('delivery_id')) == $delivery->id ? 'selected' : '' }}
                                                                    data-fee="{{ $delivery->fee ?? '0' }}">
                                                                    {{ $delivery->township }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label">
                                                            <span class="firstName-label">
                                                                Address
                                                            </span>
                                                        </label>
                                                        <div class="form-input">
                                                            <input type="text" id="order_address" name="order_address"
                                                                class="form-control" required=""
                                                                value="{{ $customer->address ?? '' }}">
                                                            <span>Enter Address Manually</span>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="col-sm-12 col-md-12">
                                                    <label class="control-label">
                                                        <span class="firstName-label">
                                                            Delivery Notes
                                                        </span>
                                                        <span class="optional">
                                                            (optional)
                                                        </span>
                                                    </label>

                                                    <div class="form-input">
                                                        <textarea maxlength="100" name="order_note" class="form-control"
                                                            placeholder="Please add delivery notes if you have specific delivery instructions, e.g. location of building entry or lift lobby (max 100 characters)"> </textarea>
                                                    </div>
                                                </div>

                                                <div
                                                    class="col-sm-12 col-md-12 shipping-fields checkbox-fields save-address-fields">
                                                    <div class="form-group">
                                                        <label class="control-label"> This is a business address
                                                            <span class="form-input checkbox">
                                                                <input type="checkbox" name="is_business_address"
                                                                    class="checkbox-input">
                                                                <span class="checkbox-label">
                                                                    <span class="checkbox-square checkbox-alignment">
                                                                        <span class="checkbox-icon icon-tick-dark">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                width="13" height="12"
                                                                                viewBox="3 3 13 12">
                                                                                <path fill="none" fill-rule="evenodd"
                                                                                    stroke="#000" stroke-linecap="square"
                                                                                    stroke-width="2"
                                                                                    d="M4 9.1l3 2.4L11.5 4"></path>
                                                                            </svg>
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>


                                    </div>


                                    <div class="checkout-form-group row active">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="headline">Trade-in</div>
                                                    <b>Do you have a device to trade-in?</b>
                                                </div>
                                                <div
                                                    class="col-sm-12 col-md-12 shipping-fields checkbox-fields save-address-fields d-flex">
                                                    <div class="form-group">
                                                        <label class="control-label "> Yes
                                                            <span class="form-input checkbox">
                                                                <input type="checkbox" name="trade_in"
                                                                    class="checkbox-input trade-in">
                                                                <span class="checkbox-label">
                                                                    <span class="checkbox-square checkbox-alignment">
                                                                        <span class="checkbox-icon icon-tick-dark">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                width="13" height="12"
                                                                                viewBox="3 3 13 12">
                                                                                <path fill="none" fill-rule="evenodd"
                                                                                    stroke="#000" stroke-linecap="square"
                                                                                    stroke-width="2"
                                                                                    d="M4 9.1l3 2.4L11.5 4"></path>
                                                                            </svg>
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </span>
                                                        </label>
                                                    </div>
                                                    <div class="mt-0 ml-4 edit_trade_in_div d-none">
                                                        <a class="btn edit_trade_in" style="padding:0">
                                                            <svg xmlns="http://www.w3.org/2000/svg" height="26"
                                                                width="28" viewBox="0 0 576 512">
                                                                <path
                                                                    d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1 .8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" />
                                                            </svg>
                                                            <label class="control-label "> Edit Trade-in</label>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="headline">Billing Details</div>
                                                </div>

                                                <div
                                                    class="col-sm-12 col-md-12 shipping-fields checkbox-fields save-address-fields">
                                                    <div class="form-group">
                                                        <label class="control-label"> Same as Shipping
                                                            <span class="form-input checkbox">
                                                                <input type="checkbox" name="same_as_shipping"
                                                                    value='1' checked class="checkbox-input">
                                                                <span class="checkbox-label">
                                                                    <span class="checkbox-square checkbox-alignment">
                                                                        <span class="checkbox-icon icon-tick-dark">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                width="13" height="12"
                                                                                viewBox="3 3 13 12">
                                                                                <path fill="none" fill-rule="evenodd"
                                                                                    stroke="#000" stroke-linecap="square"
                                                                                    stroke-width="2"
                                                                                    d="M4 9.1l3 2.4L11.5 4"></path>
                                                                            </svg>
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="checkout-form-group row">
                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <hr>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="checkout-form-group row checkout-options">
                                        <div class="col-sm-12 col-md-12 checkbox-fields marketing-option-field">
                                            <div class="form-group">
                                                <label class="control-label"> I would like to receive notification,
                                                    promotional and marketing materials about products, services and/or
                                                    events of Samsung Asia Pte. Ltd., Samsung SDS Asia Pacific Pte Ltd
                                                    (eCommerce Reseller) and their respective partners through my contact
                                                    details provided herein.
                                                    <span class="form-input checkbox">
                                                        <input type="checkbox" name="get_notification"
                                                            class="checkbox-input">
                                                        <span class="checkbox-label">
                                                            <span class="checkbox-square checkbox-alignment">
                                                                <span class="checkbox-icon icon-tick-dark">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="13"
                                                                        height="12" viewBox="3 3 13 12">
                                                                        <path fill="none" fill-rule="evenodd"
                                                                            stroke="#000" stroke-linecap="square"
                                                                            stroke-width="2" d="M4 9.1l3 2.4L11.5 4">
                                                                        </path>
                                                                    </svg>
                                                                </span>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                        <!--
                                        <div class="col-sm-12 col-md-12 checkbox-fields">
                                            <div class="form-group">
                                                <label class="control-label">  I would like to receive notification, promotional and marketing materials about products, services and/or events of Samsung Asia Pte. Ltd., Samsung SDS Asia Pacific Pte Ltd (eCommerce Reseller) and their respective partners through my contact details provided herein.
                                                    <span class="form-input checkbox">
                                                        <input type="checkbox" class="checkbox-input">
                                                        <span class="checkbox-label">
                                                            <span class="checkbox-square checkbox-alignment">
                                            <span class="checkbox-icon icon-tick-dark">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="3 3 13 12">
                                                    <path fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="square" stroke-width="2" d="M4 9.1l3 2.4L11.5 4"></path>
                                                </svg>
                                            </span>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </label>
                                            </div>
                                        </div> -->

                                    </div>

                                    <div class="row shop">
                                        <div class="col-md-12 continue-button">
                                            <!-- <button class="btn btn-default btn-details-fixed ng-scope">
                                                Continue
                                            </button> -->
                                            <!-- <a href="#" class="product_btn_one">
                                              <span>Continue</span>
                                            </a> -->
                                            <input class="btn btn-info" type="submit" value="Continue">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </section>

                        <section>
                            <div class="step-title next">
                                <span>
                                    <i>2</i>
                                </span>
                                <h2>Payment</h2>
                            </div>
                        </section>

                        <section>
                            <div class="step-title next">
                                <span>
                                    <i>3</i>
                                </span>
                                <h2>Order Complete</h2>

                            </div>

                            <div class="row">
                                <div class="col-md-12 visible-md visible-lg">
                                    <div class="yCmsComponent toko-payment-banner">
                                        <div class="single-col row">
                                            <div class="col-xs-12">
                                                <div class="supported-payments">
                                                    <p class="supported-payments-heading">
                                                        Supported payment types:
                                                    </p>

                                                    <div class="cards">
                                                        <ul class="list-inline">
                                                            <li>
                                                                <img src="/../images/mastercard.png">
                                                            </li>

                                                            <li>
                                                                <img src="/../images/visa.png">
                                                            </li>

                                                            <li>
                                                                <img src="/../images/americanexpress.webp">
                                                            </li>

                                                            <li>
                                                                <img src="/../images/0-percent-v5.webp">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 checkout-right-content checkout-content toko-right-content">
                    <div class="cart-summary-block">
                        <div class="cart-summary-title clearfix">
                            Order Summary
                            <a href="#" class="pull-right edit-link">Edit</a>
                        </div>

                        <div class="cart-summary-order-container clearfix">
                            <div class="cart-summary-item-container clearfix">

                                @foreach ($data['cart'] as $da)
                                    @php
                                        $base_price += $da->price * $da->qty;
                                    @endphp

                                    <div class="cart-summary-order-item row clearfix ng-scope">
                                        <div class="col-xs-2 col-sm-1 col-md-2">
                                            <div class="order-image">
                                                <img
                                                    src="/../images/sg-galaxy-tab-s6-t860-sm-t860nzaaxsp-frontgray-248455986.webp">
                                            </div>
                                        </div>

                                        <div class="col-xs-10 col-sm-11 col-md-10">
                                            <div class="clearfix row item-summary-wrapper">
                                                <div class="col-xs-6 item-summary-information">
                                                    <div class="order-name">
                                                        <span >{{ $da->name }}</span>
                                                        
                                                        @if($da->options->dis_note != null)
                                                        <br>
                                                        <span class="text-muted" style="font-size: 11px">({{$da->options->dis_note}})</span>
                                                        @endif
                                                        <br>
                                                        <span class="small"
                                                            style="color: blue">{{ $da->options->color_name }}
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="col-xs-6">
                                                    <div class="order-price text-right ng-binding ng-scope">
                                                        {{ number_format($da->price * $da->qty) . ' MMK' }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <!-- <div class="order-discount clearfix">
                            <span>Bundle Promo</span>
                        </div> -->
                            @php
                                $total = $gst + $base_price;
                            @endphp

                            <div class="tax-summary-cart ng-scope">
                                <div class="clearfix order-tax row">
                                    <div class="col-md-7 tax-name">Base Price</div>
                                    <div class="col-md-5 tax-value">
                                        <div class="tax-price text-right ng-binding">{{ $sub_total . ' MMK' ?? '' }}</div>
                                    </div>
                                </div>

                                <!-- <div class="clearfix order-tax row">
                                <div class="col-xs-8 tax-name">GST (5% included)</div>
                                <div class="col-xs-4 tax-value">

                                    <div class="tax-price text-right ng-binding">{{ $gst ?? '' }}</div>
                                </div>
                            </div> -->

                                <div class="clearfix order-tax row">
                                    <div class="col-md-7 tax-name">Promotion</div>
                                    <div class="col-md-5 tax-value">
                                        <div class="tax-price text-right ng-binding">
                                            {{ number_format($discount) . ' MMK' ?? '' }}</div>
                                    </div>
                                </div>

                                <div class="clearfix order-tax row">
                                    <div class="col-md-7 tax-name">Discount</div>
                                    <div class="col-md-5 tax-value">
                                        <div class="tax-price text-right ng-binding">
                                            {{ number_format($discount_price) . ' MMK' ?? '' }}</div>
                                    </div>
                                </div>

                                <div class="clearfix order-tax row">
                                    <div class="col-md-7 tax-name">Delivery Fee</div>
                                    <div class="col-md-5 tax-value text-right">
                                        <div class="tax-price text-right ng-binding"></div>
                                        {{ $fee . ' MMK' ?? '' }}
                                        <!-- <input type="text" class="form-control" id="fee" readonly> -->
                                    </div>
                                </div>

                                <div class="clearfix order-tax row" style="border-bottom: 1px solid gray;">
                                    <div class="col-md-7 tax-name">Trade-in Fee</div>
                                    <div class="col-md-5 tax-value text-right">
                                        <div class="tax-price text-right ng-binding"></div>
                                        <output id="trade_in_fee"> 0 MMK </output>
                                        <!-- <input type="text" class="form-control" id="fee" readonly> -->
                                    </div>
                                </div>

                            </div>

                            <div class="totals ng-scope row">
                                <div class="col-md-7 tax-name">
                                    <span>Total</span>
                                </div>
                                <!-- <span class="pull-right ">{{ $total ?? '' }}</span> -->
                                <div class="col-md-5 tax-value text-right">
                                    <div class="tax-price text-right ng-binding"></div>
                                    <output id="sum">{{ $grand_total . ' MMK' ?? '' }}</output>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content -->
    {{-- trade in modal --}}
    <div class="modal fade bd-example-modal-lg" id="trade_in_modal" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content trade-in-modal-content rounded-1 ">

                <div class="modal-header">
                    <div class="w-100 text-center">
                        <h3 class="m-3 font-weight-bold">First, tell us about your trade in</h3>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body justify-content-center">
                    <div class="trade-in-body">
                        <form id="trade-in-form" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="manufacturer">Manufacturer</label>
                                <select class="form-control" id="device_manufacturer">
                                    <option value="" selected disabled>Select</option>
                                    @foreach ($manufacturers as $manufacturer)
                                        <option class="device_manufacturer_{{ $manufacturer->id }}"
                                            value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</option>
                                    @endforeach
                                </select>
                                <small id="device_manufacturer_message" class="form-text text-danger  d-none">Manufacture
                                    field is
                                    required.</small>
                            </div>
                            <div class="form-group">
                                <label for="device_model">Model</label>
                                <select class="form-control" id="device_model">
                                    <option value="" selected disabled>Select</option>
                                </select>
                                <small id="device_model_message" class="form-text  text-danger  d-none">Model field is
                                    required.</small>
                            </div>
                            <div class="form-group">
                                <label for="condition">Condition</label>
                                <select class="form-control" id="device_condition">
                                    <option value="" selected disabled>Select</option>
                                </select>
                                <small id="device_condition_message" class="form-text  text-danger  d-none">Condition
                                    field is
                                    required.</small>
                            </div>
                            <div class="form-group">
                                <label for="trade-in-images">Upload your trade-in device's images (min -3 , max -
                                    5)</label>
                                <div class="formbold-mb-5 formbold-file-input">
                                    <input type="file" name="trade_in_images" id="trade_in_images" multiple />
                                    <label for="trade_in_images">
                                        <div>
                                            <span class="formbold-drop-file"> Drop files here </span>
                                            <span class="formbold-or"> Or </span>
                                            <span class="formbold-browse"> Browse </span>
                                        </div>
                                    </label>
                                </div>
                                <div id="imagePreviews">
                                    {{-- @if(session()->has('trade_in_images'))
                                        @foreach(session()->get('trade_in_images') as $key=>$tImages)
                                        <div class="formbold-file-list formbold-mb-5">
                                            <div class="formbold-file-item">
                                                <img class="trade-in-image" src="{{asset('storage/'.$tImages)}}" /><span class="formbold-file-name">  Image {{$key+1}}</span>                   
                                                <button type="button" class="close close_trade_in_image" aria-label="Close" data-path="{{$tImages}}"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                        </div>
                                        @endforeach
                                    @endif --}}
                                </div>
                                <small id="trade_in_images_message" class="form-text text-danger  d-none">Images are
                                    required.</small>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer flex-column justify-content-center mb-4">
                    {{-- <button type="button" class="btn btn-secondary rounded-pill p-1" data-dismiss="modal">Close</button> --}}
                    <button
                        class="btn btn-dark rounded-pill p-2 px-5 mb-4 text-uppercase trade-in-continue">Continue</button>
                    <small id="term_and_condition" class="form-text text-muted">By clicking "Continue", you agree to the
                        Trade-in Program <a href="{{ route('trade-in-terms-and-condition') }}">Terms and
                            Conditions</a></small>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/productdetail.js') }}"></script>
    <script src="{{ asset('js/bootstrap-bandle.js') }}"></script>
    @include('frontend.common.trade-in-script')
    <script>
        // $(document).ready(function(){
        //     var total = "";
        //     var iNum = parseInt(total);
        //     $('#deliveries').change(function(){
        //         $('#fee').val($(this).find(":selected").data("fee"));
        //         var fees = $(this).find(":selected").data("fee");

        //         if (fees == undefined) {
        //             var sum = iNum;
        //         }else{
        //             var sum = iNum + fees;
        //         }
        //         $('#sum').val(sum);
        //         console.log(sum);
        //     });
        // });
    </script>
@endsection