@extends('frontend.m9')

@section('styles')
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
@endsection

@section('content')
    <!-- content -->
    @if ($message = Session::get('error'))
        <div class="col-12 p-2">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>{{ $message }}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    @endif
    @if ($errors->any())
        <div class="col-12 p-2">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                @foreach ($errors->all() as $error)
                    <strong>{{ $error }}</strong>
                @endforeach
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    @endif
    <div id="content" role="main">
        <form method="POST" name="payment" action="{{ url('/payment') }}">
            <input type="hidden" name="device_manufacturer_id" id="device_manufacturer_id" >
            <input type="hidden" name="device_model_id" id="device_model_id" >
            <input type="hidden" name="device_condition_id" id="device_condition_id" >
            <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-content toko-left-content"
                        style="margin-top: 130px; padding-bottom: 100px">

                        <div class="step-title next">
                            <span><i>1</i></span>
                            <h2><a style="text-decoration: none; color:#212529;" href="{{ url()->previous() }}">Shipping &
                                    Delivery</a></h2><br />
                        </div>
                        <div class="step-title next active">
                            <span><i>2</i></span>
                            <h2>Payment</h2>
                        </div>
                        <div class="sticky-content">
                            <h1>Payment</h1><br />
                            <div class="step-body">
                                <!--  <form action="{{ route('admin.orders.store') }}" method="POST" enctype="multipart/form-data"> -->
                            </div>
                        </div>
                        <form method="POST" action="{{ url('/success') }}">

                            <div class="col-sm-12 col-md-4">

                                <div class="row payment">
                                    @csrf
                                    <input type="hidden" name="customer_id" id="customer_id" class="form-control"
                                        value="{{ request()->customer_id ?? '' }}">
                                    <input type="hidden" name="order_email" id="order_email" class="form-control"
                                        value="{{ request()->order_email ?? '' }}">
                                    <input type="hidden" class="form-control" id="customer_first_name"
                                        name="customer_first_name" value="{{ request()->customer_first_name ?? '' }}">
                                    <input type="hidden" class="form-control" id="customer_last_name"
                                        name="customer_last_name" value="{{ request()->customer_last_name ?? '' }}">
                                    <input type="hidden" class="form-control" id="order_phone" name="order_phone"
                                        value="{{ request()->order_phone ?? '' }}">
                                    <input type="hidden" class="form-control" id="promo_code" name="promo_code"
                                        value="{{ request()->promo_code ?? '' }}">
                                    <input type="hidden" class="form-control" id="delivery_id" name="delivery_id"
                                        value="{{ request()->delivery_id ?? '' }}">
                                    <input type="hidden" id="order_address" name="order_address" class="form-control"
                                        value="{{ request()->order_address ?? '' }}">
                                    <input type="hidden" id="order_note" name="order_note" class="form-control"
                                        value="{{ request()->order_note ?? '' }}">
                                    <input type="hidden" id="is_business_address" name="is_business_address"
                                        class="form-control" value="{{ request()->is_business_address ?? '' }}">
                                    <input type="hidden" id="same_as_shipping" name="same_as_shipping" class="form-control"
                                        value="{{ request()->same_as_shipping ?? '' }}">
                                    <input type="hidden" id="get_notification" name="get_notification" class="form-control"
                                        value="{{ request()->get_notification ?? '' }}">
                                    <div class="form-group">
                                        <select name="payment" id="mpupay" class="form-control select2" required>
                                            <option value="">Choose Payment Type</option>
                                            @foreach ($payment_types as $payment_type)
                                                <option value="{{ $payment_type->id }}">{{ $payment_type->name }}</option>
                                            @endforeach
                                            {{-- <option value="1">Cash on Delivery</option>
                                                <option value="2">Pay with MPU</option>
                                                <option value="3">Pay with VISA/JCB</option>
                                                <option value="4">Pay with KBZPay</option>
                                                <option value="5">Pay with Wave Pay</option> --}}

                                        </select>
                                    </div>


                                    <div class="col-md-12 continue-button">
                                        <div id="1" class="mpubtn" style="display:none">
                                            <input class="btn_payment" type="submit" value="Continue">
                                        </div>

                                        <div class="col-md-12 continue-button">
                                            <div id="2" class="mpubtn" style="display:none">
                                                <input class="btn_payment" type="submit" value="Continue">
                                            </div>
                                            <div class="col-md-12 continue-button">
                                                <div id="3" class="mpubtn" style="display:none">
                                                    <input class="btn_payment" type="submit" value="Continue">
                                                </div>
                                                <div class="col-md-12 continue-button">
                                                    <div id="4" class="mpubtn" style="display:none">
                                                        <input class="btn_payment" type="submit" value="Continue">
                                                    </div>
                                                    <div class="col-md-12 continue-button">
                                                        <div id="5" class="mpubtn" style="display:none">
                                                            <input class="btn_payment" type="submit" value="Continue">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </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">
                                Customer Information
                            </div>
                            <div class="cart-summary-order-container clearfix">
                                <div class="cart-summary-order-item row clearfix ng-scope">
                                    <div class="order-price ng-binding ng-scope">
                                        <p><span>Email :</span>
                                            {{ session()->has('order_email') ? session('order_email') : Auth::guard('customer')->user()['email'] }}
                                        </p>
                                        <p><span>User Name
                                                :</span>{{ session()->has('customer_first_name') ? session('customer_first_name') : Auth::guard('customer')->user()['first_name'] }}
                                            {{ session()->has('customer_last_name') ? session('customer_last_name') : Auth::guard('customer')->user()['last_name'] }}
                                        </p>
                                        <p><span>Phone No
                                                :</span>{{ session()->has('order_phone') ? session('order_phone') : Auth::guard('customer')->user()['phone_no'] }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="cart-summary-title clearfix">
                                Order Summary
                            </div>

                            <div class="cart-summary-order-container clearfix">
                                <div class="cart-summary-item-container clearfix">
                                    @php
                                        $gst = 0;
                                        $total = 0;
                                        $base_price = 0;
                                        $fee = 0;
                                    @endphp
                                    @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="{{ url('storage/product') }}/{{ $da->options->image }}">
                                                </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>
                                                            <svg width="20" height="20">
                                                            </svg>
                                                        </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 ?? 0 }} MMK</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">GST (5% included)</div>
                                        <div class="col-md-5 tax-value">

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

                                    <div class="clearfix order-tax row" >
                                        <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 class="clearfix order-tax row" style="border-bottom: 1px solid gray;">
                                        <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>
                                            <output
                                                id="fee">{{ number_format($data['delivery']->fee) . ' MMK' ?? '' }}</output>
                                            <!-- <input type="text" class="form-control" id="fee" readonly> -->
                                        </div>
                                    </div>

                                </div>

                                <div class="totals ng-scope row">
                                    <div class="col-md-6 tax-name">
                                        <span>Total</span>
                                    </div>
                                    <div class="col-md-6 tax-value text-right">
                                        <div class="tax-price text-right ng-binding">
                                            <output id="sum">{{ $grand_total . ' MMK' ?? '' }}</output>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="step-title next">
                    <span><i>3</i></span>
                    <h2>Order Complete</h2>
                </div>
            </div>

            
        </form>
    </div>
    <!-- content -->
