@extends('layouts/gnr_layout') 
@section('title', '| Auto Month End Execution Schedule')
@section('content')
<style type="text/css">
    .form-group,
    .form-control {
        font-size: 11px !important;
        color: black !important;
    }

    .form-control {
        padding: 5px !important;
    }

    #reportSubmit {
        font-size: 12px;
        margin-top: 20px;
    }

    
    .ui-datepicker-calendar {
        display: none;
    }

</style>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-options">
                            <button href="javascript:;" class="btn btn-info pull-right add-modal" >
                                <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add New Target Month
                            </button>
                        </div>
                        <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Auto Month End Schedule List</h3>
                    </div>

                    <div class="panel-body panelBodyView">

                        <!-- Filtering Start-->
                        
                            <div class="row">
                               
                            </div>
                        
                        
                        <!-- filtering end-->


                        <div class="row">
                            <div class="col-md-12" id="reportingDiv">
                                <div class="form-group">
                                <table id="timeSlotTable" class="table">
                                    <thead>
                                        <tr>
                                            <th style="width:1%;">Sl</th>
                                            <th style="width:10%;">Target Month</th>
                                            <th style="width:15%;">Execution Date</th>
                                            <th style="width:10%;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data['monthEndSchedules'] as $schedule)
                                            <tr>
                                                <td>{{$loop->iteration}}</td>
                                                <td>{{\Carbon\Carbon::parse($schedule->target_month)->format('M Y')}}</td>
                                                <td>{{\Carbon\Carbon::parse($schedule->execution_date)->format('d-m-Y')}}</td>
                                                <td class="text-center">
                                                    <a href="javascript:;" class="edit-modal" scheduleId="{{ $schedule->id }}">
                                                        <span class="glyphicon glyphicon-edit"></span>
                                                    </a>&nbsp;

                                                    <a href="javascript:;" class="delete-modal" scheduleId="{{ $schedule->id }}">
                                                        <span class="glyphicon glyphicon-trash"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    
                                </table>
                            </div>
                            </div>
                        </div>


                    </div> {{-- panel-body panelBodyView DIV --}}
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="addModal" class="modal fade" style="margin-top:3%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"style="clear:both;background-color:black;color:white; padding:10px;text-align:center">Add Month End Execution Schedule</h4>
            </div>
            <div class="modal-body">
                <div class="row" style="padding-bottom: 20px;">
                    <div class="col-md-12">
                        <div class="col-md-12" style="padding-right:2%;">
                            <div class="form-horizontal form-groups">
                                <form id="addForm">
                                    <div class="form-group">
                                        <label for="exampleFormControlInput1">Target Month</label>
                                        <input type="text" class="form-control targetMonth" name="targetMonth" placeholder="Target Month"  autocomplete="off" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleFormControlInput1">Execution Date</label>
                                        <input type="date" class="form-control executionDate" name="executionDate" placeholder="Execution Date" >
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- add ModalFooter --}}
                <div class="modal-footer">
                    <button id="addButton" class="btn actionBtn glyphicon glyphicon-check btn-success edit"
                        paymentId="0" type="button"> Add</button>

                    <button id="updateButton" class="btn actionBtn glyphicon glyphicon-check btn-success edit"
                        paymentId="0" type="button"> Update</button>

                    <button class="btn btn-danger glyphicon glyphicon-remove" data-dismiss="modal"
                        id="footer_action_button_dismis" type="button"><span> Close</span></button>
                </div> 
                {{-- End add Modal Body --}}
            </div>
        </div>
    </div>
</div>
{{-- End Modal --}}

{{-- Delete Modal --}}
<div id="deleteModal" class="modal fade" style="margin-top:3%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="clear:both;background-color:black;color:white; padding:10px">Delete!</h4>
            </div>
            <div class="modal-body">
                <h2>Are You Confirm to Delete This Record?</h2>

                <div class="modal-footer">
                    <input id="scheduleId" type="hidden" name="scheduleId" value="">
                    <button id="DMconfirmButton" type="button" class="btn btn-danger"> Confirm</button>
                    <button class="btn btn-warning glyphicon glyphicon-remove" data-dismiss="modal" type="button">
                        Close</button>

                </div>

            </div>
        </div>
    </div>
</div>
{{-- End Delete Modal --}}

