@extends('layouts.front')
@section('content')
@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style type="text/css">
    .form-control {
        border-radius: 0px !important;
    }
    .billing-details-area .alert-danger{
        display: none;
        padding: 5px;
        border-radius: 0px !important;
    }
</style>
@endsection
@if (Auth::guard('customer')->check()) @php $customer = Auth::guard('customer')->user(); @endphp @endif
@php $home = \App\HomePage::findorFail(1); @endphp
<div class="inner-page-banner-area" style="background: url({{asset('/laravel_code/public/banner/' . $home->inner_banner)}}); background-repeat: no-repeat; background-size: cover;">
    <div class="container">
        <div class="pagination-area">
            <h2>Checkout</h2>
            <ul>
                <li><a href="{{route('home')}}">Home</a> - </li>
                <li><a href="{{route('menu')}}">Menu</a> - </li>
                <li>Checkout</li>
            </ul>
        </div>
    </div>
</div>

<!-- Checkout Page Area Start Here -->
<div class="checkout-page-area">
    <div class="container">

        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

                <div class="billing-details-area">
                    <h4 class="cart-area-title">Datos Del Cliente</h4>
                    <form class="reservation-form-select2">
                        <div class="row">
                            <!-- First Name -->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="first-name">Nombre *</label>
                                    <input type="text" id="name" name="name" class="form-control"
                                        value="{{isset($customer)?$customer->name:''}}">
                                    <div class="alert alert-danger name_err_msg_contnr" style="padding: 5px;">
                                        <span id="name_err_msg"></span>
                                    </div>
                                </div>
                                
                            </div>
                        </div>

                        <div class="row">
                            <!-- Email -->
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="email">Dirección de E-mail *</label>
                                    <input type="text" id="email" name="email" class="form-control"
                                        value="{{isset($customer)?$customer->email:''}}">
                                    <div class="alert alert-danger email_err_msg_contnr" style="padding: 5px;">
                                        <span id="email_err_msg"></span>
                                    </div>
                                </div>
                            </div>
                            <!-- Phone -->
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="phone">Celular de contacto *</label>
                                    <input type="text" id="phone" name="phone" class="form-control"
                                        value="{{isset($customer)?$customer->mobile_number:''}}">
                                    <div class="alert alert-danger phone_err_msg_contnr" style="padding: 5px;">
                                        <span id="phone_err_msg"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row delivery_area_section">
                            <!-- Delivery Area -->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">Área de Domicilio *</label>
                                    <select name="delivery_area" id="delivery_area" class="js-example-basic-single form-control">
                                        <option value="0" data-cost="0">Select Delivery Area</option>
                                        @if(isset($delivery_areas) && !empty($delivery_areas))
                                        @foreach($delivery_areas as $row)
                                        <option value="{{$row->area}}" data-cost="{{$row->cost}}">{{$row->area}} - {{$row->locality}} - [ {{$row->cost}} ]</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="alert alert-danger delivery_err_msg_contnr" style="padding: 5px;">
                                        <span id="delivery_err_msg"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row address_section">
                            <!-- Address -->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">Dirección *</label>
                                    <input type="text" id="address" name="address" class="form-control">
                                    <div class="alert alert-danger address_err_msg_contnr" style="padding: 5px;">
                                        <span id="address_err_msg"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>

                <div class="billing-details-area">
                    <h4 class="cart-area-title">Instrucciones especiales de la dirección</h4>

                    <div class="row">
                        <!-- special_instructions -->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <input type="text" id="special_instructions" name="special_instructions"
                                    class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-3">
                    @if(!empty($checkoutSettings) && !empty($checkoutSettings->image))
                        <img src="{{ asset('laravel_code/public/uploads/checkout_settings/' . $checkoutSettings->image) }}" 
                            alt="Para Pedidos De Posters, Pudindes Y Ordenes Con Doble Entrega" style="padding-bottom:10px">
                    @endif
                </div>

            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="order-sheet">
                    <h4>Tu Pedido</h4>
                    <ul class="cart_list"></ul>
                    <h3>Subtotal<span class="subtotal"></span></h3>
                    <h3>Tax<span class="tax"></span></h3>
                    <h3 class="delivery__cart">Delivery Charges<span class="delivery__cart_value">0.000</span></h3>
                    <h3>Total<span id="total"></span></h3>
                </div>

                @if(config('app.mod_loyalty') == true)
                @if(Auth::guard('customer')->check())
                    @php $lp = \App\LoyaltyPoints::first(); @endphp
                    @if($lp && !empty($lp))
                        @if($lp->enabled_points == 1 && $lp->disabled_redeeming == 0)
                        @php
                        $customer =  Auth::guard('customer')->user();
                        $lpc = \App\LoyaltyPointsCustomers::where('customer_id',$customer->id)->first();
                        @endphp
                        <div class="redeem-cont">
                            <hr>
                            <p>Your points: <span><b>{{isset($lpc->total_points)?$lpc->total_points:0}}</b></span></p> 
                            <p class="redeem_success text-success"></p>
                            <p class="redeem_error text-danger"></p>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="hidden" id="redeem_points_discount"> 
                                    <input placeholder="Redeem points" class="form-control" type="text" value="" name="redeem_points" id="redeem_points"> 
                                </div>
                                <div class="col-md-2">
                                    <button class="btn" id="redeem_points_clk">Redeem</button>
                                </div>
                            </div> 
                            <hr>
                        </div>
                        @endif
                    @endif
                @endif
                @endif
                
                @if(!empty($checkoutSettings) && !empty($checkoutSettings->note_delivery_charges))
                    <div id="ndo-warning" class="alert alert-warning">
                        {{ $checkoutSettings->note_delivery_charges }}
                    </div>
                @else
                    <div id="ndo-warning" class="alert alert-warning">
                        Please Note: Delivery charges apply separately for today's order and for any on the following day.
                    </div>
                @endif

                @if(!empty($checkoutSettings) && !empty($checkoutSettings->note_deliver_tomorrow))
                    <div id="ndo-danger" class="alert alert-danger">
                        {{ $checkoutSettings->note_deliver_tomorrow }}
                    </div>
                @else
                    <div id="ndo-danger" class="alert alert-danger">
                        Items marked "We deliver tomorrow" are shipped 24 hours after your order.  
                        Please check individual menu items for delivery timelines.
                    </div>
                @endif
                
                <div class="order-sheet">
                    <h4 class="cart-area-title">Pedido en los próximos días 
                        <br> <small>Una vez realizado el pedido no tendra cambios</small>
                    </h4>
                    
                    <label class="c-input c-radio">
                    <input type="radio" name="order_few_days" class="order_few_days" value="today" checked="" required="">
                        <span class="c-indicator"></span>
                        Este Dia
                    </label> &nbsp; &nbsp;
                    <label class="c-input c-radio">
                    <input type="radio" name="order_few_days" class="order_few_days" value="later" required="">
                        <span class="c-indicator"></span>
                        Luego
                    </label>
                                        
                    <div class="row" id="order_few_days_date" style="display:none">
                        <div class="col-md-6">
                        <input class="form-control" type="date" name="order_few_days_date" id="orderDate" placeholder="yy-mm-dd">
                        </div>
                        <div class="col-md-6">
                        <input class="form-control rt-time" type="text" name="order_few_days_time" value="00:00" placeholder="00:00">
                        </div>
                    </div>
                    
                </div>
                

                <h4 class="cart-area-title">Método de Pago</h4>
                <div class="col-sm-12">
                    <div class="row">

                        <div class="panel with-nav-tabs panel-default">
                            <div class="panel-heading">
                                <ul class="nav nav-tabs">
                                    @if($settings->mop == 'both')
                                    <li class="active"><a href="#card" data-toggle="tab">Tarjeta de Crédito o Débito</a></li>
                                    <li><a href="#cash" data-toggle="tab">Cash On Delivery</a></li>
                                    @elseif($settings->mop == 'cash')
                                    <li class="active"><a href="#cash" data-toggle="tab">Cash On Delivery</a></li>
                                    @elseif($settings->mop == 'card')
                                    <li class="active"><a href="#card" data-toggle="tab">Tarjeta de Crédito o Débito</a></li>
                                    @endif
                                </ul>
                            </div>
                            <div class="panel-body">
                                <div class="tab-content">

                                    <div class="alert alert-success" id="checkout_success" style="display:none;"></div>
                                    <div class="alert alert-danger" id="checkout_error" style="display:none;"></div>
                                    
                                    @if($settings->mop == 'both' || $settings->mop == 'cash')
                                    <div class="tab-pane fade @if($settings->mop == 'cash') in active @endif" id="cash">

                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <div class="pLace-order">
                                                    <button class="btn-send-message btn-block disabled"
                                                        id="confirm_order" type="button">Place Order</button>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    @endif
                                    @if($settings->mop == 'both' || $settings->mop == 'card')
                                    <div class="tab-pane fade in active" id="card">
                                        <div class="col-sm-12">
                                            <div class="card_content">
                                                <div class="panel-body">
                                                    <div id="error_data"></div>
                                                    <div class="form-horizontal" id="payment-form">
                                                        <div class="form-group">
                                                            <div class="row">
                                                                <div class="col-xs-12">
                                                                    <button class="js-payment-checkout btn-send-message btn-block">Pagar</button>
                                                                </div>
                                                                
                                                                <div class="col-xs-12 text-center pay_with_globalpay_cont" style="margin-top: 10px; display:none">
                                                                    <button class="btn-send-message btn-block"
                                                                        data-loading-text="<i class='fa fa-spin fa-spinner'></i> Working..."
                                                                        id="pay_with_globalpay"> Realizar su Pedido</button>
                                                                </div>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

