@extends('layouts.app')
@section('title', 'Invoices - Monthly')
@section('content')
    <div class="container-fluid mt-1 pt-1">
        <x-invoicetabs/>
        <div class="col-lg-12 col-md-12 col-xl-12 col-sm-12">
            <div class="card">
                <div class="card-body pt-0">
                    <table id="datatable" class="table table-bordered mb-0">
                        <thead>
                            <tr>
                                <th class="td_bgcolor">Sl.No</th>
                                <th class="td_bgcolor">Lender</th>
                                <th class="td_bgcolor">Tax Setup Monthly Cost</th>
                                <th class="td_bgcolor">Tax Tracking Monthly Cost</th>
                                <th class="td_bgcolor">Insurance Setup Monthly Cost</th>
                                <th class="td_bgcolor">Insurance Tracking Monthly Cost</th>
                                <th class="td_bgcolor">Calculated By </th>
                                <th class="td_bgcolor">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                                                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal_pricing" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Add Pricing</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" role="form" name="add_invoice_form" id="add_invoice_form"
                        data-parsley-validate="">
                        @csrf
                        <div class="row">
                            <div class="col-md-3" id="lender_access_data">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label"
                                        style="font-size:14px;">Lender <span class="text-danger"> * </span></label>
                                    <select required class="form-control" name="lender_id" id="lender_id">
                                        <option value=""> Select Lender </option>
                                        @if (isset($ztpLenders))
                                            @foreach ($ztpLenders as $ztplenders_data)
                                                <option value="{{ $ztplenders_data->id }}">
                                                    {{ $ztplenders_data->lender_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Taxline Setup Cost
                                        </label>
                                    <input type="text" name="setupcost" id="setupcost" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter Taxline Setup Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Taxline Tracking Cost
                                       </label>
                                    <input  type="text" name="trackingcost" id="trackingcost" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter Tax Tracking Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Insurance Setup Cost
                                    </label>
                                    <input type="text" name="insurancesetupcost" id="insurancesetupcost" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter Insurance Setup Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Insurance Tracking Cost
                                       </label>
                                    <input type="text" name="insurancetrackingcost" id="insurancetrackingcost" class="form-control" value="" autocomplete="off" placeholder="Enter Insurance Tracking Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Calculated By <span style="color:red">*</span>
                                       </label>
                                    <select required class="form-control" name="payby" id="payby">
                                        <option value="">Choose One</option>
                                        <option value="1">Loans</option>
                                        <option value="2">Parcels</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary"
                    form="add_invoice_form">
                    Submit </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal - Update User Details -->
    <div id="myModal_pricing_update" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Update Pricing</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" role="form" name="pricing_update_form" id="pricing_update_form"
                        data-parsley-validate="">
                        @csrf
                        <input type="hidden" name="pricing_id" id="pricing_id" />
                        <div class="row">
                            <div class="col-md-3" id="lender_access_data">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label"
                                        style="font-size:14px;">Lender <span class="text-danger"> * </span></label>
                                    <select required class="form-control" name="lender_id" id="lender_id1">
                                        <option value=""> Select Lender </option>
                                        @if (isset($ztpLenders))
                                            @foreach ($ztpLenders as $ztplenders_data)
                                                <option value="{{ $ztplenders_data->id }}">
                                                    {{ $ztplenders_data->lender_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Taxline Setup Cost
                                        </label>
                                    <input type="text" name="setupcost1" id="setupcost1" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter Taxline Setup Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Taxline Tracking Cost
                                        </label>
                                    <input type="text" name="trackingcost1" id="trackingcost1" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter Tax Tracking Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Insurance Setup Cost
                                    </label>
                                    <input type="text" name="insurancesetupcost1" id="insurancesetupcost1" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter Insurance Setup Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Insurance Tracking Cost
                                        </label>
                                    <input  type="text" name="insurancetrackingcost1" id="insurancetrackingcost1" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter Insurance Tracking Cost">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Calculated By <span style="color:red">*</span>
                                       </label>
                                    <select required class="form-control" name="payby1" id="payby1">
                                        <option value="">Choose One</option>
                                        <option value="1">Loans</option>
                                        <option value="2">Parcels</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary"
                    form="pricing_update_form"> Update </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

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

@endsection

@section('script')
<script type="text/javascript">
         var table = $('#datatable').DataTable({
        responsive: true,
        dom: 'l<"toolbar">Bfrtip',
        buttons: [
            'excel'
        ],
        initComplete: function(){
            $("div.toolbar").html('<button id="addLender" type="button" class="ml-2 tble_btn btn btn-primary" data-toggle="modal" data-target="#myModal_pricing"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Lender Pricing </button><br />');
        },
       'columnDefs': [ {
            'targets': [4],
            'orderable': false,
        }]
    });
        $(document).ready(function() {
            $('#setupcost').change(function() {
                var value = parseFloat($('#setupcost').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#setupcost').val(parts.join("."));
            });

            $('#trackingcost').change(function() {
                var value = parseFloat($('#trackingcost').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#trackingcost').val(parts.join("."));
            });

            $('#insurancesetupcost').change(function() {
                var value = parseFloat($('#insurancesetupcost').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#insurancesetupcost').val(parts.join("."));
            });
            $('#insurancetrackingcost').change(function() {
                var value = parseFloat($('#insurancetrackingcost').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#insurancetrackingcost').val(parts.join("."));
            });
           

            //update form
            $('#setupcost1').change(function() {
                var value = parseFloat($('#setupcost1').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#setupcost1').val(parts.join("."));
            });

            $('#trackingcost1').change(function() {
                var value = parseFloat($('#trackingcost1').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#trackingcost1').val(parts.join("."));
            });

            $('#insurancesetupcost1').change(function() {
                var value = parseFloat($('#insurancesetupcost1').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#insurancesetupcost1').val(parts.join("."));
            });
            $('#insurancetrackingcost1').change(function() {
                var value = parseFloat($('#insurancetrackingcost1').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#insurancetrackingcost1').val(parts.join("."));
            });
        });

        $(function() {
            $('#users_table').DataTable({
                scrollX: true,
                dom: '<"mt-2"<"row"<"col-md-6"l><"col-md-6"<B><"float-end"f>>><"mb-1"<t>><"row"<"col"i><"col"p>>>',
                buttons: [{
                    text: '<strong>Add Pricing</strong>',
                    className: 'btn btn-sm ml-2',
                    action: function(e, node, config) {
                        openUsers_modal();
                    }
                }],
            });

            $('#add_invoice_form').submit(function(e) {
                e.preventDefault()
                if ($("#add_invoice_form").parsley()) {
                    if ($("#add_invoice_form").parsley().validate()) {
                        if ($("#add_invoice_form").parsley().isValid()) {
                            $.ajax({
                                url: "{{ route('addpricingmonthly') }}",
                                type: "POST",
                                data: new FormData($("#add_invoice_form")[0]),
                                dataType: 'html',
                                processData: false,
                                contentType: false,
                                success: function(response) {
                                    if (response) {
                                        var result = response.split('@#!');
                                        if (result[1] != 'error')
                                        {
                                            $("#myModal_pricing").modal('hide');
                                            Swal.fire({
                                                position: 'middle',
                                                icon: result[1],
                                                title: result[2],
                                                showConfirmButton: false
                                            });
                                            setTimeout(function() {
                                                location.href = location.href;
                                            }, 500);
                                        } else
                                        {
                                            Swal.fire({
                                                position: 'middle',
                                                icon: result[1],
                                                title: result[2],
                                                showConfirmButton: false
                                            });
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            });

            $('#pricing_update_form').submit(function(e) {
                e.preventDefault()
                if ($("#pricing_update_form").parsley()) {
                    if ($("#pricing_update_form").parsley().validate()) {
                        if ($("#pricing_update_form").parsley().isValid()) {
                            $.ajax({
                                url: "{{ route('updatepricingmonthly') }}",
                                type: "POST",
                                data: new FormData($("#pricing_update_form")[0]),
                                dataType: 'html',
                                processData: false,
                                contentType: false,
                                success: function(response) {
                                    if (response) {
                                        var result = response.split('@#!');
                                        if (result[1] != 'error') {
                                            $("#myModal_pricing_update").modal('hide');
                                            Swal.fire({
                                                position: 'middle',
                                                icon: result[1],
                                                title: result[2],
                                                showConfirmButton: false,
                                                timer: 500
                                            });
                                            setTimeout(function() {
                                                location.href = location.href;
                                            }, 1000);
                                        } else {
                                            Swal.fire({
                                                position: 'middle',
                                                icon: result[1],
                                                title: result[2],
                                                showConfirmButton: false,
                                                timer: 500
                                            });
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            });
        });

        function openUsers_modal() 
        {
            $('#add_invoice_form').parsley().reset();
            document.getElementById("add_invoice_form").reset();
            var addUserModal = new bootstrap.Modal(document.getElementById('myModal_pricing'), {
                backdrop: 'static',
                keyboard: false
            });
            $("#myModal_pricing").appendTo("body").modal('show');
        }

        function edit_user(invoiceid) 
        {
            $('#pricing_update_form').parsley().reset();
            document.getElementById("pricing_update_form").reset();
            var updateUserModal = new bootstrap.Modal(document.getElementById('myModal_pricing_update'), {
                backdrop: 'static',
                keyboard: false
            });
            $("#myModal_pricing_update").appendTo("body").modal('show');
            $.ajax({
                url: "/editPricingmonthly/" + invoiceid,
                dataType: "json",
                success: function(data)
                {
                    $('#pricing_id').val(data.result.id);
                    $('#lender_id1').val(data.result.lender_id);
                    $('#setupcost1').val(data.result.tax_setup_cost);
                    $('#trackingcost1').val(data.result.tax_monthly_cost);
                    $('#insurancesetupcost1').val(data.result.insurance_set_up_cost);
                    $('#insurancetrackingcost1').val(data.result.insurance_tracking_cost);
                    $('#payby1').val(data.result.payby);
                }
            })
        }
        $(document).ready(function() {
        $(".odtabs").not("#tab4").addClass('btn-outline-secondary');
        $("#tab4").addClass('btn-secondary');
    });
    </script>
@endsection