@extends('layouts.app')

@section('content')

<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->

    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div class="progress_bar"></div>
        </div>

        <div class="breadcrumbs">
            <ul>
                <li>
                    <a href="{{url('admin/settings')}}" class="">
                        Settings
                    </a>
                </li>
                <li>
                    <a href="#" class="breadcrumb_link">
                        Opening Balances
                    </a>
                </li>
            </ul>

            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>

    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="row">
            <div class="col-md-12">

                <div class="portlet setting_landing">
                    <div class="portlet-title" style="border-bottom: 0">
                        <div class="caption">
                            <h2>Opening Balances
                                <span>Setup opening balance for the accounts once you are migrating from another accounting application.</span>
                            </h2>
                        </div>

                        <div class="actions btn-set" style="background: #fff;  position: fixed;right: 17px;z-index: 1;">
                        </div>
                    </div>

                    <hr>

                    <div class="portlet-body">
                        <div class="settings">
                            <form id="frm-opening-balance-store">
                                <!--------------------------------------1ST ROW --------------------------------------->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-4">
                                            <span class="main_title">CUSTOMERS</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="row each_row">
                                    <div class="col-md-12">

                                        <div class="col-md-4">
                                            <span class="sub_heading">
                                                What your customers owe your business?
                                            </span>

                                            <span class="sub_heading">
                                                This will be useful once you are migrating from another application to Salesoft Resto.
                                            </span>
                                        </div>

                                        <div class="col-md-1"></div>

                                        <div class="col-md-6">

                                            <div class="row">
                                                <div class="portlet-body">
                                                    <div class="products box">

                                                        <div class="header_tbl">
                                                            <div class="row">

                                                                <div class="col-md-12">
                                                                    <div class="col-md-4 row_header">
                                                                        Customer Name                                                                   </div>
                                                                    <div class="col-md-2 row_header text_right">
                                                                        Debit
                                                                    </div>
                                                                    <div class="col-md-2 row_header text_right">
                                                                        &nbsp;Credit
                                                                    </div>
                                                                    <div class="col-md-4 row_header b4_del_header b4_del_header">
                                                                        Balance as on
                                                                    </div>
                                                                    <!--<div class=" del_header"></div>-->
                                                                </div>

                                                            </div>
                                                        </div>

                                                        @if(!empty($data["selected"]))
                                                        @foreach($data["selected"] as $selected_account)
                                                        <div class="row_wrap">
                                                            <div class="row_inner_wrap">
                                                                <input type="hidden" value="">

                                                                <div class="row">
                                                                    <div class="col-md-12">

                                                                        <div class="col-md-4 inner_row">
                                                                            <select class="select2" disabled="">
                                                                                <option>{{$selected_account["name"]}}</option> 
                                                                            </select>
                                                                        </div>

                                                                        <div class="col-md-2 inner_row">
                                                                            <input type="text" value="{{number_format($selected_account["debit"],$decimal_point)}}" class="form-control just_number text_right" disabled autocomplete="off">
                                                                        </div>

                                                                        <div class="col-md-2 inner_row">
                                                                            <input type="text" value="{{number_format($selected_account["credit"],$decimal_point)}}" class="form-control just_number text_right" disabled autocomplete="off">
                                                                        </div>

                                                                        <div class="col-md-4 inner_row ">
                                                                            <div class="input-group datepicker_wrap">
                                                                                <input class="form-control date_joining_wrap date_of_joining validate" value="{{date("d-m-Y",strtotime($selected_account["opening_date"]))}}" type="text" disabled>
                                                                                <span class="input-group-btn">
                                                                                    <!--<button class="btn default custom_calender_date_open" type="button" style="margin: 0" value="">-->
                                                                                    <button class="btn default" type="button" style="margin: 0" value="">
                                                                                        <i class="fa fa-calendar"></i>
                                                                                    </button>
                                                                                </span>
                                                                            </div>
                                                                        </div>

                                                                    <!--<div class=" del_icon">
                                                                            <i class="fa fa-trash-o del" aria-hidden="true"></i>
                                                                        </div>-->

                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>

                                                        @endforeach
                                                        @endif

                                                        <div class="row_wrap new_row_select_account">
                                                            <div class="row_inner_wrap" data-new-raw="0">
                                                                <input type="hidden" value="">

                                                                <div class="row">
                                                                    <div class="col-md-12">

                                                                        <div class="col-md-4 inner_row">
                                                                            <select class="select2 select_account" name="account_id[]">
                                                                                <option></option>
                                                                                @foreach($data["unselected"] as $unselected_account)
                                                                                <option value="{{$unselected_account["id"]}}"> {{$unselected_account["name"]}}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>

                                                                        <div class="col-md-2 inner_row">
                                                                            <input type="number" name="debit[]" class="form-control just_number text_right debit" placeholder="{{number_format("0.0000",$decimal_point)}}" min="1" autocomplete="off">
                                                                        </div>

                                                                        <div class="col-md-2 inner_row">
                                                                            <input type="number" name="credit[]" class="form-control just_number text_right credit" placeholder="{{number_format("0.0000",$decimal_point)}}" min="1" autocomplete="off">
                                                                        </div>

                                                                        <div class="col-md-4 inner_row">
                                                                            <div class="input-group datepicker_wrap">
                                                                                <input name="date_of_joining[]" class="form-control date_joining_wrap date_of_joining validate calender_popup_date_open"  value="{{date('d-m-Y')}}" type="text">
                                                                                <span class="input-group-btn">
                                                                                    <button class="btn default custom_calender_date_open" type="button" style="margin: 0" value="">
                                                                                        <i class="fa fa-calendar"></i>
                                                                                    </button>
                                                                                </span>
                                                                            </div>
                                                                        </div>

                                                                        <!--<div class=" del_icon">
                                                                                <i class="fa fa-trash-o del" aria-hidden="true"></i>
                                                                            </div>-->

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

                                                    </div>
                                                    <!-- END LIST OF PRODUCTS -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-7"></div>

                                    <div class="col-md-4">
                                        <input type="submit" value="Save" class="btn theme_btn_round float_btn store-oppening-balance">

                                        <a href="{{url('admin/settings')}}"
                                           class="btn theme_btn_round cancel float_btn">Cancel</a>
                                    </div>

                                </div>
                                <!--------------------------------------1ST ROW --------------------------------------->
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT -->




