@section('title', '- Place your order')

@extends('layouts.user-profile', ['withOutAside' => true])

@section('section-body')
    <h3>Review your orders</h3>
    <hr class="hr_user">

    <form action="{{ route('buy.create') }}" method="post" class="row" id="buy_form"
          onsubmit="return validateForm(this)">
        {{ method_field('POST') }}
        {{ csrf_field() }}
        <input name="multiple" value="true" type="hidden">
        <div class="col-md-12">
            @php
                $totals = 0;
            @endphp
            @foreach ($products as $key => $product)
                @php
                    $totals += $product['price'];
                @endphp
                <div id="{{ 'product_id_' . $product['id'] }}" class="row" style="margin-bottom: 30px">
                    <div class="col-md-12 row">
                        <input type="hidden" value="{{ $product['id'] }}" name="product[]">
                        <input type="hidden" value="{{ $product['delivery'] }}}" name="delivery[]">
                        <div class="col-md-2">
                            <img id="" src="{{ $product['photos'][0]['file'] }}" class="img-responsive">
                        </div>
                        <div class="col-md-6">
                            @if (!session('user'))
                                <div class="alert alert-danger">
                                    <p>@lang('products.need_logged_buy')</p>
                                </div>
                            @endif
                            <h3>{{ $product['name'] }}</h3>
                            <p>{{ str_limit($product['description'], 200) }}</p>

                            @if ($product['delivery'] == 1)
                                <p><b>@lang('products.note'):</b>
                                    @lang('products.info_delivery') </p>
                            @endif

                            <p><b>@lang('products.seller'):</b>
                                <a href={{ route("seller.view", [ "id" => $product['user']['id']]) }}  class="without_under">
                                    {{ $product['user']['first_name'] }}
                                    {{ $product['user']['last_name'] }}
                                </a>
                            </p>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-grey">
                                <div class="panel-content">
                                    <div class="address_place">
                                        <h4 class="bold">
                                            @lang('products.quantity'):
                                            <span class="pull-right text-price-confirm">
                                                <input name="qty[]" value="1" type="number"
                                                       class="form-control calculate-price" style="max-width: 120px;">
                                            </span>
                                        </h4>
                                        <br>

                                        <h4 class="bold">
                                            <input type="hidden" name="price[]" value="{{ $product['price'] }}">
                                            @lang('products.price'):
                                            <span class="pull-right text-price-confirm">{{ $product['price'] }}
                                                eBits
                                            </span>
                                        </h4>
                                        <h4 class="bold">
                                            <input type="hidden" name="total[]" value="{{ $product['price'] }}">
                                            Sub Total:
                                            <span id="{{ 'total_' . ($key + 1) }}"
                                                  class="pull-right text-price-confirm">{{ $product['price'] }}
                                                eBits
                                            </span>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                            <button onclick="deleteProduct('{{ $product['id'] }}' , event )"
                                    class="btn btn-ebit-noborder btn-block">
                                @lang('products.delete_article') </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="col-md-12">
            <hr class="hr_buy">
        </div>

        <div class="col-md-8">
            <h4>Shipping Address </h4>
            <select class="form-control" name="destination">

                @foreach($addresses_list as $sub_add)
                    @foreach($sub_add as $add)
                        <option value="{{$add->id}}">
                            {{$add->state}}, {{$add->city}} {{$add->address}} {{$add->zip_code}}
                        </option>
                    @endforeach
                @endforeach
            </select>


        </div>
        <div class="col-md-4">
            <h2>
                Total:
                <span id="totals" class="pull-right text-price-confirm">
                    {{ $totals }} eBits
                </span>
            </h2>
            <button class="btn btn-ebit-noborder btn-block">
                @lang('products.buy_articles')
            </button>
        </div>
    </form>
@endsection

@push('js')

    <script>
        $(document).ready(function () {
            $(".calculate-price").keyup(calculateTotal);
        });

        function deleteProduct(product_id, event) {
            event.preventDefault();
            var url = '{{ route("shopping-cart.remove", ":id") }}';
            url = url.replace(':id', product_id);
            const token = $('input[name="_token"]').val();

            $.ajax({
                url,
                type: 'GET',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': token,
                },
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    $(`#product_id_${product_id}`).html('');
                    calculateTotal();
                },
                error: function (error) {
                    console.err(error);
                }
            });
        }

        function calculateTotal() {
            const currency = 'eBits';
            let countPrice = $("input[name='price[]']").length;
            let totals = 0;

            for (let i = 0; i < countPrice; i++) {
                let price = parseFloat($("input[name='price[]']")[i].value)
                let qty = parseFloat($("input[name='qty[]']")[i].value)
                let total = (price * qty)
                $(`#total_${i + 1}`).text(`${total.toFixed(2)} ${currency}`);
                $("input[name='total[]']")[i].value = total;
                totals += total;
            }

            $("#totals").text(`${totals.toFixed(2)} ${currency}`);
        }

        var price = "{{ $totals }}";
        var value = $('input[name=delivery]:checked').val();
        value = parseFloat(value);
        $("#delivery_value").text(value.toFixed(2) + ' eBits');
        total = parseFloat(price) + parseFloat(value);
        total = total.toFixed(2);
        $("#total_order").text(total + ' eBits');

        $('input[name=delivery]').change(function () {
            var price = "{{ $totals }}"
            var value = $('input[name=delivery]:checked').val();
            value = parseFloat(value);
            $("#delivery_value").text(value.toFixed(2) + ' eBits');
            total = parseFloat(price) + parseFloat(value);
            total = total.toFixed(2);
            $("#total_order").text(total + ' eBits');
        });

        $('#submitBuy').on('click', function (evt) {
            evt.preventDefault();
            $(this).val('Please wait ...').attr('disabled', 'disabled');
            //$('#buy_form').submit();
        });

        function validateForm(form) {
            var addressSelect = $(form).find('select');

            if ($(addressSelect).find('option').length < 1) {
                location.href = '{{ route("account.address.create") }}';

                return false;
            }

            return true;
        }
    </script>

@endpush