@section('js')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

    document.addEventListener("DOMContentLoaded", function () {
        let today = new Date().toISOString().split("T")[0]; 
        document.getElementById("orderDate").value = today;
    });

    function placeO(){
        var form_data = {
            order: localStorage.getItem(ls+'_cart'),
            order_type: localStorage.getItem(ls+'_order_type'),
            pickup_time: localStorage.getItem(ls+'_pickup_time'),
            payment_type: 'card',
            delivery_charges: $('#delivery_area').find(":selected").attr("data-cost"),
            delivery_area: localStorage.getItem(ls+'_delivery_area'),
            tax: localStorage.getItem(ls+'_tax'),
            tax_rate: localStorage.getItem(ls+'_tax_rate'),
            subtotal: localStorage.getItem(ls+'_subtotal'),
            total: localStorage.getItem(ls+'_Total'),
            discount: localStorage.getItem(ls+'_discount'),
            _token: $('meta[name="csrf-token"]').attr('content'),

            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            address: $('#address').val(),
            special_instructions: $('#special_instructions').val(),
            order_day: $("input[type='radio'][name='order_few_days']:checked").val(),
            order_day_date: $("input[type='date'][name='order_few_days_date']").val(),
            order_day_time: $("input[type='text'][name='order_few_days_time']").val()

        };

        $.post("{{ route('verifyOrder') }}",form_data).then(function (res) {
            if (res.status === 1 && res.order_id !== 0) {
                window.location.href = '{{ route("thankyou",["b"=>"c"])}}';
            } else if (res.status == 2) {
                $('#checkout_error').slideDown().html(res.msg);
                $('#checkout_error').delay(5000).fadeOut('slow');
            }
        });
    }
    
    $('.js-example-basic-single').select2();
    var ls = "{{env('LS')}}";
    var si = localStorage.getItem(ls+'_si');
    $('#special_instructions').val(si);
    var currency = "{{env('CURRENCY')}}";

    $( ".datepicker" ).datepicker({  maxDate: '15', minDate: '0'});

    $(function() {
        
        const hasNDO = localStorage.getItem('cart_with_NDO');
        if (hasNDO === 'true') {
            document.getElementById('ndo-warning').classList.remove('hidden');
            document.getElementById('ndo-danger').classList.remove('hidden');
        }
        
        var cart_data = localStorage.getItem(ls+'_cart');
        if (cart_data === undefined || cart_data.length == 0 || cart_data == "[]") {
            window.location.href = "{{ route('foodMenu') }}";
        }

        if(localStorage.getItem(ls+'_order_type') == 'pickup'){
            $('.delivery_area_section').hide();
            $('.address_section').hide();

            $('.delivery__cart').hide();
        }else{
            $('.delivery__cart').show();
        }
    });

    $("body").on("change" , "#delivery_area" , function(event) {
        event.preventDefault();	
        
        var delivery_charges = $(this).find(':selected').attr('data-cost');

        $('.delivery__cart_value').text(currency+delivery_charges);
        var current_delivery_charges = localStorage.getItem(ls+"_delivery_charges");
        var total = localStorage.getItem(ls+"_Total");
        
        var current_total = parseFloat(total) - parseFloat(current_delivery_charges);
        var grand_total = parseFloat(delivery_charges) + parseFloat(current_total);
        
        localStorage.setItem(ls+"_delivery_charges" , parseFloat(delivery_charges));
        localStorage.setItem(ls+"_Total" , parseFloat(grand_total));
        $('#total').text(currency+parseFloat(grand_total));
    });

    $(".order_few_days").click(function() {
        var value = $("input[type='radio'][name='order_few_days']:checked").val();
        if (value == 'today') {
            $('#order_few_days_date').hide();
        }else{
            $('#order_few_days_date').show();
        }
    });