@endsection('content')

@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="http://backoffice.evakopro.site/assets/global/css/settings.css" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<style type="text/css">
    .del {
        visibility: visible;
    }
    .selectMsg .col-md-12 {
        padding: 0;
    }
    .select2 .select2-selection.select2-selection--single{
        height: 33px !important;
    }
    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
        left: 18px;
    }
    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
        padding: 0 16px;
        border: 1px solid #c6c8cc;
        right: 0;
        border-radius: 0 4px 4px 0;
        background: #ececec;
    }
    .select2-container--bootstrap .select2-selection__clear {
        display: none;
    }
    a.cancel {
        color:white !important;
        background: #b7b9bb;
    } 
    .form-control {
        height: 34px !important;
    }
    .b4_del_header {
        width: 28%;
    }
    .del_icon, .del_header {
        width: 5%;
    }
    .row_inner_wrap:last-child .del_icon {
        display: none;
    }
    .breadcrumbs li:first-child a{
        color: #00919e;
    }
    .form-control[disabled], fieldset[disabled] .form-control {
        color: #bdbdbd;
    }

    .form-control, .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
        font-weight: 500;
    }
    .error_border_color{
        border: 1px solid red !important;
    }
    .select2-container--bootstrap.select2-container--disabled .select2-selection, .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
        background-color: #ffffff !important;
    }
    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
        left: 18px;
        border-color: black transparent transparent transparent !important;
    }

    .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
        padding: 0 16px;
        border: 1px solid #c6c8cc;
        right: 0;
        border-radius: 0 4px 4px 0;
        background: #ececec;
    }

    .select2-container--bootstrap.select2-container--open .select2-selection__arrow b {
        border-color: transparent transparent black !important;
    }


</style>

@stop

@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script>
$(document).ready(function () {
    //SELECT 2 Simple//
    $(".select2").select2({
        placeholder: "Select a customer from this list",
        allowClear: true
    });
});
</script>

