@extends('app')

@section('content')
    <div class="ajax_content">

    <h3>Πελάτης - <a href="{{ route('clients.show', ['id' => $order->client->id]) }}"><b>{{ $order->client->last }} {{ $order->client->first }}</b></a></h3>
    <h4>Τηλέφωνο:&nbsp;<span class="text-warning">{{ $order->client->phone }}</span>&nbsp;&nbsp;Κινητό:&nbsp;<span class="text-info">{{ $order->client->mobile }}</span></h4>
    <h4>
        Παραγγελία: <small>κωδ.</small>&nbsp;{{ $order->id }}&nbsp;&nbsp;&nbsp;
        Σύνολο: <span id="total" class="text-primary">{{ $order->getTotal() }}</span><span class="glyphicon glyphicon-euro" aria-hidden="true"></span>&nbsp;<small>(έκπτωση {{ $order->discount }}%)</small>&nbsp;&nbsp;&nbsp;
        Υπόλοιπο: <span id="remaining" class="text-danger">{{ $order->getRemaining() }}</span><span class="glyphicon glyphicon-euro" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;
        Ημερομηνία: {{ $order->created_at->format('D j M \'y') }}
    </h4>

    <ul class="list-group">
        @foreach($order->orderItems as $orderItem)
            <li class="list-group-item">
                <span class="badge">{{ $orderItem->subCategory->category->getUcWordsName() }}</span>
                <b>{{ $orderItem->subCategory->getUcWordsName() }}</b>
                (<small>επισκ.</small> x {{ $orderItem->visits }})
            </li>
        @endforeach
    </ul>

    <hr>

    <h3>Δόσεις</h3>

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        {{--First item for insert--}}
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading0">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true" aria-controls="collapse0">
                            <span>
                                <span class="glyphicon glyphicon-menu-down"></span> Προσθήκη
                            </span>
                    </a>
                </h4>
            </div>
            <div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading0">
                <div class="panel-body">
                    <form class="form-inline add-installment">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <input data-order-id="{{ $order->id }}" type="number" class="form-control sum_input" placeholder="Ποσό:">
                        </div>
                        <div class="form-group">
                            <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-M-dd" data-date="{{ \Carbon\Carbon::create()->format('Y-M-d') }}">
                                <input type="text" class="form-control" value="{{ \Carbon\Carbon::create()->format('Y-M-d') }}">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success">Καταχώρηση</button>
                    </form>
                </div>
            </div>
        </div>
        {{--Foreach--}}
        @foreach($order->installments()->orderBy('date', 'desc')->get() as $installment)
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading{{ $installment->id }}">
                    <h4 class="panel-title">
                        <a href="javascrip:void(0)">
                            <span data-order-id="{{ $order->id }}" data-token="{{ csrf_token() }}" data-installment-id="{{ $installment->id }}" class="text-danger glyphicon glyphicon-remove-sign pull-right remove-installment">
                        </span>
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $installment->id }}" aria-expanded="true" aria-controls="collapse{{ $installment->id }}">
                            <span class="glyphicon glyphicon-menu-down"></span>
                            <span id="sum_{{ $installment->id }}">{{$installment->sum }}</span>
                            <span id="date_{{ $installment->id }}">- {{ $installment->date->formatLocalized('%a %e ,%b %Y') }}</span>
                        </a>
                    </h4>
                </div>
                <div id="collapse{{ $installment->id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ $installment->id }}">
                    <div class="panel-body">
                        <form class="form-inline change-installment">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <input type="number" class="form-control sum_input" placeholder="Ποσό:" value="{{$installment->sum }}">
                            </div>
                            <div class="form-group">
                                <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-M-dd" data-date="{{ $installment->date->format('Y-M-d') }}">
                                    <input type="text" class="form-control" value="{{ $installment->date->format('Y-M-d') }}">
                                    <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-th"></span>
                                    </div>
                                </div>
                            </div>
                            <input name="installment" type="hidden" value="{{ $installment->id }}">
                            <button type="submit" class="btn btn-default">Αλλαγή</button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    {{--<ul class="list-group">
        @foreach($order->installments()->orderBy('created_at', 'desc')->get() as $installment)
            <li class="list-group-item">
                <span class="badge">{{ $installment->updated_at->toFormattedDateString() }}</span>
                {{$installment->id . "  " . $installment->sum }}
            </li>
        @endforeach
    </ul>--}}
    </div>
