@extends('layouts/microfin_layout')
    @section('title', '| Interest Provision Hold')
@section('content')

<style type="text/css">
    .form-group, .form-control{
        font-size: 11px !important;
        color: black !important;
    }
    .form-control{
        padding: 5px !important;
    }
    .form-group>label{
        font-weight: bold;
    }
    
    .ui-datepicker-calendar {
        display: none !important;
    }

    .text-left{
        text-align: left !important;
    }
</style>
<script type="text/javascript">
    $("#loadingModal").show();
</script>

<div class="row add-data-form">
    <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('provisionHold') }}" class="btn btn-info pull-right addViewBtn">
                    <i class="glyphicon glyphicon-th-list viewIcon"></i>
                    Interest Provision Hold List
                </a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">@if($action == 'create') Add @elseif($action == 'edit') Edit @endif  Interest Provision Hold</div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            
                            {!! Form::open(array('url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups')) !!}
                            {!! Form::hidden('memberId',null,['id'=>'memberId']) !!}

                                <div class="form-group @if(count($eligibleProducts) < 2) hidden @endif">
                                    {!! Form::label('product_id', 'Product:', ['class' => 'col-md-3 control-label required']) !!}
                                    <div class="col-sm-9">
                                        <select id="product_id" name="product_id" class="form-control">
                                            @foreach($eligibleProducts as $eligibleProduct)
                                                <option value='{{$eligibleProduct->id}}'>{{$eligibleProduct->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    {!! Form::label('effect_to', 'Month:', ['class' => 'col-md-3 control-label required']) !!}
                                    <div class="col-sm-9">
                                        {!! Form::text('effect_to',null,['id'=>'effect_to','class'=>'form-control','readonly', 'placeholder' => 'Select Month', 'required' => 'required']) !!}
                                    </div>
                                </div>


                                <div class="form-group" >
                                    {!! Form::label('generate_date', 'Branch(es):', ['class' => 'col-md-3 control-label required']) !!}
                                    <div class="col-sm-9">
                                        <table class="table table-responsive table-bordered" id="branch_id">
                                            @if(count($branchList) > 1 && $action != 'details')
                                                <tr>
                                                    <td class="text-center">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                {!! Form::checkbox('all_branch', 'all_branch', false, ['class' => 'control-label', 'id' => 'all_branch']) !!}
                                                                <label for="all_branch">Select All Branches</label>
                                                                
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endif
                                            <tr>
                                                <td class="text-left">
                                                    @foreach($branchList as $i => $branch)
                                                    <div class="col-sm-4">
                                                        {!! Form::checkbox('branch_id[]', $i,  count($branchList) > 1 ?  false : true, ['class' => 'control-label branch', 'id' => 'branch_'.$i]) !!}
                                                        <label for="branch_{{$i}}">{{$branch}}</label>
                                                    </div>
                                                    @endforeach
                                                        
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    
                                </div>
                                @if($action != 'details')
                                    <ul class="pager wizard pull-right">   
                                        {!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                        <a href="{{ url('provisionHold') }}" class="btn btn-danger closeBtn">Close</a>
                                    </ul>
                                @endif                                    
                                
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    if("{{$edit_id}}" > 0){
        $('#effect_to').val("{{ date('m-Y', strtotime($effect_to))}}");
        $('#product_id').val("{{$product_id}}");
        getHoldData();
    }
    if("{{$action}}" ==  'details'){
        $('select').prop('disabled', true);
        $('input').prop('disabled', true);
    }
    $("#effect_to").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)));
            getHoldData();
        },
       
    });

    function getHoldData(){
        var product_id = $('#product_id').children("option:selected").val();
        var effect_to = $('#effect_to').val();
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': "{{csrf_token()}}",
            },
            type: 'post',
            url: '{{ url("provisionHold/getHoldData") }}',
            dataType: 'json',
            data: {product_id:product_id, effect_to:effect_to},
            success: function(data) {
                $('.branch').prop ( "checked" , false);
                $.each(data.existHoldProvision, function(i, branch) {
                    $('#branch_'+branch).prop ( "checked" , true);
                });
            },
            error: function(_response) {
                alert(_response.errors);
            }
        })
    }

    $('#all_branch').on('click', function(){
        if($('#all_branch').is(':checked')){
            $('.branch').prop ( "checked" , true);
        } else {
            $('.branch').prop ( "checked" , false);
        }
    });

    $('#product_id').on('change', function(){
        var effect_to = $('#effect_to').val();
        if(effect_to) { getHoldData();}
    });


    $(document).ready(function() {
        $("#loadingModal").hide();
        $('form').submit(function(event){
            event.preventDefault();
            $(".error").remove();
            $("button").prop('disabled', true);
            //$('#loadingModal').show();
            //$('#preview-modal').modal('hide');
            $.ajax({
                type: 'post',
                url: '{{ url("provisionHold/store") }}',
                dataType: 'json',
                data: $('form').serialize(),
                success: function(data) {
                    // Print Error
                    if(data.errors) {
                        $("button").prop('disabled', false);
                        $.each(data.errors, function(name, error) {
                                $("#"+name).after("<p class='error' style='color:red;'>* "+data.errors[name]+"</p>");
                        });
                        $('#loadingModal').hide();
                        $('#preview-modal').modal('show', {backdrop: 'static'});
                    } else {
                        if(data.responseTitle == "Success!"){
                            $('#loadingModal').hide();
                            toastr.success(data.responseText, data.responseTitle, opts);
                            setTimeout(function(){
                                //window.location.href = '{{ url('provisionHold') }}';
                                location.reload();
                            }, 2000);
                        }else{
                            toastr.warning(data.responseText, data.responseTitle, opts);
                            $('#loadingModal').hide();
                            $("button").prop('disabled', false);
                            $('#preview-modal').modal('show', {backdrop: 'static'});
                        }
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                    $('#loadingModal').hide();
                    $("button").prop('disabled', false);
                }
            });
        });

}); /*Ready*/


</script>

@endsection