@endsection
@section('scripts')
    <script src="{{ asset('js/productdetail.js') }}"></script>
    <script src="{{ asset('js/bootstrap-bandle.js') }}"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#mpupay').change(function() {
                $('.mpubtn').hide();
                $('#' + $(this).val()).show();
            });

            var total = "";
            var delivery = "";
            var iNum = parseInt(total);
            var deliveryFee = parseInt(delivery);
            var tradeInFee = 0;

            var storedTradeInArray = JSON.parse(localStorage.getItem('trade_in'));
            if(storedTradeInArray != null)
            {
                $('#trade_in_fee').html(storedTradeInArray.trade_in_price.toLocaleString()+' MMK');
                tradeInFee = storedTradeInArray.trade_in_price;
            }
            let grandTotal = iNum  - tradeInFee;
            $('#sum').html(grandTotal.toLocaleString()+' MMK');
            $('#device_manufacturer_id').val(storedTradeInArray.device_manufacturer);
            $('#device_model_id').val(storedTradeInArray.device_model);
            $('#device_condition_id').val(storedTradeInArray.device_condition);

            var storedTradeInArray = JSON.parse(localStorage.getItem('trade_in'));
            var storedTradeInImages=storedTradeInArray.trade_in_images;
            var url = "{{ route('upload-trade-in-images') }}";
            var result = null;
            $.ajax({
                async: false,
                headers: { 'X-CSRF-Token': "{{ csrf_token() }}" },
                mimeType: "multipart/form-data",
                url: url,
                type: 'POST',
                data: { images: storedTradeInImages },
                success: function (response) {
                    
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // console.error("Error:", errorThrown);
                }
            });
        });
    </script>
@endsection