<script type="text/javascript">
   
    $(".targetMonth").datepicker({
        dateFormat: 'mm-yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).val($.datepicker.formatDate('mm-yy', new Date(year, month, 1)));
        }
    });

    $(".targetMonth").datepicker({
        dateFormat: 'mm-yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).val($.datepicker.formatDate('mm-yy', new Date(year, month, 1)));
        }
    });

    $(document).ready(function() {
        //
        /*Add Modal*/
        $(document).on('click', '.add-modal', function() {
            if(hasAccess('gnr/monthEnd/execution/store')){
                $("#addModal").modal('show');
                $(".modal-title").text('Add Month End Execution Schedule');
                $("#updateButton").hide();
                $(".targetMonth").val('');
                $(".executionDate").val('');
            }
            
        }); 
        
        $("#addButton").on('click',function(){

            var exeDate = $('.executionDate').val();
            var sysDate = "{{$data['systemDate']}}";
            if (exeDate<sysDate) {
                alert("please select a future date");
                return false;
            }

            let targetMonth        = $(".targetMonth").val();
            let executionDate      = $(".executionDate").val();

            var csrf = "{{ csrf_token() }}";
            $.ajax({
                url: '{{route("monthEnd.execution.schedule.store")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    targetMonth        : targetMonth,
                    executionDate      : executionDate,
                    _token: csrf
                },
                success: function(data) {
                    if (data.errors) {
                    } else {
                        if(data.responseTitle == "Success!"){
                            toastr.success(data.responseText, data.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href = "{{ route('monthEnd.execution.schedule.list') }}";
                            }, 2000);
                        }else{
                            toastr.warning(data.responseText, data.responseTitle, opts);
                        }
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
            });
        });
        /*End Add Modal*/

        /*Edit Modal*/
            $(document).on('click', '.edit-modal', function() {
                if(hasAccess('gnr/monthEnd/execution/edit')){
                    $("#updateButton").show();
                    $("#addButton").hide();
                    $(".modal-title").text('Update Month End Execution Schedule');
                    var scheduleId = $(this).attr('scheduleId');
                    
                    var csrf = "{{ csrf_token() }}"; 
                    $.ajax({
                        url: '{{route("monthEnd.execution.schedule.edit")}}',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            scheduleId: scheduleId,
                            _token: csrf
                        },
                    })

                    .done(function(scheduleInfo) { console.log(scheduleInfo);
                    
                        $(".targetMonth").val(scheduleInfo.targetMonth);
                        $(".executionDate").val(scheduleInfo.executionDate);
                        $("#scheduleId").val(scheduleInfo.scheduleId);
                        $("#addModal").modal('show');
                    })

                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });
                }
                
            }); 
        /*End Edit Modal*/

        /*Update Data*/
        $("#updateButton").on('click', function() {

            var exeDate = $('.executionDate').val();
            var sysDate = "{{$data['systemDate']}}";
            if (exeDate<sysDate) {
                alert("please select a future date");
                return false;
            }

            let targetMonth       = $(".targetMonth").val();
            let executionDate      = $(".executionDate").val();
            let scheduleId       = $("#scheduleId").val();
            var csrf = "{{ csrf_token() }}";
            $(".error").remove();
            $.ajax({
                url: '{{route("monthEnd.execution.schedule.store")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    targetMonth : targetMonth,
                    executionDate : executionDate,
                    scheduleId : scheduleId,
                    _token: csrf
                },
                success: function(data) {
                    if (data.errors) {
                    } else {
                        if(data.responseTitle == "Success!"){
                            toastr.success(data.responseText, data.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href = "{{ route('monthEnd.execution.schedule.list') }}";
                            }, 2000);
                        }else{
                            toastr.warning(data.responseText, data.responseTitle, opts);
                        }
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
            });
        });
        /*End Update Data*/

        /*Delete Modal*/
        $(document).on('click', '.delete-modal', function() {
            if(hasAccess('gnr/monthEnd/execution/delete')){
                var scheduleId = $(this).attr('scheduleId');
                $("#scheduleId").val(scheduleId);
                $("#deleteModal").modal('show');
            }
        });
        /*End Delete Modal*/

        /*Delete Data*/
        $("#DMconfirmButton").on('click', function() {
            var scheduleId = $("#scheduleId").val();
            var csrf = "{{ csrf_token() }}";

            $.ajax({
                url: '{{route("monthEnd.execution.schedule.delete")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    scheduleId: scheduleId,
                    _token: csrf
                },

                success: function(data) {
                    if (data.errors) {
                    } else {
                        if(data.responseTitle == "Success!"){
                            toastr.success(data.responseText, data.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href = "{{ route('monthEnd.execution.schedule.list') }}";
                            }, 2000);
                        }else{
                            toastr.warning(data.responseText, data.responseTitle, opts);
                        }
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
            })
        });
        /*End Delete Data*/

    }); /*Ready*/
</script>
@endsection