@extends('layouts/microfin_layout')
@section('title', '| New Reschedule')
@section('content')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<style type="text/css">
    .form-control {
        font-size: 11px !important;
        padding: 5px !important;
    }
    label {
        font-size: 11px !important;
    }

    .select2-container{
        width: 100% !important;
        border: 1px solid #e4e4e4 !important;
        border-radius: 0 !important;
    }
    .select2-selection{
        border: none !important;
        border-radius: 0 !important;
    }
    #select2-samityId-container{
        font-size: 11px !important;
        padding: 5px !important;
    }
    .select2-selection__rendered{
        font-size: 11px !important;
        padding: 5px !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('viewLoanMemberWiseReschedule/') }}" class="btn btn-info pull-right addViewBtn" id="rescheduleListBtn">
                    <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 (member-wise)</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')) !!}                                 

                                <div class="form-group">
                                    {!! Form::label('branchId', 'Branch:*', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-6">
                                        {!! Form::select('branchId', ($damageData['branches']), null, array('id' => 'branchId', 'class'=>'form-control', 'autocomplete'=>'off', 'required')) !!}
                                    </div>
                                </div>

                                <div class="form-group">
                                    {!! Form::label('samityId', 'Samity:*', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-6">
                                        {!! Form::select('samityId', [''=>'Select Samity'], null, ['id'=>'samityId', 'class'=>'form-control', 'autocomplete'=>'off', 'required']) !!}
                                    </div>
                                </div>

                                <div class="form-group">
                                    {!! Form::label('memberId', 'Member:*', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-6">
                                        {!! Form::select('memberId', [''=>'Select Member'], null, ['id'=>'memberId', 'class'=>'form-control', 'autocomplete'=>'off', 'required']) !!}
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    {!! Form::label('loanId', 'Loan Product:*', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-6">
                                        {!! Form::select('loanId', [''=>'Select Loan Product'], null, ['id'=>'loanId', 'class'=>'form-control', 'autocomplete'=>'off', 'required']) !!}
                                    </div>
                                </div>

                                <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">
                                    {!! 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">
                                    <div class="col-sm-10 col-sm-offset-2">
                                        {!! Form::submit('Proceed', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                    </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(){     

        setTimeout(() => {
            $("#branchId").select2();
            $("#samityId").select2();
            $("#memberId").select2();
            $("#loanId").select2();
        }, 1000);

        $("#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();
                }
            }
        });        


        $(document).on('change', '#branchId', function(){
            var branchId = $(this).val();
            if(!branchId) return;
            $("#samityId option:gt(0)").remove();
            $("#memberId option:gt(0)").remove();
            $("#loanId option:gt(0)").remove();
            $.ajax({
                type: 'post',
                url: './getBranchWiseSamities',      
                dataType: 'json',
                data: {branchId: branchId}
            })        
            .done(function(data) {
                $.each(data, function(index, val) {
                    $("#samityId").append("<option value='"+index+"'>"+ val +"</option>");
                });
                $("#samityId").select2(); 
            })
            .fail(function() {
                alert("error");
            });
        });

        $(document).on('change', '#samityId', function(){
            var samityId = $(this).val();
            if(!samityId) return;
            $("#memberId option:gt(0)").remove();
            $("#loanId option:gt(0)").remove();
            $.ajax({
                type: 'post',
                url: './getSamityWiseMembers',      
                dataType: 'json',
                data: {samityId: samityId}
            })        
            .done(function(data) {
                $.each(data, function(index, val) {
                    $("#memberId").append("<option value='"+index+"'>"+ val +"</option>");
                });
                $("#memberId").select2(); 
            })
            .fail(function() {
                alert("error");
            });
        });

        $(document).on('change', '#memberId', function(){
            var memberId = $(this).val();
            if(!memberId) return;
            $("#loanId option:gt(0)").remove();
            $.ajax({
                type: 'post',
                url: './getMemberWiseLoanProducts',      
                dataType: 'json',
                data: {memberId: memberId}
            })        
            .done(function(data) {
                $.each(data, function(index, val) {
                    $("#loanId").append("<option value='"+index+"'>"+ val +"</option>");
                });
                $("#loanId").select2();
            })
            .fail(function() {
                alert("error");
            });
        });

       
        $("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();

            
            $.ajax({
                type: 'post',
                url: './executeMemberWiseLoanReschedule',
                dataType: 'json',
                data: {                  
                    dateFrom: $('#dateFrom').val(),
                    dateTo: $('#dateTo').val(),
                    purpose: $('#purpose').val(),
                    loanId: $('#loanId').val()
                }, 
                success: function(data) {                   
                    $('#loadingModal').hide();
                    console.log(data, status);
                    if(data.success){
                        toastr.success(data.msg);
                        setTimeout(() => { window.location.href = '{{ url('viewLoanMemberWiseReschedule/') }}'; }, 500);
                    }
                    else{
                        toastr.error(data.msg);
                        // setTimeout(() => { window.location.href = '{{ url('addLoanMemberWiseReschedule/') }}'; }, 500);
                    }
                },
                error: function(data) {
                    toastr.error(data.msg);
                    toastr.error(data.errors);
                }
            });
        });

        
           
    });

    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;
        // }        
    }
</script>