<style>
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd; 
    }
    .btn-default{
        border: none;
        background-color: #eee;
    }
    .btn-default:hover{
        background-color:#4c0870!important;
        color:#fff;
        border: none;
    }
    .p-0{
        padding:0!important;
    }
    .datepicker thead tr .dow {
        color:#ed9421!important;
    }
    .datepicker table tr td.day:hover {
        background: #ed9421!important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #ed9421!important;
    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870!important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #ed9421!important;
    }
    .datepicker table tr td span:hover {
        background-color: #ed9421!important;
        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #ed9421!important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #ed9421!important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"> <?php print CommonLanguage::getMessage('vehicle_rents'); ?></div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <?php
            if ($permissions->hasPermission('add_vehicle_rents')) {
                echo Forms::FloatingAddButton('652d90', '#add_vehicle_rents', CommonLanguage::getMessage('add'));
            }
            ?>
            <table class="table table-bordered garage" id="tableWithSearch" >
                <thead>
                    <tr>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('vehicle'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('basic_driver'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('rent_type'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('Date'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('amount'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('Action'); ?></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-md " id="add_vehicle_rents" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog " style="width:50%;" >
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="pg-close fa-22"></i></span></button>
                <h4 class="modal-title semi-bold"><?php print CommonLanguage::getMessage('vehicle_rents') ?></h4>
                <div id="vehicle_rent_alert"></div>
            </div>
            <div class="modal-body">
                <form id="vehicle_rent_form">
                    <div class="row form-group m-t-10">
                        <div class=" col-md-6" >
                            <label class="labelText"><?php print CommonLanguage::getMessage('Date'); ?><span class="red-star">*</span></label>
                            <input type="text" class="form-control" id="rent_date" name="rent_date" required autocomplete="off"/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class=" col-md-6" >
                            <label class="labelText"><?php print CommonLanguage::getMessage('vehicle'); ?><span class="red-star">*</span></label>
                            <input type="hidden" class="full-width" id="vehicle_id" name="vehicle_id" required/>
                        </div>
                        <div class=" col-md-6" >
                            <label class="labelText"><?php print CommonLanguage::getMessage('driver'); ?><span class="red-star">*</span></label>
                            <input type="hidden" class="full-width" id="employee_id" name="employee_id" required readonly/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class=" col-md-6" >
                            <label class="labelText"><?php print CommonLanguage::getMessage('rent_type'); ?><span class="red-star">*</span></label>
                            <input type="hidden" class="full-width" id="rent_type_id" name="rent_type_id" required readonly/>
                        </div>
                        <div class=" col-md-6" >
                            <label class="labelText"><?php print CommonLanguage::getMessage('account'); ?><span class="red-star">*</span></label>
                            <input type="hidden" class="full-width" id="account_id" value="<?php echo $vehicle_rent_account_id;?>"  data-select-name="<?php echo $vehicle_rent_account['Account_Name'].' - '.$vehicle_rent_account['Account_Code'];?>" name="account_id" required/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class=" col-md-6" >
                            <label><?php print CommonLanguage::getMessage('amount'); ?><span class="red-star">*</span></label>
                            <input type="number" class="form-control" id="rent_amount" name="rent_amount" required/>
                        </div>
                        <div class=" col-md-6 " >
                            <label><?php print CommonLanguage::getMessage('currency'); ?><span class="red-star">*</span></label>
                            <input type="hidden" class="full-width" id="currency_id" name="currency_id" required/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close') ?></button>
                <button style="color:white !important;" type="button" class="btn bg-success-darker white" id="assignBtn" style="width:auto"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
            <?php echo Forms::ModalLoader('rentLoader'); ?>
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('salary_periods')); ?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
                Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
                var IsEdit = false, IDToEdit = 0;
    $(function () {
        $('#currency_id').val(<?php echo smc_session()['local_currency']; ?>).attr('data-select-name','<?php echo smc_session()['local_currency_name']; ?>'+' '+'<?php echo smc_session()['local_currency_symbol']; ?>')
        build_select2($("#currency_id"), "xhr/CurrencySearch")
        build_select2($("#rent_type_id"), "xhr/CommonSearch?col_id=rent_type_id&col_name=rent_type_name&table=tbl_garage_rent_type")
        build_select2($("#employee_id"), "xhr/employeeSearch")
        build_select2($("#vehicle_id"), "xhr/truckSearch");
        build_select2($("#account_id"), ("xhr/accIDSearch?type=sales"))
        $("#rent_date").datepicker({autoclose: true})
        $(".floatingContainer").on("click", function () {
            IsEdit = false;
            $('#account_id').val("<?php echo $vehicle_rent_account_id;?>").attr('data-select-name', "<?php echo $vehicle_rent_account['Account_Name'].' - '.$vehicle_rent_account['Account_Code'];?>")
            build_select2($("#account_id"), ("xhr/accIDSearch?type=sales"))
            IDToEdit = 0;
        })
        RebuildDataTable(title, [0, 1, 2, 3], "GarageAjax/vehicle_rents_ajax")
        $("#vehicle_id").on("change", function () {
            $.ajax({
                url: "GarageAjax/get_vehicle_rent_amount",
                method: "GET",
                dataType: 'json',
                data: {id: $(this).val()},
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        $("#employee_id").val(v1.responseJSON['driver_emp_id']).attr("data-select-name", v1.responseJSON['Employee_Name'])
                        build_select2($("#employee_id"), "xhr/employeeSearch")
                        $("#rent_amount").val(v1.responseJSON['rent_type_price'])
                        $("#currency_id").val("").attr("data-select-name", "")
                        if (v1.responseJSON['currency_id'] != null) {
                            $("#currency_id").val(v1.responseJSON['currency_id']).attr("data-select-name", v1.responseJSON['Currency_Name'])
                        }
                        build_select2($("#currency_id"), "xhr/CurrencySearch")
                        $("#rent_type_id").val(v1.responseJSON['rent_type_id']).attr("data-select-name", v1.responseJSON['rent_type_name'])
                        build_select2($("#rent_type_id"), "xhr/CommonSearch?col_id=rent_type_id&col_name=rent_type_name&table=tbl_garage_rent_type")
                    }
                }
            })
        })
        $("#assignBtn").on("click", function () {
            $("#vehicle_rent_alert").removeClass('hidden')
            if (!$("#vehicle_rent_form").valid()) {
                $("#vehicle_rent_alert").attr("class", "alert alert-danger").html(Required_Fields)
                return false;
            }
            var DataArr = new FormData(document.getElementById("vehicle_rent_form"));
            DataArr.append("rent_id", IDToEdit)
            $.ajax({
                url: IsEdit ? "GarageAjax/edit_vehicle_rent" : "GarageAjax/add_vehicle_rent",
                method: "POST",
                dataType: 'json',
                data: DataArr,
                processData: false,
                contentType: false,
                complete: function (v1, v2) {
                    if (v2 == "success" && v1.responseJSON == 'OK') {
                        $("#vehicle_rent_alert").attr("class", "alert alert-success").html(Submitted_Successfully)
                        RebuildDataTable(title, [0, 1, 2, 3], "GarageAjax/vehicle_rents_ajax")
                        setTimeout(function () {
                            $("#vehicle_rent_alert").addClass('hidden')
                            $("#add_vehicle_rents").modal("hide")
                        }, 5000)
                    } else {
                        $("#vehicle_rent_alert").attr("class", "alert alert-danger").html(v1.responseJSON)
                    }
                }
            })
        })
        $("#tableWithSearch tbody").on('click', '.Edit', function () {
            $(".update_emp_div").removeClass("hidden")
            IsEdit = true;
            IDToEdit = $(this).attr('data-id');
            CommonViewById('GarageAjax/get_vehicle_rent_by_id', {id: IDToEdit},
                           '#rentLoader', function (response) {
                console.log(response)
                $('#rent_date').val(response.rent_date)
                $('#rent_amount').val(response.rent_amount)
                $('#currency_id').val(response.currency_id).attr('data-select-name', response.Currency_Name)
                build_select2($("#currency_id"), "xhr/CurrencySearch")
                $('#account_id').val(response.account_id).attr('data-select-name', (response.Account_Name + ' - ' + response.Account_Code))
                build_select2($("#account_id"), ("xhr/accIDSearch?type=sales"))
                $('#employee_id').val(response.employee_id).attr('data-select-name', (response.Employee_Name))
                build_select2($("#employee_id"), "xhr/employeeSearch")
                $('#vehicle_id').val(response.vehicle_id).attr('data-select-name', (response.Vehicle_Name + ' - ' + response.Vehicle_Code))
                build_select2($("#vehicle_id"), "xhr/truckSearch");
                $('#rent_type_id').val(response.rent_type_id).attr('data-select-name', (response.rent_type_name + ' - ' + response.Vehicle_Code))
                build_select2($("#rent_type_id"), "xhr/CommonSearch?col_id=rent_type_id&col_name=rent_type_name&table=tbl_garage_rent_type")
                //                        $('#rent_type_name').val(response[0].rent_type_name)
                //                $('#rent_type_price').val(response[0].rent_type_price)
                //                $('#currency_id').val(response[0].currency_id).attr('data-select-name',response[0].Currency_Name+' '+response[0].Currency_Symbol)
                //                build_select2($("#currency_id"), "xhr/CommonSearch?col_name=concat_ws(' ',Currency_Name,Currency_Symbol)&col_id=Currency_ID&table=tbl_common_currency");
            });
            $("#add_vehicle_rents").modal("show")
        })
    });
</script>
