@extends('layouts/acc_layout')
@section('title', '| Add Income Tax Payment')
@section('content')
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-12 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <span class="panel-title">Add Income Tax Payment</span>
                    <a href="{{ url('acc/incomeTaxPayments') }}" class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-th-list viewIcon">
                        </i></a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">

                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            @php

                                                $searchElements = [['element' => 'project', 'col' => 2, 'attributes' => ['print_order' => '1']], ['element' => 'project_type', 'col' => 2, 'attributes' => ['print_order' => '2']], ['element' => 'custom', 'type' => 'text', 'name' => 'month_from', 'id' => 'month_from', 'label' => 'Month From:', 'col' => 2, 'attributes' => ['class' => 'pickMonth form-control', 'autocomplete' => 'off', 'readonly' => 'readonly', 'print_order' => '3']], ['element' => 'custom', 'type' => 'text', 'name' => 'month_to', 'id' => 'month_to', 'label' => 'Month To:', 'col' => 2, 'attributes' => ['class' => 'pickMonth form-control', 'autocomplete' => 'off', 'readonly' => 'readonly', 'print_order' => '4']], ['element' => 'custom', 'type' => 'select', 'name' => 'fillWithZeroIncomeTax', 'id' => 'fillWithZeroIncomeTax', 'options' => ['yes' => 'Yes', 'no' => 'No'], 'label' => 'With Zero Income Tax:', 'col' => 2, 'attributes' => ['print_order' => '5']]];

                                            @endphp

                                            @include('partials.searchPanel.main', [
                                                'searchElements' => $searchElements,
                                                'buttonLevel' => 'Show',
                                            ])

                                        </div>
                                    </div>
                                </div>

                                <div id="reportingDiv" style="color: black"></div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>

    <style>
        .hideCalendar .ui-datepicker-calendar {
            display: none;
        }
    </style>

    <script>
        $(document).ready(function() {
            $('#month_from').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'mm-yy',
                beforeShow: function() {
                    $("#ui-datepicker-div").addClass("hideCalendar");
                },
                onClose: function(dateText, inst) {
                    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
                    $(this).attr('value', (inst.selectedMonth + 1) + '-' + inst.selectedYear);
                    $("#reportingDiv").empty();
                    $("#ui-datepicker-div").removeClass("hideCalendar");
                }
            });
            $('#month_to').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'mm-yy',
                beforeShow: function() {
                    $("#ui-datepicker-div").addClass("hideCalendar");
                },
                onClose: function(dateText, inst) {
                    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
                    $(this).attr('value', (inst.selectedMonth + 1) + '-' + inst.selectedYear);
                    $("#reportingDiv").empty();
                    $("#ui-datepicker-div").removeClass("hideCalendar");
                }
            });

            $("#searchForm").submit(function(event) {
                event.preventDefault();
                var serializeValue = $(this).serialize();
                // $('#loadingModal').show();
                $('#reportingDiv').html('Retrieving Data, Please Wait!');
                $("#reportingDiv").load(
                    '{{ URL::to('acc/incomeTaxPayments/getMonthlyDataWithSalary') }}' + '?' +
                    serializeValue,
                    function() {
                        $('#loadingModal').hide();
                    });
            });

            $("#searchForm :input").change(function(e) {
                $("#reportingDiv").empty();
            });
        });
    </script>

@endsection