@extends('layouts.app')

@section('title') Checkout @endsection

@section('content')
<div class="container py-5">
    <div class="heading-box">
        <h1 class="heading display-4">Checkout</h1>
        
        @if ($cart->subtotal == 0)
        <p class="lead">There are nothing in your shopping bag to checkout.</p>

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

    @if ($cart->subtotal  > 0)
    <div class="row">
        <!-- left -->
        <div class="col-lg-8">
            @guest
            <ul class="nav nav-pills nav-justified mb-5" role="tablist">
                <li class="nav-item">
                    <a href="#guest" class="nav-link h-100 active" data-bs-toggle="pill" role="tab" aria-controls="guest" aria-selected="false">
                        Guest Information
                    </a>
                </li>

                <li class="nav-item">
                    <a href="#payment" class="nav-link h-100 disabled" data-bs-toggle="pill" role="tab" aria-controls="payment" aria-selected="@auth{{ 'true' }}@else{{ 'false' }}@endif">
                        Payment Method
                    </a>
                </li>
      
                <li class="nav-item">
                    <a href="#order" class="nav-link h-100 @auth{{ 'active' }}@else{{ 'disabled' }}@endif" data-bs-toggle="pill" role="tab" aria-controls="order" aria-selected="false">
                        Order Review
                    </a>
                </li>
            </ul>
            @endif

            <form id="form-checkout" action="{{ route('orders.store') }}" method="POST">
                @guest
                <div class="tab-content">
                    <div id="guest" class="tab-pane fade in active show" role="tabpanel">
						<div class="row gy-3">							
                            <div class="col-sm-6">
                                <label for="first_name" class="form-label">First Name</label>
                                <input type="text" id="first_name" class="form-control form-control-lg" name="first_name">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="col-sm-6">
                                <label for="last_name" class="form-label">Last Name</label>
                                <input type="text" id="last_name" class="form-control form-control-lg" name="last_name">
                                <div class="invalid-feedback"></div>
                            </div>
							
                            <div class="col-6">
                                <label for="email" class="form-label">Email</label>
                                <input type="text" id="email" class="form-control form-control-lg" name="email">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="col-6">
                                <label for="email_confirmation" class="form-label">Confirm Email</label>
                                <input type="text" id="email_confirmation" class="form-control form-control-lg" name="email_confirmation">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="col-sm-6">
                                <label for="phone" class="form-label">Phone</label>
                                <input type="text" id="phone" class="form-control form-control-lg" name="phone">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>

                        <div class="my-5 text-center text-lg-end">
                            <a href="#payment" class="btn btn-lg btn-link btn-next disabled">
                                <span>Continue to Payment Method</span> 
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </div>   
                    </div>
  
                    <div id="payment" class="tab-pane fade" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h5>Credit Card & Online Bank Transfer</h5>
                            </div>

                            <div class="card-body">
                                <p class="text-muted">You will be redirected to Johor Pay Payment Gateway page upon clicking "Place Order" in Order Review.<br>Please do not close or refresh the page until the payment has been completed.</p>

                                <div class="mb-3">
                                    <label for="payment_method" class="form-label">Payment Method</label>

                                    <select id="payment_method" class="form-select" name="payment_method">
                                        <option selected disabled>Select one</option>
                                        <option value="FPX">FPX Online Banking</option>
                                        <option value="CARD">Debit / Credit Card</option>
                                    </select>
                                </div>

                                <div class="d-none mb-3">
                                    <label for="bank_code" class="form-label">Bank</label>

                                    <select id="bank_code" class="form-select" name="bank_code">
                                        <option selected disabled>Select one</option>

                                    @foreach ($banks as $bank)
                                        @if ($bank->enabled)
                                        <option value="{{ $bank->value }}">{{ $bank->name }}</option>
                                        @endif
                                    @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                  
                        <div class="my-5 d-flex justify-content-between flex-column flex-lg-row">
                            <a href="#guest" class="btn btn-link text-muted btn-previous">
                                <i class="fa fa-chevron-left"></i> 
                                <span>Back to Guest Information</span>
                            </a>
                            
                            <a href="#order" class="btn btn-lg btn-link btn-next disabled">
                                <span>Continue to Order Review</span>
                                <i class="fa fa-chevron-right"></i>
                            </a> 
                        </div>   
                    </div>

                    <div id="order" class="tab-pane fade" role="tabpanel">
                        @include('partials.checkout_items')

                        <div class="my-5 d-flex justify-content-between flex-column flex-lg-row">
                            <a href="#payment" class="btn btn-link text-muted btn-previous">
                                <i class="fa fa-chevron-left"></i> 
                                <span>Back to Payment Method</span>
                            </a>

                            <button type="submit" class="btn btn-lg btn-link">
                                <span>Place Order</span> 
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </div>   
                    </div>
                </div>
                @else       

                @include('partials.checkout_items')

                <div class="my-5 text-center text-lg-end">
                    <button type="submit" class="btn btn-lg btn-link">
                        <span>Place Order</span> 
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div> 
                @endif

                <input type="hidden" name="discount_id">
            </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 d-none">
                            <span>Discount</span> 
                            <span>{{ config('app.currency') }} <span data-attribute="discount_amount">0.00</span></span>
                        </li>

                        <li class="summary-item">
                            <span>Total</span> 
                            <span class="d-flex flex-column">
                                <span class="summary-total">{{ config('app.currency') }} <span data-attribute="total">{{ $cart->total }}</span></span>
                                <small class="text-muted">Inclusive SST</small>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- discount -->
            <div class="card bg-light mb-3">
                <div class="card-header pb-0">
                    <h6 class="card-title">Discount</h6>
                </div>

                <div class="card-body">
                    <form id="form-discount" action="{{ route('discounts.verify') }}" method="POST">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-lg" name="code" autocomplete="off">
    
                            <input type="hidden" name="subtotal" value="{{ $cart->subtotal }}">
                            <input type="hidden" name="total" value="{{ $cart->total }}">

                            <button type="submit" class="btn btn-dark">Apply Code</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- right -->
    </div>
    @endif