<script type="text/javascript">
    var select_accounts = [];
    var new_accounts_arr = [];

    //RESTRICT DATE FROM YEAR TO DATE//
    var date = new Date();
    //Date open either previous or upcoming
    $('.calender_popup_date_open').datepicker({
        format: 'dd-mm-yyyy',
        pickerPosition: "top-left",
        autoclose: true,
        //startDate: date
    }).on('hide.bs.modal', function (event) {
        // prevent datepicker from firing bootstrap modal "show.bs.modal"
        event.stopPropagation();
    });
    $('.modal-fullscreen.modal .modal-body').scroll(function () {
        $(".date_joining_wrap").datepicker("hide");
        $(".date_joining_wrap").blur();
    });
    $('body').on('click', '.custom_calender_date_open', function () {
        $(this).parent().parent().find('.calender_popup_date_open').trigger('focus');
    });
    var datePicker = $(".calendar").datepicker({});
    var t;
    $(document).on(
            'DOMMouseScroll mousewheel scroll',
            '#myModal',
            function () {
                window.clearTimeout(t);
                t = window.setTimeout(function () {
                    $('.calendar').datepicker('place')
                }, 100);
            }
    );


    $(document).on("change", ".select_account", function () {
        $('#busyloading, .overlay').show();
        $this = $(this);
        $account_id = $(this).val();
        var accounts_arr = null;

        if (new_accounts_arr.length < 1) {
            $.each(accounts_arr, function (key, value) {
                new_accounts_arr.push({'id': value.id, 'name': value.name});
            });
        }
        if (check_value($account_id, select_accounts) == 'false') {
            select_accounts.push($account_id);
            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
            var url = "{{route('admin.customer.opening-balance.selected')}}";
            $.ajax({
                url: url,
                type: 'POST',
                data: {account_id: $account_id, account_arr: new_accounts_arr},
                success: function (res) {
                    $('#busyloading, .overlay').hide();
                    if (res.status == 1000) {
                        new_accounts_arr = [];
                        $.each(res.list_array.unselected, function (key, value) {
                            new_accounts_arr.push({'id': value.id, 'name': value.name});
                        });
                        $this.parent().parent().parent().parent().attr("data-new-raw", "1");
                        $(".new_row_select_account").append(res.html);

                    }
                },
                error: function (error) {
                    $('#busyloading, .overlay').fadeOut(200);
                    alertbox('danger', error);
                }
            });

        } else {
            alert("this customer alredy selected!");
            $this.parent().parent().parent().parent().remove();
            $('#busyloading, .overlay').hide();
            return false;
        }

    })

    $(document).on("input", ".debit", function () {
        var debit_amount = $(this).val();
        $(this).removeClass('error_border_color');
        if (debit_amount != '') {
            $(this).parent().parent().find(".credit").attr("readonly", "readonly");
            $(this).parent().parent().find(".credit").removeClass('error_border_color');
        } else {
            $(this).parent().parent().find(".credit").removeAttr("readonly");
        }
    });
    $(document).on("input", ".credit", function () {
        var debit_amount = $(this).val();
        $(this).removeClass('error_border_color');
        if (debit_amount != '') {
            $(this).parent().parent().find(".debit").attr("readonly", "readonly");
            $(this).parent().parent().find(".debit").removeClass('error_border_color');
        } else {
            $(this).parent().parent().find(".debit").removeAttr("readonly");
        }
    });
    $(document).on("click", ".store-oppening-balance", function (e) {
        $this = $(this);
        e.preventDefault();
        $('#busyloading, .overlay').show();
        $(this).addClass('disabled');
        var debit_flag = 0;
        var credit_flag = 0;
        var date_flag = 0;
        $("input[name='debit[]']").map(function () {
            $(this).removeClass('error_border_color');
            if ($(this).parent().parent().parent().parent().attr("data-new-raw") == 1) {
                if (!$(this).is('[readonly]')) {
                    if ($(this).val() == "" || $(this).val() == 0) {
                        $(this).addClass('error_border_color');
                        debit_flag = 1;
                    } else {
                        $(this).removeClass('error_border_color');
                    }
                }
            }
        });
        $("input[name='credit[]']").map(function () {
            $(this).removeClass('error_border_color');
            if ($(this).parent().parent().parent().parent().attr("data-new-raw") == 1) {
                if (!$(this).is('[readonly]')) {
                    if ($(this).val() == "" || $(this).val() == 0) {
                        $(this).addClass('error_border_color');
                        credit_flag = 1;
                    } else {
                        $(this).removeClass('error_border_color');
                    }
                }
            }
        });

        $("input[name='date_of_joining[]']").map(function () {
            $(this).removeClass('error_border_color');
            if ($(this).parent().parent().parent().parent().parent().attr("data-new-raw") == 1) {
                if (!$(this).is('[readonly]')) {
                    if ($(this).val() == "" || $(this).val() == 0) {
                        $(this).addClass('error_border_color');
                        date_flag = 1;
                    } else {
                        $(this).removeClass('error_border_color');
                    }
                }
            }
        });

        if (debit_flag == 1 && credit_flag == 1 || date_flag == 1) {
            alertbox('danger', '{{ trans("js-messages.DCM100") }}');
            $(this).removeClass('disabled');
            $('#busyloading, .overlay').hide();
            return false;
        } else {
            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
            var formData = new FormData(document.getElementById("frm-opening-balance-store"));
            var url = "{{route('admin.settings.customer.opening-balance.store')}}";
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    $('#busyloading, .overlay').hide();
                    if (res.status == 1000) {
                        alertbox('success', res.message);
                        setTimeout(function () {
                            location.reload();
                        }, 1500);
                    } else {
                        $this.removeClass('disabled');
                        alertbox('danger', "Please enter a valid data!");
                    }
                },
                error: function (error) {
                    $('#busyloading, .overlay').fadeOut(200);
                    alertbox('danger', error);
                }
            });
        }
    })
</script>
@stop