</script>

@if($settings->mop == 'both' || $settings->mop == 'card')
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>   

    $('.js-payment-checkout').on('click', function () {
        var error = false;  
        if($('#name').val()==""){ 
            $("#name_err_msg").text("Campo de Nombre Obligatorio");
            $(".name_err_msg_contnr").show(200);
            error = true;
        }else{
            $(".name_err_msg_contnr").hide(200);
            error = false;
        }
        if($('#email').val()==""){ 
            $("#email_err_msg").text("Campo de E-mail Obligatorio");
            $(".email_err_msg_contnr").show(200);
            error = true;
        }else{
            $(".email_err_msg_contnr").hide(200);
            error = false;
        }
        if($('#phone').val()==""){ 
            $("#phone_err_msg").text("Campo de Teléfono Obligatorio");
            $(".phone_err_msg_contnr").show(200);
            error = true;
        }else{
            $(".phone_err_msg_contnr").hide(200);
            error = false;
        }
        
        if(localStorage.getItem(ls+'_order_type') == 'delivery'){
            if ($('#delivery_area').val() == 0) {
                $("#delivery_err_msg").text("Delivery Area field is required.");
                $(".delivery_err_msg_contnr").show(200);
                error = true;
                return false;
            }else{
                $(".delivery_err_msg_contnr").hide(200);
                error = false;
            }

            if ($('#address').val() == "") {
                $("#address_err_msg").text("Address field is required.");
                $(".address_err_msg_contnr").show(200);
                error = true;
            }else{
                $(".address_err_msg_contnr").hide(200);
                error = false;
            }
        
        }

        if(error == true){
            return false;
        }else{
            let paymentCheckout = new PaymentCheckout.modal({
        
                client_app_code: "{{env('GP_CLIENT_APP_CODE')}}",
                client_app_key: "{{env('GP_CLIENT_APP_KEY')}}", 
                locale: 'es', 
                env_mode: "{{env('GP_MODE')}}", 
                onOpen: function() {console.log('Modal abierto');},
                onProcess: function() {console.warn('Modal en proceso');},
                onClose: function() {console.log('Modal cerrado');},
                onResponse: function(response) { 
                    console.log(response);
                    if(response.transaction.status == 'success'){
                        placeO();
                        $('.js-payment-checkout').hide();
                    }else{
                        $('#checkout_error').slideDown().html('An error has occurred, please try again.');
                    }
                }
            });
            let btnOpenCheckout = document.querySelector('.js-payment-checkout');
        
            btnOpenCheckout.addEventListener('click', function(){
                paymentCheckout.open({
                    user_id: '{{$gp_uid}}',
                    user_email: $('#email').val(),
                    user_phone: $('#phone').val(), 
                    order_description: 'Prueba',
                    order_amount: Number(localStorage.getItem(ls+'_Total')),
                    order_vat: 0,
                    order_reference: 'Prueba',
                    order_installments_type: 0
                });
            });
          
            window.addEventListener('popstate', function() {
                paymentCheckout.close();
            });
        }
    });
    
