@extends('layouts.app')

@section('title') Checkout @endsection

@section('css')
<link href="{{ asset('css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="container py-5">
    <div>
        <p>Checkout</p>
        
        @if ($cart->items->count() == 0)
        <p class="grey-text">There are nothing in your shopping bag to checkout.</p>

        @else
        <p class="grey-text">Please ensure all the details are accurate and correct.</p>
        @endif
    </div>

    @if ($cart->items->count() > 0)
    <div class="row">
        <!-- left -->
        <div class="col-lg-8">
            <ul class="nav nav-pills nav-justified mb-5" role="tablist">
                <li class="nav-item">
                    <a href="#shipping" class="nav-link active" data-toggle="pill" role="tab" aria-controls="shipping" aria-selected="true">Shipping Method</a>
                </li>
                <li class="nav-item">
                    <a href="#order" class="nav-link" data-toggle="pill" role="tab" aria-controls="order" aria-selected="false">Order Review</a>
                </li>
            </ul>

            <form id="form-checkout">
                <div class="tab-content">
                    <!-- shipping method -->
                    <div id="shipping" class="tab-pane fade show active" role="tabpanel">
                        <div id="accordion-shipping" role="tablist">
                            <!-- delivery -->
                            <div class="card mb-3">
                                <div class="card-header" role="tab">
                                    <div class="custom-control custom-radio"> 
                                        <input type="radio" id="shipping_method_1" class="custom-control-input" name="shipping_method" value="1" checked>
                                        
                                        <label for="shipping_method_1" class="custom-control-label">
                                            <a href="#courier" class="card-title" data-toggle="collapse" aria-expanded="false" aria-controls="courier">Courier Delivery</a>
                                        </label>
                                    </div>
                                </div>
                                
                                <div id="courier" class="collapse show" data-parent="#accordion-shipping" role="tabpanel">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label for="first-name" class="form-label">First Name</label>
                                                <input type="text" id="first-name" class="form-control form-control-lg" name="shipping[first_name]" value="@if ($address){{ $address->first_name }}@endif">
                                            </div>

                                            <div class="col-md-6 form-group">
                                                <label for="last-name" class="form-label">Last Name</label>
                                                <input type="text" id="last-name" class="form-control form-control-lg" name="shipping[last_name]" value="@if ($address){{ $address->last_name }}@endif">
                                            </div>
                                        </div>

                                       <div class="row">
                                            <div class="col-md-6 form-group ">
                                                <label for="street" class="form-label">Street</label>
                                                <input type="text" id="street" class="form-control form-control-lg" name="shipping[street]" value="@if ($address){{ $address->street }}@endif">
                                            </div>

                                            <div class="col-md-6 form-group ">
                                                <label for="city" class="form-label">City</label>
                                                <input type="text" id="city" class="form-control form-control-lg" name="shipping[city]" value="@if ($address){{ $address->city }}@endif">
                                            </div>
                                        </div>

                                       <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label for="postcode" class="form-label">Postcode</label>
                                                <input type="text" id="postcode" class="form-control form-control-lg" name="shipping[postcode]" value="@if ($address){{ $address->postcode }}@endif">
                                            </div>

                                            <div class="col-md-6 form-group">
                                                <label for="state" class="form-label">State</label>
                                                <input type="text" id="state" class="form-control form-control-lg" name="shipping[state]" value="@if ($address){{ $address->state }}@endif">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="phone-number" class="form-label">Phone Number</label>
                                            <input type="text" id="phone-number" class="form-control form-control-lg" name="shipping[phone_number]" value="@if ($address){{ $address->phone_number }}@endif">
                                        </div>

                                        <div class="form-group">
                                            <label form="remark" class="form-label">Remark <small class="text-muted">(Optional)</small></label>
                                            <textarea id="remark" class="form-control form-control-lg" name="shipping[remark]" rows="4"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- delivery -->
                        </div>

                        <div class="my-5 d-flex justify-content-between flex-column flex-lg-row">
                            <a href="{{ route('carts.index') }}" class="btn btn-link text-muted">
                                <i class="fa fa-chevron-left"></i> 
                                <span>Back</span>
                            </a>

                            <a href="#order" class="btn btn-lg btn-link btn-next">
                                <span>Order Review</span>
                                <i class="fa fa-chevron-right"></i>
                            </a> 
                        </div>            
                    </div>

                    <!-- order items -->
                    <div id="order" class="tab-pane fade" role="tabpanel">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Total</th>
                                        <th></th>
                                    </tr>
                                </thead>

                                <tbody> 
                                    @foreach ($cart->items as $item)

                                    @php 
                                        $variation = $item->productVariation;
                                        $product   = $variation->product;      
                                    @endphp
                                    <tr>                    
                                        <td>      
                                            <div class="d-flex align-items-center">
                                                @if ($product->images->count())
                                                <a href="{{ route('products.show', ['slug' => $product->slug]) }}">
                                                    <img src="{{ $product->images->first()->image }}" class="img-fluid product-image" alt="{{ $product->name }}">
                                                </a>
                                                @endif
                                                
                                                <div class="ml-2">
                                                    <a href="{{ route('products.show', ['slug' => $product->slug]) }}" class="product-name">
                                                        {{ str_limit($product->name, 15, '...') }}
                                                    </a>
                                                    
                                                    <span class="product-variation">Variation: {{ $variation->title }}</span>

                                                    @if ($variation->stock == 0)
                                                    <span class="flag">Out of stock</p>

                                                    @elseif ($variation->stock < $item->quantity)
                                                    <span class="flag">Insufficient stock ({{ $variation->stock }} remaining)</p>
                                                    
                                                    @elseif ($product->deleted_at or $variation->deleted_at)
                                                    <span class="flag">Unavailable</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>

                                        <td class="text-center">
                                            <span>{{ $product->unit_price }} Points</span>
                                        </td>
                                    
                                        <td class="text-center">{{ $item->quantity }}</td>
                                        <td class="text-center">{{ $item->price }} Points</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="my-5 d-flex justify-content-between flex-column flex-lg-row float-right">
                            <button type="button" onclick="verification()" class="btn btn-lg btn-link">
                                <span>Place Order</span> 
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </div>   
                    </div>
                     <!-- order items -->
                </div>
            </form>
        </div>
        <!-- left -->

        <!-- right -->
        <div class="col-lg-4">
            <div class="card bg-light mb-3">
                <div class="card-header pb-0">
                    <h6 class="card-title">Order Summary</h6>
                </div>

                <div class="card-body">
                    <ul class="summary-list">
                        <li class="summary-item">
                            <span>My Point</span> 
                            <span>{{ auth()->user()->point }}</span>
                        </li>

                        <li class="summary-item">
                            <span>Total</span> 
                            <span class="summary-total"><span data-attribute="total">{{ $total }} Points</span></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- right -->
    </div>
    @endif
