@extends('layouts.app')
@section('title', __('installments::installment.installment_calender'))

@section('css')
    <style>
        #calendar .fc-head table thead {
            color: #363636;
        }
    </style>
@endsection

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>@lang('installments::installment.installment_calender')</h1>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            @if (count($business_locations) > 1)
                <div class="col-sm-12">
                    <select id="business_location_id" class="select2" style="width:50%">
                        <option value="">@lang('purchase.business_location')</option>
                        @foreach ($business_locations as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
        </div>
        <br>
        <div class="row">
            <div class="col-sm-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">@lang('installments::installment.today_installments')</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table class="table table-bordered table-condensed" id="today_installments_table">
                            <thead>
                                <tr>
                                    <th>@lang('installments::installment.conatct_name')</th>
                                    <th>@lang('installments::installment.transaction_id')</th>
                                    <th>@lang('installments::installment.installment_amount')</th>
                                    <th>@lang('installments::installment.paid_amount')</th>
                                    <th>@lang('installments::installment.total_remaining')</th>
                                    <th>@lang('installments::installment.payment_status')</th>
                                    <th>@lang('business.location')</th>
                                    <th>@lang('lang_v1.customer_group')</th>
                                    <th>@lang('lang_v1.added_by')</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="box">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="box box-solid">
                    <div class="box-body">
                        <!-- the events -->
                        <div class="external-event bg-yellow text-center" style="position: relative;">
                            <small>@lang('lang_v1.due')</small>
                        </div>
                        <div class="external-event bg-light-blue text-center" style="position: relative;">
                            <small>@lang('lang_v1.partial')</small>
                        </div>
                        <div class="external-event bg-red text-center" style="position: relative;">
                            <small>@lang('lang_v1.overdue')</small>
                        </div>
                        <div class="external-event bg-red text-center" style="position: relative;">
                            <small>@lang('lang_v1.partial-overdue')</small>
                        </div>
                        <small>
                            <p class="help-block">
                                <i>@lang('installment.click_on_any_installment_to_view_or_change_status') </i>
                            </p>
                        </small>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->

    <div class="modal fade installment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>

    <div class="modal fade installment_payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>

    <div class="modal fade edit_installment_payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>

@endsection

@section('javascript')
    <script src="{{ asset('modules/installments/js/lib/repeater.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('modules/installments/js/payment.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('modules/installments/js/installment.js?v=' . $asset_v) }}"></script>
    <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                eventLimit: 4,
                events: '/installments/installments-calendar',
                eventRender: function(event, element) {
                    element.find('.fc-title').html(event.title_html);
                    // element.attr('data-href', event.url);
                    // element.attr('data-container', '.view_modal');
                    element.addClass('add_installment_payment_modal');
                },
                // dayClick:function( date, jsEvent, view ) {
                //     clickCount ++;
                //     if( clickCount == 2 ){
                //        $('#add_booking_modal').modal('show');
                //        $('form#add_booking_form #start_time').data("DateTimePicker").date(date).ignoreReadonly(true);
                //        $('form#add_booking_form #end_time').data("DateTimePicker").date(date).ignoreReadonly(true);
                //     }
                //     var clickTimer = setInterval(function(){
                //         clickCount = 0;
                //         clearInterval(clickTimer);
                //     }, 500);
                // }
            });

            today_installments_table = $('table#today_installments_table').DataTable({
                processing: true,
                serverSide: true,
                "ordering": false,
                'searching': false,
                "pageLength": 10,
                dom: 'frtip',
                "ajax": {
                    "url": '/installments/installment/get-today-installments',
                    "data": function(d) {
                        d.location_id = $('#business_location_id').val();
                    }
                },
                columns: [{
                        data: 'conatct_name',
                        name: 'conatct_name'
                    },
                    {
                        data: 'invoice_no',
                        name: 't.invoice_no'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'paid_amount',
                        name: 'paid_amount',
                        searchable: false
                    },
                    {
                        data: 'remaining_amount',
                        name: 'remaining_amount',
                        searchable: false
                    },
                    {
                        data: 'payment_status',
                        name: 'payment_status',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'business_location',
                        name: 'bl.name'
                    },
                    {
                        data: 'customer_group',
                        name: 'cg.name'
                    },
                    {
                        data: 'created_by',
                        name: 'created_by'
                    }
                ]
            });

            $(document).on('change', 'select#business_location_id', function() {
                reload_calendar();
                today_installments_table.ajax.reload();
            });

            function reload_calendar() {
                var location_id = '';
                if ($('select#business_location_id').val()) {
                    location_id = $('select#business_location_id').val();
                }

                var events_source = {
                    url: '/installments-calendar',
                    type: 'get',
                    data: {
                        'location_id': location_id
                    }
                }
                $('#calendar').fullCalendar('removeEventSource', events_source);
                $('#calendar').fullCalendar('addEventSource', events_source);
                $('#calendar').fullCalendar('refetchEvents');
            }
        });
    </script>
@endsection