</script>
@endif

@if($settings->mop == 'both' || $settings->mop == 'cash')
<script>
    $("body").on("click", "#confirm_order", function (event) {
        
        var error = false;  
        if($('#name').val()==""){ 
            $("#name_err_msg").text("Name field is required.");
            $(".name_err_msg_contnr").show(200);
            error = true;
        }else{
            $(".name_err_msg_contnr").hide(200);
            error = false;
        }
        if($('#email').val()==""){ 
            $("#email_err_msg").text("Email field is required.");
            $(".email_err_msg_contnr").show(200);
            error = true;
        }else{
            $(".email_err_msg_contnr").hide(200);
            error = false;
        }
        if($('#phone').val()==""){ 
            $("#phone_err_msg").text("Phone field is required.");
            $(".phone_err_msg_contnr").show(200);
            error = true;
        }else{
            $(".phone_err_msg_contnr").hide(200);
            error = false;
        }

        if(localStorage.getItem(ls+'_order_type') == 'delivery'){
            if ($('#delivery_area').val() == 0) {
                $("#delivery_err_msg").text("Delivery Area field is required.");
                $(".delivery_err_msg_contnr").show(200);
                error = true;
                return false;
            }else{
                $(".delivery_err_msg_contnr").hide(200);
                error = false;
            }

            if ($('#address').val() == "") {
                $("#address_err_msg").text("Address field is required.");
                $(".address_err_msg_contnr").show(200);
                error = true;
            }else{
                $(".address_err_msg_contnr").hide(200);
                error = false;
            }
        }

        if(error == true){
            return false;
        }

        event.preventDefault();
        var form_data = {
            order: localStorage.getItem(ls+'_cart'),
            order_type: localStorage.getItem(ls+'_order_type'),
            pickup_time: localStorage.getItem(ls+'_pickup_time'),
            payment_type: 'cash',
            delivery_charges: $('#delivery_area').find(":selected").attr("data-cost"),
            delivery_area: localStorage.getItem(ls+'_delivery_area'),
            tax: localStorage.getItem(ls+'_tax'),
            tax_rate: localStorage.getItem(ls+'_tax_rate'),
            subtotal: localStorage.getItem(ls+'_subtotal'),
            total: localStorage.getItem(ls+'_Total'),
            discount: localStorage.getItem(ls+'_discount'),
            _token: $('meta[name="csrf-token"]').attr('content'),

            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            address: $('#address').val(),
            special_instructions: $('#special_instructions').val(),
            order_day: $("input[type='radio'][name='order_few_days']:checked").val(),
            order_day_date: $("input[type='date'][name='order_few_days_date']").val(),
            order_day_time: $("input[type='text'][name='order_few_days_time']").val()
        };

        $.ajax({
            type: 'POST',
            url: "{{ route('verifyOrder') }}",
            data: form_data,
            beforeSend: function () {
                $('#confirm_order').attr('disabled', true).html(
                    '<i class="fa fa-spinner fa-pulse"></i>');
            },
            success: function (response) {
                if (response.status == 0) {
                    var errors = '';
                    $.each(response.msg, function (index, value) {
                        errors += value;
                        errors += '<br>';
                    });
                    $('#checkout_error').slideDown().html(errors);
                    $('#confirm_order').attr('disabled', false).html('Place Order');
                    $('#checkout_error').delay(5000).fadeOut('slow');
                } else if (response.status == 2) {
                    $('#checkout_error').slideDown().html(response.msg);
                    $('#confirm_order').attr('disabled', false).html('Place Order');
                    $('#checkout_error').delay(5000).fadeOut('slow');
                } else {
                    $('#confirm_order').attr('disabled', false).html('Place Order');
                    window.location.href = '{{ route("thankyou",["b"=>"c"])}}';
                }
            },
            error: function (response) {
                $('#checkout_error').slideDown().html('Server error, please try again.');
                $('#confirm_order').attr('disabled', false).html('Place Order');
                $('#checkout_error').delay(5000).fadeOut('slow');
            }
        });
        return false;
    });