</div>

<div id="verification-popup" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <button id="close_btn" type="button" class="close close-custom" data-dismiss="modal" aria-label="Close" style="display:none;z-index: 9999999;">
                <i class="fas fa-times"></i>
            </button>
            <div class="modal-body"> 
                <form id="form-verification" action="{{ route('orders.store') }}" method="POST" class="text-center">
                    <p class="text-center">Please check your phone {{ $user->verify_phone_number }} for verification code</p>
                    <fieldset>
                        <div>
                        <input type="number" name="verification[]" pattern="[0-9]*"  value="" inputtype="numeric" autocomplete="one-time-code" id="otc-1" required>
                        <!-- Autocomplete not to put on other input -->
                        <input type="number" name="verification[]" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-2" required>
                        <input type="number" name="verification[]" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-3" required>
                        <input type="number" name="verification[]" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-4" required>
                        <input type="number" name="verification[]" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-5" required>
                        <input type="number" name="verification[]" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-6" required>
                        </div>
                    </fieldset>
                    <div id="ten-countdown"></div>
                   <!--  <p class="float-right"><a href='#'>Resend Code</a></p> -->
                    <button type="submit" id="btn-submit" class="btn btn-md btn-login mt-5" style="margin: 0 20% 0;">SUBMIT</button>
                    <button type="button" id="btn-close" class="btn btn-md btn-login mt-5" onclick="close_verification()" style="display: none;margin: 0 20% 0;">CLOSE</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
