@extends('app')

@section('content')
    <div class="row">
        <h2 class="text-right text-right text-muted">Καταχώρηση παραγγελίας</h2>
        <form class="form-horizontal" method="post" action="{{ route('orders.store') }}">
            {{ csrf_field() }}

            @include('partials.orders_fields')

            {{-- Visits --}}
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2 text-danger text-right">{{ $errors->first('visits') }}</div>
                <div class="col-sm-10 col-sm-offset-2"><label class="sr-only" for="visits">Επισκέψεις</label>
                    <div class="input-group col-sm-3 col-sm-offset-9">
                        <div class="input-group-addon">Επισκέψεις</div>
                        <input name="visits" value="1" min="1" max="1000" type="number" class="form-control" id="visits"  placeholder="Επισκέψεις">
                    </div>
                </div>
            </div>

            {{-- Add item --}}
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <button type="button" class="btn btn-default pull-right" id="add_prduct">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Προσθήκη
                    </button>
                </div>
            </div>

            <hr>

            {{-- Error if no item is added --}}
            @if($errors->first('sub_categories'))
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2 alert alert-danger">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        {{ $errors->first('sub_categories') }}
                    </div>
                </div>
            @endif

            {{-- List with added items --}}
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <ul class="list-group" id="added_products"></ul>
                </div>
            </div>

            {{-- Discount --}}
            <div class="form-group discount_field">
                <div class="col-sm-10 col-sm-offset-2 text-danger text-right">{{ $errors->first('discount') }}</div>
                <div class="col-sm-10 col-sm-offset-2"><label class="sr-only" for="discount">Έκπτωση</label>
                    <div class="input-group col-sm-3 col-sm-offset-9">
                        <div class="input-group-addon">Έκπτωση <b>%</b></div>
                        <input name="discount" value="0" min="0" max="100" type="number" class="form-control" id="discount" placeholder="Έκπτωση">
                    </div>
                </div>
            </div>

            {{-- Advance payment --}}
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <label class="sr-only" for="discount">Προκαταβολή</label>
                    <div class="input-group col-sm-4 col-sm-offset-8">
                        <div class="col-sm-10 col-sm-offset-2 text-danger">{{ $errors->first('advance_payment') }}</div>
                        <div class="input-group-addon">Προκαταβολή</div>
                        <input name="advance_payment" value="{{ old('advance_payment') > 0 ? old('advance_payment') : 0 }}" min="0" max="5000" type="number" class="form-control" id="advance_payment" placeholder="Προκαταβολή">
                    </div>
                </div>
            </div>

            {{-- Exoflhsh --}}
            {{--<div class="form-group">
                <div class="col-sm-10 col-sm-offset-2 checkbox">
                    <label class="pull-right">
                        <input {{ old('status') == 'on' ? 'checked' : '' }} name="status" type="checkbox"> <b>Εξόφληση</b>
                    </label>
                </div>
            </div>--}}

            {{-- Total --}}
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2 checkbox">
                    <div id="added_products_cost" class="pull-right" style="font-size: 21px;">
                        <span>Σύνολο: </span>
                        <span class="text-info">(</span><span id="installment_result" class="text-info">0</span><span class="text-info">)</span>
                        <b class="text-primary">0</b> <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
                    </div>
                </div>
            </div>

            <hr>

            {{-- Comments --}}
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2 text-danger">{{ $errors->first('comments') }}</div>
                <label for="comments" class="col-sm-2 control-label">Σχόλια</label>
                <div class="col-sm-10">
                    <textarea name="comments" id="comments" class="form-control" rows="4">{{ old('comments') }}</textarea>
                </div>
            </div>

            {{-- Submit --}}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">Καταχώρηση</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            if ($('#sub_category').val() != '') {

                $('#sub_category').prop('disabled', false);
            }

            var subCategories = JSON.parse("{!! addcslashes(json_encode(\App\SubCategory::getSubCatJson()), '"') !!}");

            $('#client, #category, #sub_category').selectpicker();

            $('#category').change(function() {
                var changeVal = $(this).val();
                if (changeVal) {
                    $('#sub_category optgroup').prop('disabled', true);
                    $('#sub_category').prop('disabled', false);
                    $('#sub_category optgroup[data-cat="' + changeVal + '"]').prop('disabled', false);
                    var remove = $('optgroup:disabled').remove();
                    $('#sub_category').append(remove);
                    $('#sub_category').selectpicker('refresh');
                }
            });

            function addOrderProduct (categ, sub_categ) {
                if (categ && sub_categ && document.getElementById(categ + '_' + sub_categ) === null) {
                    var filteredSubCat = subCategories.filter(function (subCat) {
                        return subCat.val === sub_categ;
                    });
                    if (filteredSubCat.length > 0) {
                        var found = filteredSubCat.filter(function (subCat) {
                            return subCat.category === categ;
                        })[0];
                        var prce = found.perVisit, visits = $('#visits').val();

                        var li = $('<li data-visits="' + visits + '" data-price="' + prce + '" id="' + categ + '_' + sub_categ + '" class="list-group-item">' +
                                '<button type="button" class="btn btn-xs remove_product"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>' +
                                '<span class="badge">' + found.categoryText + '</span>  <b>' + found.text + '</b>  (<b class="text-primary">' + prce + ' x ' + visits + ' = ' + prce*visits + '</b> ευρώ)' +
                                '</li>');

                        var ipt = document.createElement('input');
                        ipt.setAttribute("type", "hidden");
                        ipt.setAttribute("value", JSON.stringify({name: found.val, visits: visits, category: found.category}));
                        ipt.setAttribute("name", 'sub_categories[]');
                        li.append($(ipt));

                        $('#added_products').append(li);

                        var total_cost = 0;
                        $('#added_products li').each(function () {
                            total_cost += parseInt($(this).data('price') * $(this).data('visits'));
                        });
                        $('#added_products_cost').find('b').text(total_cost);
                        $('#discount').data('total-cost', total_cost);
                        $('#installment').trigger('input');
                    }
                }
            }

            $('#add_prduct').on('click',function () {
                var categ = $('#category').val(),
                    sub_categ = $('#sub_category').val();

                addOrderProduct(categ, sub_categ);
            });

            $(document).on('click', '.remove_product', function () {
                var parent = $(this).parent();
                var price = parent.data('price');
                $('#added_products_cost b').text(parseInt($('#added_products_cost b').text()) - parseInt(price));
                parent.remove();
                $('#installment').trigger('input');
            });

            $('#discount').on('input', function() {
                if ($('li[data-price]').length <= 0) {
                    $(this).val(0);
                    return false;
                }
                var discount = parseInt($(this).val());

                if (discount || discount === 0) {
                    var value = (parseInt($('#discount').data('total-cost')) * ((100 - discount) / 100)).toFixed(2);
                    $('#added_products_cost').find('b').text(value);
                    $('#installment').trigger('input');
                }
            });

            $('#installment').on('input', function () {
                if ($('li[data-price]').length <= 0) {
                    $(this).val(1);
                    return false;
                }
                if (parseInt($(this).val())) {
                    var installment = (parseFloat($('#added_products_cost').find('b').text()) / parseInt($(this).val())).toFixed(2);
                    $('#installment_result').text($(this).val() + ' x ' + installment);
                } else {
                    $('#installment_result').text(0);
                }
            });
            
            $('#advance_payment').on('input', function (ev) {
                if (parseFloat($(ev.currentTarget).val()) > parseFloat($('#added_products_cost').find('b').text())) {
                    $(ev.currentTarget).val(0);
                }
            });
        });
    </script>
@stop