@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            $(document).on('submit', '.change-installment',function (e) {
                e.preventDefault();

                var _that = $(this);
                var date = new Date($(this).find('.date input').val()),
                    sumInput = $(this).find('.sum_input'),
                    id = $(this).find('input[name="installment"]').val();

                $.ajax({
                    url: '/installments/' + id,
                    method: 'PUT',
                    data: {
                        _token: $(this).find('[name="_token"]').val(),
                        sum: $(this).find('.sum_input').val(),
                        date: [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
                    },
                    success: function (data) {
                        $('#sum_' + id).text(data.sum);
                        sumInput.val(data.sum);
                        $('#date_' + id).text(data.date);
                        $('#remaining').text(data.remaining);

                        $(this).find('.sum_input').val(data.sum);
                        _that.prepend(
                            '<div id="alert_' + id + '" class="alert alert-success">' +
                                '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' +
                                ' Η <strong>ενημέρωση</strong> ήταν επιτυχής. ' +
                            '</div>'
                        );
                    },
                    error: function () {
                        _that.prepend(
                            '<div id="alert_' + id + '" class="alert alert-danger">' +
                                '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> ' +
                                'Η <strong>ενημέρωση δεν</strong> ήταν επιτυχής. ' +
                            '</div>'
                        );
                    },
                    complete: function () {
                        setTimeout(function () {
                            $('#alert_' + id).fadeOut('slow').remove();
                        }, 2000);
                    }
                });
            });

            $(document).on('submit', '.add-installment', function (e) {
                e.preventDefault();

                var _that = $(this);
                var date = new Date($(this).find('.date input').val()),
                        id = $('input[name="installment"]').val(),
                        sum = $(this).find('.sum_input');

                $.ajax({
                    url: '/installments',
                    method: 'POST',
                    data: {
                        _token: $(this).find('[name="_token"]').val(),
                        sum: sum.val(),
                        date: [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'),
                        idOfOrder: sum.data('orderId')
                    },
                    success: function (data) {
                        $(this).find('.sum_input').val(data.sum);
                        $.ajax({
                            url: '/orders/installments/' + sum.data('orderId'),
                            success: function (data) {

                                var newContent = $(data).find('.ajax_content').html();
                                $(document).find('.ajax_content').html(newContent);
                            }
                        });
                        _that.prepend(
                                '<div id="alert_' + id + '" class="alert alert-success">' +
                                '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' +
                                ' Η <strong>ενημέρωση</strong> ήταν επιτυχής. ' +
                                '</div>'
                        );
                    },
                    error: function (data) {
                        _that.prepend(
                                '<div id="alert_' + id + '" class="alert alert-danger">' +
                                '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> ' +
                                'Η <strong>ενημέρωση δεν</strong> ήταν επιτυχής. ' +
                                '</div>'
                        );
                    },
                    complete: function () {
                        setTimeout(function () {
                            $('#alert_' + id).fadeOut('slow').remove();
                        }, 2000);
                    }
                });
            });

            $(document).on('click', '.remove-installment',function (e) {
                var orderId = $(this).data('orderId');
                $.ajax({
                    url: '/installments/' + $(this).data('installmentId'),
                    method: 'DELETE',
                    data: {
                        _token: $(this).data('token')
                    },
                    success: function (data) {
                        for (var key in data)  {
                            if (data.hasOwnProperty(key)) {
                                $('#' + key).text(data[key]);
                                $(this).parents('.panel').remove();
                            }
                        }
                    }.bind(this),
                    error: function (data) {
                        console.log("ERROR");
                    }
                });
            });

            // Chevron toggle
            $(document).on('click', 'a[data-toggle="collapse"]', function () {
                $(this).find('.glyphicon').toggleClass('glyphicon-menu-down glyphicon-menu-up');
            });
        });
    </script>
@stop