<script src="{{ asset('js/bootstrap-datetimepicker.js') }}"></script>
<script>
    $('.btn-previous, .btn-next').click(function(e)
    {
        $.Event(e).preventDefault();

        const href = $(this).attr('href');

        $(`[data-toggle="pill"][href="${href}"]`).tab('show');
    });

    function close_verification(){
        $('#verification-popup').hide();
        location.reload();
    }

    function verification(){
        setTimeout(function(){
            $('#close_btn').show();
        }, 10000);

        $.ajax({
            url: `{{ route('orders.verification') }}`,
            type: 'POST',
            data: $('#form-checkout').serialize(),
            dataType: 'json'

        }).done(function(data)
        {
            if (data.status == 'success')
            {
                $('#verification-popup').show();
                countdown( "ten-countdown", 10, 0 );
            }
            else{
                showNoty(data);
            }
        });
    }

    $("#close_btn").click(function() {
        $('#verification-popup').hide();
    });

    $('#form-verification').submit(function(e)
    {   
        $.Event(e).preventDefault();

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $('#form-verification').serialize()+'&'+$('#form-checkout').serialize(),
            dataType: 'json'

        }).done(function(data)
        {
            showNoty(data);

            if (data.status == 'success')
            {
                if (data.data.payment_method == 1)
                {
                    $('#form-payment-wrapper').html(data.data.payment_form);

                    setTimeout(function()
                    {
                        $('#form-payment').submit();
                    }, 1000);
                }

                else
                {
                    setTimeout(function()
                    {
                       window.location = data.data.redirect_url;
                    }, 1000);
                }
            }
        });
    });

    let in1 = document.getElementById('otc-1'),
    ins = document.querySelectorAll('input[type="number"]'),
     splitNumber = function(e) {
        let data = e.data || e.target.value; // Chrome doesn't get the e.data, it's always empty, fallback to value then.
        if ( ! data ) return; // Shouldn't happen, just in case.
        if ( data.length === 1 ) return; // Here is a normal behavior, not a paste action.
        
        popuNext(e.target, data);
        //for (i = 0; i < data.length; i++ ) { ins[i].value = data[i]; }
    },
    popuNext = function(el, data) {
        el.value = data[0]; // Apply first item to first input
        data = data.substring(1); // remove the first char.
        if ( el.nextElementSibling && data.length ) {
            // Do the same with the next element and next data
            popuNext(el.nextElementSibling, data);
        }
    };

    ins.forEach(function(input) {
        /**
         * Control on keyup to catch what the user intent to do.
         * I could have check for numeric key only here, but I didn't.
         */
        input.addEventListener('keyup', function(e){
            // Break if Shift, Tab, CMD, Option, Control.
            if (e.keyCode === 16 || e.keyCode == 9 || e.keyCode == 224 || e.keyCode == 18 || e.keyCode == 17) {
                 return;
            }
            
            // On Backspace or left arrow, go to the previous field.
            if ( (e.keyCode === 8 || e.keyCode === 37) && this.previousElementSibling && this.previousElementSibling.tagName === "INPUT" ) {
                this.previousElementSibling.select();
            } else if (e.keyCode !== 8 && this.nextElementSibling) {
                this.nextElementSibling.select();
            }
            
            // If the target is populated to quickly, value length can be > 1
            if ( e.target.value.length > 1 ) {
                splitNumber(e);
            }
        });
        
        /**
         * Better control on Focus
         * - don't allow focus on other field if the first one is empty
         * - don't allow focus on field if the previous one if empty (debatable)
         * - get the focus on the first empty field
         */
        input.addEventListener('focus', function(e) {
            // If the focus element is the first one, do nothing
            if ( this === in1 ) return;
            
            // If value of input 1 is empty, focus it.
            if ( in1.value == '' ) {
                in1.focus();
            }
            
            // If value of a previous input is empty, focus it.
            // To remove if you don't wanna force user respecting the fields order.
            if ( this.previousElementSibling.value == '' ) {
                this.previousElementSibling.focus();
            }
        });
    });

    /**
     * Handle copy/paste of a big number.
     * It catches the value pasted on the first field and spread it into the inputs.
     */
    in1.addEventListener('input', splitNumber);

    function countdown( elementName, minutes, seconds ){
        var element, endTime, hours, mins, msLeft, time;

        function twoDigits( n )
        {
            return (n <= 9 ? "0" + n : n);
        }

        function updateTimer()
        {
            msLeft = endTime - (+new Date);
            if ( msLeft < 1000 ) {
                element.innerHTML = "verification code expired!";
                $('#btn-close').show();
                $('#btn-submit').hide();
            } else {
                time = new Date( msLeft );
                hours = time.getUTCHours();
                mins = time.getUTCMinutes();
                element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
                setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
            }
        }

        element = document.getElementById( elementName );
        endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
        updateTimer();
    }
</script>
@endsection