@extends('layouts/microfin_layout')
@section('title', '| New Reschedule')
@section('content')
    <style type="text/css">
        .form-control {
            font-size: 11px !important;
            padding: 5px !important;
        }
        label {
            font-size: 11px !important;
        }
    </style>
    
    <div class="row add-data-form searchDiv">
        <div class="col-md-12">
            <div class="col-md-8 col-md-offset-2 fullbody">
                <div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url('viewLoanOrgWiseReschedule/') }}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list viewIcon"></i>
                        Reschedule List
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">New Loan Reschedule</div>                        
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Form::open(array('url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups')) !!}
                                    <input type="hidden" name="existingRescheduleId" class="existingRescheduleId" value="0" />                                   

                                    <div class="form-group">
                                        {!! Form::label('date from', 'Date From:*', ['class' => 'col-sm-2 control-label']) !!}
                                        <div class="col-sm-6">
                                        {!! Form::text('dateFrom', $value = null, ['class' => 'form-control', 'id' => 'dateFrom', 'type' => 'text','autocomplete'=>'off', 'required']) !!}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        {!! Form::label('date to', 'Date To:*', ['class' => 'col-sm-2 control-label']) !!}
                                        <div class="col-sm-6">
                                            {!! Form::text('dateTo', $value = null, ['class' => 'form-control datepicker', 'id' => 'dateTo', 'type' => 'text', 'autocomplete'=>'off', 'required']) !!}
                                        </div>
                                    </div>

                                    <div class="form-group dependentDiv" style="display: none;">
                                        {!! Form::label('reschedule nature', 'Reschedule Nature:*', ['class' => 'col-sm-2 control-label']) !!}
                                        <div class="col-sm-6">
                                            <select name = "rescheduleNature" class = "form-control" id = "rescheduleNature" required="required">
                                                <option value="">---Select---</option>
                                                <option value="0">Without Completed Schedules</option>
                                                <option value="1">With Completed Schedules</option>
                                            </select>
                                        </div>
                                    </div> 

                                    <div class="form-group dependentDiv" style="display: none;">
                                        {!! Form::label('repayment frequency', 'Repayment Frequency:*', ['class' => 'col-sm-2 control-label']) !!}
                                        <div class="col-sm-6">
                                            <select name = "frequency" class = "form-control" id = "frequency" required="required">
                                                @foreach ($frequencies as $k=>$item)
                                                    <option value="{{$k}}">{{$item}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> 

                                    <div class="form-group dependentDiv purposeDiv" style="display: none;">
                                        {!! Form::label('reschedule purpose', 'Reschedule Purpose:*', ['class' => 'col-sm-2 control-label']) !!}
                                        <div class="col-sm-6">
                                            {!! Form::text('purpose', $value = null, ['class' => 'form-control', 'id' => 'purpose', 'type' => 'text', 'autocomplete'=>'off', 'required']) !!}
                                        </div>
                                    </div>                                   

                                    <div class="form-group dependentDiv" style="display: none;">
                                        {!! Form::label('reschedule for', 'Reschedule For:*', ['class' => 'col-sm-2 control-label']) !!}
                                        <div class="col-sm-6">
                                            {!! Form::radio('rescheduleFor', 'all', true, ['class' => 'form-control', 'class' => 'rescheduleFor', 'id'=>'rescheduleForAll']) !!} <span>All</span>
                                            {!! Form::radio('rescheduleFor', 'specific', false, ['class' => 'form-control', 'class' => 'rescheduleFor', 'id'=>'rescheduleForSpecific']) !!} <span>Specific</span>
                                        </div>
                                    </div>  

                                    <div class="form-group branchDiv" style="display: none;">
                                        <div class="col-sm-6 col-sm-offset-2" style="max-height: 200px; overflow: scroll;">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <table class="table table-striped table-bordered">
                                                        @foreach($evenBranches as $id=>$nameWithCode)
                                                        <tr>
                                                            <td style="text-align: left; padding-left: 10px;">
                                                                <input type="checkbox" class="specificBranch" name="specificBranch[]" value="{{$id}}" /> 
                                                                <span style="margin-left: 20px;">{{$nameWithCode}}<span>
                                                            </td>                                                    
                                                        </tr>
                                                        @endforeach
                                                    </table>                                                    
                                                </div>
                                                <div class="col-sm-6">
                                                    <table class="table table-striped table-bordered">
                                                        @foreach($oddBranches as $id=>$nameWithCode)
                                                        <tr>
                                                            <td style="text-align: left; padding-left: 10px;">
                                                                <input type="checkbox" class="specificBranch" name="specificBranch[]" value="{{$id}}" /> 
                                                                <span style="margin-left: 20px;">{{$nameWithCode}}<span>
                                                            </td>                                                    
                                                        </tr>
                                                        @endforeach
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>                                    

                                    <div class="form-group">
                                        <div class="col-sm-10 col-sm-offset-2">
                                            {!! Form::submit('Proceed', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                            {{-- <a href="{{ url('viewLoanOrgWiseReschedule/') }}" class="btn btn-danger closeBtn">Close</a> --}}
                                        </div>
                                    </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row add-data-form unitDiv" style="margin-top: 10px; display: none;">
        <div class="col-md-12" id="loadHtml"></div>
    </div>
@endsection

<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){       
        $("#dateFrom").datepicker({
            changeMonth : true,
            changeYear  : true,
            dateFormat  : 'dd-mm-yy',
            onSelect    : function(){
                thisDate = $(this).datepicker("getDate");
                $('#dateTo').datepicker('option','minDate', thisDate);
                var dateFrom = $("#dateFrom").val();
                var dateTo = $("#dateTo").val();
                if(dateFrom != '' && dateTo != ''){
                    checkDateRange();
                }
            }  
        });

        $("#dateTo").datepicker({
            changeMonth : true,
            changeYear  : true,
            dateFormat  : 'dd-mm-yy',
            onSelect    : function(){
                thisDate = $(this).datepicker("getDate");
                $('#dateFrom').datepicker('option','maxDate', thisDate);
                var dateFrom = $("#dateFrom").val();
                var dateTo = $("#dateTo").val();
                if(dateFrom == ''){
                    toastr.warning('Please select From Date!');
                }else{
                    checkDateRange();
                }
            }
        });        

        $("input[name='rescheduleFor']").click(function(){
            var radioValue = $("input[name='rescheduleFor']:checked").val();
            if(radioValue == 'all'){
                $(".branchDiv").hide("slow");
                $(".specificBranch").prop("checked", false);
            }else{
                $(".branchDiv").show("slow");
            }
        });

        $('.specificBranch').click(function(){
            if($(this).hasClass('preChecked')){
                $(this).prop("checked", true);
                toastr.warning('You can\'t uncheck this!');
            }
        });

        $('form').submit(function(event){
            event.preventDefault();

            if($('#dateTo').val()=='' || $('#dateFrom').val()=='' || $('#purpose').val()=='') {
                toastr.success('Please fill up required fields!');
                return false;
            }

            // $('#loadingModal').show();
            $("#loadHtml").html('');

            var rescheduleFor = $("input[name='rescheduleFor']:checked").val();
            var specificBranches = [];

            if(rescheduleFor == 'specific'){
                $('.specificBranch').each(function(i, obj) {
                    if($(this).is(':checked')){
                        specificBranches.push($(this).val());
                    }                  
                });
                if(specificBranches.length == 0){
                    toastr.warning('Please check specific branches!');
                    return false;
                }
            }

            $.ajax({
                type: 'post',
                url: './getRescheduleUnits',
                dataType: 'json',
                data: {                  
                    dateFrom: $('#dateFrom').val(),
                    dateTo: $('#dateTo').val(),
                    rescheduleNature: $('#rescheduleNature').val(),
                    frequency: $('#frequency').val(),
                    purpose: $('#purpose').val(),
                    rescheduleFor: rescheduleFor,
                    specificBranches: specificBranches,
                    existingRescheduleId: $('.existingRescheduleId').val(),
                }, 
                success: function(data, status) {
                    $("#loadHtml").html(data);
                    $(".unitDiv").show('slow');
                    $(".searchDiv").hide('slow');                    
                    // $('#loadingModal').hide();
                },
                error: function(data) {
                    alert(data.errors);
                }
            });
        });

        $(document).on('click', '.closeBtn', function(){
            $("#loadHtml").html('');
            $(".unitDiv").hide('slow');
            $(".searchDiv").show();
        });

        $(document).on('click', '.execute', function(){
            if(confirm('Are you sure?')){
                var lastId = $('#lastId').val();
                var typeId = $('#rescheduleType').val();
                var dateFrom = $('#dateFromPost').val();
                var dateTo = $('#dateToPost').val();            
                var unitId = $(this).closest('.unitTr').find('.hiddenUnitId').val();
                $('#loadingModal').show();            
                
                $.ajax({
                    type: 'post',
                    url: './storeLoanOrgWiseReschedule',
                    dataType: 'json',
                    data: {                  
                        lastId: lastId,
                        typeId: typeId,
                        dateFrom: dateFrom,
                        dateTo: dateTo,
                        unitId: unitId,
                    }, 
                    success: function(data, status) {
                        if(data.success){
                            $('#loadingModal').hide();
                            $(".unitTr").each(function(){
                                if($(this).find('.hiddenUnitId').val() == data.unitId){
                                    $(this).find('.executeIcon').removeClass('fa fa-location-arrow execute');
                                    $(this).find('.executeIcon').addClass('fa fa-check');
                                    $(this).find('.executeIcon').css("cursor", "");
                                    $(this).find('.executeIcon').css("color", "#72A230");
                                }
                            });
                            toastr.success(data.msg);
                        }
                    },
                    error: function(data) {
                        $('#loadingModal').hide();
                        if(data.msg){
                            toastr.warning(data.msg);
                        }else{
                            toastr.warning('Something went wrong!');
                        }                    
                    }
                });
            }            
        });
    });

    function checkDateRange(){
        var dateFrom = $("#dateFrom").val();
        var dateTo = $("#dateTo").val();

        var startDate = $("#dateFrom").datepicker("getDate");
    	var endDate = $("#dateTo").datepicker("getDate");
   		var daysDiff = Math.round((endDate- startDate) / (1000 * 60 * 60 * 24));

        if(daysDiff > 30){
            $("#dateFrom").val('');
            $("#dateTo").val('');
            toastr.warning('Total reschedule days can\'t be more than 30 days!');
            return false;
        }

        $('.existingRescheduleId').val(0); 
        $.ajax({
            type: 'post',
            url: './getExistingReschedule',
            dataType: 'json',
            data: {dateFrom: dateFrom, dateTo: dateTo}, 
            success: function(data, status) {
                // console.log(data)
                if(data.result){
                    $('.dependentDiv').hide('slow');
                    $('.existingRescheduleId').val(data.id); 
                    $('#purpose').val(data.purpose);
                    $('#dateFrom').val(data.dateFrom);
                    $('#dateTo').val(data.dateTo);
                    $('.purposeDiv').show('slow');                                   

                    if(data.rescheduleFor == "specific"){
                        $('#rescheduleForAll').removeAttr('checked');  
                        $('#rescheduleForSpecific').attr("checked", "checked");  

                        $('.branchDiv').show('slow');
                        var prevBranches = jQuery.parseJSON(data.todoBranches);

                        $('.specificBranch').each(function(i, obj) {
                            if($.inArray(parseInt($(this).val()), prevBranches) > -1){
                                $(this).prop('checked', true);
                                $(this).addClass('preChecked');
                            }                   
                        });
                        // PENDING TASK: DISABLE DONE BRANCHES (LOADING DIV WILL NOW SHOW DONE UNITS)
                    }else{
                        $('.specificBranch').prop('checked', false); 
                    }
                    toastr.info('Existing reschedule data loaded!');
                }else{
                    if(data.returnSubData.startDateExistenceStatus){
                        $('#dateFrom').val('');
                        toastr.warning('Start date exists in between '+data.returnSubData.startDateExistenceRange);
                    }                        
                    if(data.returnSubData.endDateExistenceStatus){
                        $('#dateTo').val('');
                        toastr.warning('End date exists in between '+data.returnSubData.endDateExistenceRange);
                    }                        
                    if(data.returnSubData.insideRangeExistenceStatus){
                        $('#dateFrom').val('');
                        $('#dateTo').val('');
                        toastr.warning('There exists a sub range '+data.returnSubData.insideRangeExistenceRange);
                    }                                                

                    $('.branchDiv').hide('slow');
                    $('.dependentDiv').show('slow');                    
                    $('.specificBranch').prop('checked', false); 
                }
            },
            error: function(data) {
                alert(data.errors);
            }
        });
    }
</script>