</div>
@endsection

@section('js')
<script>
    $('.btn-previous, .btn-next').click(function(e)
    {
        e.preventDefault();

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

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

    $('[name="first_name"], [name="last_name"], [name="email"], [name="email_confirmation"], [name="phone"]').blur(function(e)
    {
        if ($(this).val() == '')
        {
            $(this).addClass('is-invalid').siblings('.invalid-feedback').text('required');

            return;
        }

        if ($(this).val() && $(this).attr('name') == 'email_confirmation')
        {
            if ($('[name="email"]').val() != $('[name="email_confirmation"]').val())
            {
                $(this).addClass('is-invalid').siblings('.invalid-feedback').text('not matched');

                return;
            }
        }

        $(this).removeClass('is-invalid');

        let is_valid = true;
        
        $(this).parent().siblings().find('.form-control').each(function(i, item)
        {
            if ($(item).hasClass('is-invalid') || $(item).val() == '')
            {       
                is_valid = false;
                
                return false;
            }
        });

        $('[data-bs-toggle="pill"][href="#payment"], .btn-next[href="#payment"]').toggleClass('disabled', !is_valid);
    });

    $('[name="payment_method"]').change(function()
    {
        switch($(this).val())
        {
            case 'FPX':
            {
                $('[name="bank_code"]').parent().removeClass('d-none');
                $('[data-bs-toggle="pill"][href="#order"], .btn-next[href="#order"]').addClass('disabled');

                break;
            }

            case 'CARD':
            {
                $('[name="bank_code"]').val('').parent().addClass('d-none');
                $('[data-bs-toggle="pill"][href="#order"], .btn-next[href="#order"]').removeClass('disabled');

                break;
            }
        }
    });

    $('[name="bank_code"]').change(function()
    {
        $('[data-bs-toggle="pill"][href="#order"], .btn-next[href="#order"]').removeClass('disabled');
    });

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

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            dataType: 'json',

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

            if (res.status == 'success')
            {
                const discount_amount = parseFloat(res.data.discount_amount).toFixed(2);
                const total           = parseFloat(res.data.total).toFixed(2);

                $('[data-attribute="discount_amount"]').text(discount_amount).closest('li').removeClass('d-none');
                $('[data-attribute="total"]').text(total);

                $('[name="total"]').val(res.data.total);
                $('[name="discount_id"]').val(res.data.discount_id);

                resetPoint();
            }   
        }); 
    });

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

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            dataType: 'json'

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

            if (res.status == 'success')
            {
                setTimeout(function()
                {
                    window.location = res.data.redirect_url;
                }, 1000);
            }
        });
    });
</script>
@endsection