<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('multi_rent_payment'); ?></div>
        </div>
        <div class="panel-body">
            <div id="pay_alert"></div>
            <div class="row form-group">
                <div  class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="date" name="date" class="form-control" autocomplete="off" value="<?php echo ($today); ?>" required />
                </div>
                <div  class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('rent_type'); ?></label>
                    <input id="rent_type_id" name="rent_type_id" class="full-width" type="hidden" required/>
                </div>
                <div  class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('payment_type'); ?></label>
                    <select id="paymentType" name="Payment_ID" class="full-width PaymentType" data-init-plugin="select2" required>
                        <?php foreach ($payment_type as $type): ?>
                            <option data-code="<?php echo $type['Account_ID'] ?>" value="<?php echo $type['Account_ID']; ?>"><?php echo $type['Account_Code'] . ' - ' . $type['Account_Name']; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered garage" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center "  ><?php echo CommonLanguage::getMessage('vehicle') ?></th>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('driver'); ?></th>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('rent_amount'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('driver_balance'); ?></th>
                                <th class="text-center no-print"  ><?php print CommonLanguage::getMessage('amount'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>

                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 pull-right">
                    <button class="btn btn-success-darker full-width" id="submit_payment"><?php echo CommonLanguage::getMessage('Save'); ?></button>
                </div>
            </div>
            <?php echo Forms::ModalLoader('pay_loader'); ?>
        </div>
    </div>
</div>
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>;
    $(function () {
        build_select2($("#rent_type_id"), "xhr/CommonSearch?col_id=rent_type_id&col_name=rent_type_name&table=tbl_garage_rent_type")



        $("#date").datepicker({autoclose: true})
        buildCurrentTable();
        $("#date").on("changeDate", function () {
            buildCurrentTable()
        })
        $("#rent_type_id").on("change", function () {
            buildCurrentTable()
        })
        $("#submit_payment").on("click", function () {
            if ($("#paymentType").val() == '') {
                $("#pay_alert").attr("class", "alert alert-danger").html(Required_Fields)
                $(document.body).animate({scrollTop: 0}, 800)
                return;
            }
            var data={pay_arr : []}, row = $("#tableWithSearch").dataTable().fnGetNodes();

            for (var i = 0; i < row.length; i++) {
                var pay_amount = parseFloat($(row[i]).find("input.pay_amount").val() || 0);
                if (pay_amount > 0) {

                    data.pay_arr.push({
                        rent_id: $(row[i]).find('input.pay_amount').attr("data-id"),
                        employee_id: $(row[i]).find('input.pay_amount').attr("data-emp"),
                        currency_id: $(row[i]).find('input.pay_amount').attr("data-currency"),
                        vehicle_id: $(row[i]).find('input.pay_amount').attr("data-vehicle"),
                        amount: pay_amount,
                        payment_type:$("#paymentType").val(),
                        Employee_Name: $('td:eq(1)', row[i]).html()});
                }
            }
            if (data.pay_arr.length == 0) {
                $("#pay_alert").attr("class", "alert alert-danger").html(Required_Fields)
                $(document.body).animate({scrollTop: 0}, 800)
                return;
            }

            $('#pay_loader').removeClass('hidden');
            $.ajax({
                url: "GarageAjax/add_multi_rent_pay",
                data: data,
                method: "POST",
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        if (v1.responseText === 'OK') {
                            $("#pay_alert").attr("class", "alert alert-success").html(Submitted_Successfully)
                            buildCurrentTable();
                        }
                        $('#pay_loader').addClass('hidden');
                    }
                }
            })
        })
    });
    function buildCurrentTable() {
        $.ajax({
            url: "GarageAjax/get_multi_rent_payment_ajax",
            data: {date: $("#date").val(), rent_type: $("#rent_type_id").val()},
            complete: function (v1, v2) {
                if (v2 == "success") {
                    $("#tableWithSearch").DataTable().destroy();
                    $("#tableWithSearch tbody").empty().html(v1.responseText)
                    RebuildDataTable($('.panel-heading .panel-title').html(), [], "", {}, "#tableWithSearch");
                }
            }
        });
    }

</script>
