@extends('shop.app')
@section('content')


    <div class="container wow fadeIn">

        <!--Grid row-->
        <div class="row">

            <!--Grid column-->
            <div class="col-md-4 mb-4 my-2">
                <div class="title-left">
                    <h3>Podaci za naplatu</h3>
                </div>
                <!--Card-->
                <div class="checkout-data">

                    <!--Card content-->
                    {!! Form::open([
                        'url' => route('finish-order'),
                        'method' => 'post',
                        'class' => 'form-body',
                        'id' => 'checkout-form',
                        'enctype' => 'multipart/form-data',
                        'role' => 'form',
                        'files' => true,
                    ]) !!}
                    <div class="col-12 mb-2">

                        <!--firstName-->
                        <div class="md-form ">
                            {!! Form::label('customer_first_name', 'Ime') !!}
                            {!! Form::text('customer_first_name', '', ['class' => 'form-control', 'value' => old('customer_first_name')]) !!}
                        </div>

                    </div>

                    <div class="col-12 mb-2">

                        <!--lastName-->
                        <div class="md-form">
                            {!! Form::label('customer_last__name', 'Prezime') !!}
                            {!! Form::text('customer_last_name', '', ['class' => 'form-control']) !!}
                        </div>

                    </div>


                    <div class="col-12 mb-2">
                        <div class="md-form">
                            {!! Form::label('customer_phone_number', 'Broj telefona') !!}
                            {!! Form::text('customer_phone_number', '', ['class' => 'form-control']) !!}
                        </div>
                    </div>

                    <div class="col-12 mb-2">
                        <div class="md-form">
                            {!! Form::label('customer_email', 'Email') !!}
                            {!! Form::text('customer_email', '', ['class' => 'form-control']) !!}
                        </div>
                    </div>

                    <!--address-->
                    <div class="col-12 md-form mb-5">
                        {!! Form::label('customer_address', 'Adresa') !!}
                        {!! Form::text('customer_address', '', ['class' => 'form-control']) !!}
                    </div>
                    <div class="row">
                        <div class="col-6 md-form mb-5">
                            {!! Form::label('customer_city', 'Grad') !!}
                            {!! Form::text('customer_city', '', ['class' => 'form-control']) !!}
                        </div>
                        <div class="col-6 md-form mb-5">
                            {!! Form::label('customer_zip', 'Poštanski broj') !!}
                            {!! Form::text('customer_zip', '', ['class' => 'form-control']) !!}
                        </div>
                    </div>


                </div>
                <!--/.Card-->

            </div>
                <div class="col-md-4 mb-4 my-2">
                    <div class="title-left">
                        <h3>Dostava</h3>
                    </div>
                    <ul class="list-group mb-3 z-depth-1">
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Dostava (BAM)</span>
                            <strong>{{ getDeliveryPrice() }}</strong>
                        </li>
                    </ul>
                    <div class="title-left">
                        <h3>Metode plaćanja</h3>
                    </div>

                    <div class="d-block my-3">
                        <div class="custom-control custom-radio">
                            <input id="pik_pay" name="payment_method" value="monri" type="radio" class="custom-control-input"
                                checked required>
                            <label class="custom-control-label" for="pik_pay">PikPay</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input id="cash_on_delivery" name="payment_method" value="pouzece" type="radio"
                                class="custom-control-input" required>
                            <label class="custom-control-label" for="cash_on_delivery">Plaćanje pouzećem</label>
                        </div>
                    </div>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="same-address">
                        <label class="custom-control-label" for="same-address">Adresa na koju treba izdati račun je ista kao i adresa isporuke</label>
                    </div>

                </div>
            <div class="col-md-4 mb-4 my-2">

                <!-- Heading -->
                <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <div class="title-left">
                        <h3>Narudžba</h3>
                    </div>
                    <span class="badge badge-secondary badge-pill">{{ count($cart->cartItems) }}</span>
                </h4>

                <!-- Cart -->
                <ul class="list-group mb-3 z-depth-1">
                    @foreach ($cart->cartItems as $item)
                        <li class="list-group-item d-flex justify-content-between">
                            <span>{{ $item->product->getName() }}</span>
                            <strong>{{ $item->product->finalPrice() }}BAM</strong>
                        </li>
                    @endforeach
                    <hr>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Cijena (BAM)</span>
                        <strong>{{ getCartTotal() }}</strong>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Dostava (BAM)</span>
                        <strong>{{ getDeliveryPrice() }}</strong>
                    </li>
                    @if (getCart()->discount > 0)
                        <li class="list-group-item d-flex justify-content-between bg-light">
                            <div class="text-success">
                                <h6 class="my-0">Promo kod</h6>
                            </div>
                            <span class="coupon-discount text-success">- {{ getCart()->discount }}%</span>
                        </li>
                    @endif
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Ukupno (BAM)</span>
                        <strong>{{ getOrderTotal() }}</strong>
                    </li>
                </ul>
                <!-- Cart -->

                <!-- Promo code -->

                <div class="input-group coupon-code">
                    <input type="text" class="form-control" id="coupon-value" placeholder="Promo code"
                        aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button id="apply-coupon" class="btn btn-secondary btn-md waves-effect m-0" type="button">Iskoristi
                            kupon</button>
                    </div>
                </div>
                <!-- Promo code -->

                <hr class="mb-4">
                <button class="btn btn-primary btn-lg btn-block" type="submit">Nastavi</button>

                {!! Form::close() !!}

            </div>
            <!--Grid column-->

        </div>
        <!--Grid row-->

    </div>

@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            if ($(".coupon-discount").length) {
                $(".coupon-code").hide();
            }

            $("#apply-coupon").click(function() {
                $(".error-message").hide();
                let ajaxURL = '/use-coupon';
                let coupon = $("#coupon-value").val();
                console.log(coupon);
                let $_token = $("input[name=_token]").val();
                let data = {
                    _token: '{{ csrf_token() }}',
                    'coupon': coupon
                };
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: ajaxURL,
                    data: data,
                    success: function(data) {
                        console.log(data);
                        if (data.success === false) {
                            $(".input-group-append").after(
                                '<div class="col-xs-12 col-lg-12 eroor-message"><p class="text-danger">' +
                                data.errors + '</p></div>');
                        } else {
                            $('.coupon-discount').text('-' + data.discount + '%');
                            window.location.reload();
                        }
                    },

                });
            });
        });

    </script>
@endsection