@extends('app')

@section('content')
    <div class="ajax_content">
        <h3>Πελάτης - <a href="{{ route('clients.show', ['id' => $client->id]) }}"><b>{{ $client->last }} {{ $client->first }}</b></a></h3>
        <h4>Τηλέφωνο:&nbsp;<span class="text-warning">{{ $client->phone }}</span>&nbsp;&nbsp;Κινητό:&nbsp;<span class="text-info">{{ $client->mobile }}</span></h4>
        <h4>
            Σύνολο: <span id="total" class="text-primary">{{ $client->getTotalSum() }}</span><span class="glyphicon glyphicon-euro" aria-hidden="true"></span>&nbsp;&nbsp;
            Υπόλοιπο: <span id="remaining" class="text-danger">{{ $client->getRemaining() }}</span><span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
        </h4>

        <hr>

        <h3 class="text-right">
            <span>Δόσεις</span>
            <a href="{{ route('clients.installments_print', ['client' => $client->id]) }}" id="printPage" class="btn btn-primary" style="margin-right: 0.5rem">
                <span class="glyphicon glyphicon-print" aria-hidden="true"></span> Εκτύπωση
            </a>
        </h3>

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

            {{--First item for insert--}}
            <div class="panel panel-success">
                <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-client-id="{{ $client->id }}" type="number" step="any" 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($client->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-client-id="{{ $client->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 class="text-primary" 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" step="any" 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>
    </div>
@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            // Add Installments
            $(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'),
                        clientId = sum.data('clientId');

                $.ajax({
                    url: '/installments',
                    method: 'POST',
                    data: {
                        _token: $(this).find('[name="_token"]').val(),
                        sum: sum.val(),
                        date: [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'),
                        idOfClient: clientId
                    },
                    success: function (data) {
                        $(this).find('.sum_input').val(data.sum);
                        $.ajax({
                            url: '/clients/installments/' + clientId,
                            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);
                    }
                });
            });

            // Edit Installment
            $(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(parseFloat(data.sum).toFixed(2));
                        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);
                    }
                });
            });

            // Remove Installment
            $(document).on('click', '.remove-installment',function (e) {
                $.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');
            });

            $('#printPage').on('click', function (e) {
                e.preventDefault();
                var printWindow = window.open( $(this).get(0).href, 'Print', 'left=200, top=200, width=950, height=500, toolbar=0, resizable=0');
                printWindow.addEventListener('load', function(){
                    printWindow.print();
                }, true);
            });
        });
    </script>
@stop