</script>
@endif

@if(config('app.mod_loyalty') == true)
<script>
var currency = "{{env('CURRENCY')}}";
$('#redeem_points_clk').on('click', function () {
    if($('#redeem_points_discount').val() !=''){
        $('.redeem_error').show().html('You already redeemed the points.');
        setTimeout(function(){$('.redeem_error').slideUp('fast');}, 3000);
        return false;
    }
    $.ajax({
        url: "{{route('redeemPoints')}}",
        method: 'post',
        data: {
            _token: '{{csrf_token()}}',
            total: localStorage.getItem(ls+'_Total'),
            redeem_points: $('#redeem_points').val()
        },
        beforeSend: function () {
            $('#redeem_points_clk').attr('disabled', true).html('<i class="fa fa-spinner fa-pulse"></i>');
        },
        success: function (response) {
            $('#redeem_points_clk').attr('disabled', false).html('Redeem');
            $('#redeem_points').val('');
            if(response.status == 0){
                $('.redeem_error').show().html(response.msg);
                setTimeout(function(){$('.redeem_error').slideUp('fast');}, 3000);
            }else{

                var total = localStorage.getItem(ls+'_Total');
                var total_after_redeem = total - response.discount;
                $('#redeem_points_discount').val(response.discount);
                localStorage.setItem(ls+'_Total',total_after_redeem);
                localStorage.setItem(ls+'_discount',response.discount);
                $("#total,.Total").text(currency+total_after_redeem);

                $('.redeem_success').show().html(response.msg);
                setTimeout(function(){$('.redeem_success').slideUp('fast');}, 7000);
            }
        },
        error: function () {
            $('#redeem_points').val('');
            $('#redeem_points_clk').attr('disabled', false).html('Redeem');
        }
    });
});
</script>
@endif

@endsection
@endsection