@extends('layouts.app')
@section('title', 'Invoices')
@section('content')
    <div class="container-fluid mt-5 pt-1">
        <div class="row pr-2 pl-2 pt-2 pb-0">
            <div class="col-lg-12 col-md-12 col-xl-12 col-sm-12">
                <h6>Settings - Invoices</h6>
                <div class="card">
                    <div class="card-body pt-0">
                        <table id="users_table" class="table table-bordered nowrap table-striped mb-0 mt-2"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th class="td_bgcolor">Unique ID</th>
                                    <th class="td_bgcolor">Lender</th>
                                    <th class="td_bgcolor">Loan Type</th>
                                    <th class="td_bgcolor">User Type</th>
                                    <th class="td_bgcolor">Cost</th>
                                    <th class="td_bgcolor">Allowed No of Parcels</th>
                                    <th class="td_bgcolor">Additional Parcel Cost</th>
                                    <th class="td_bgcolor">Allowed Loan Amount</th>
                                    <th class="td_bgcolor">Additional Loan Increase Cost</th>
                                    <th class="td_bgcolor">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (isset($ztpinvoices))
                                    @foreach ($ztpinvoices as $ztpinvoice)
                                        <tr>
                                            <td>{{ $ztpinvoice->id }}</td>
                                            <td>{{ $ztpinvoice->lender_info['lender_name'] }}</td>
                                            <td>{{ $ztpinvoice->loan_type_info['portfolio_type_name'] }}</td>
                                            <td>{{ $ztpinvoice->service_type_info['service_type_name'] }}</td>
                                            <td>{{ $ztpinvoice->cost }}</td>
                                            <td>{{ $ztpinvoice->allowed_no_of_parcels }}</td>
                                            <td>{{ $ztpinvoice->additional_parcelcost }}</td>
                                            <td>{{ $ztpinvoice->allowed_loanamount }}</td>
                                            <td>{{ $ztpinvoice->additional_loan_increasecost }}</td>
                                            <td><span><i class="fa fa-edit text-success"
                                                        onclick="edit_user({{ $ztpinvoice->id }})"
                                                        style="cursor:pointer;"></i></span></td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </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-bs-dismiss="modal" aria-label="Close"
                        style="border:none;background-color:#57B492;color:white;font-size:15px;">
                        <span aria-hidden="true">X</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-select" 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" id="lender_access_data">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Loan
                                        Type <span class="text-danger"> * </span></label>
                                    <select required class="form-select" name="loan_type" id="loan_type">
                                        <option value=""> Select Loan Type </option>
                                        @if (isset($ztploantypes))
                                            @foreach ($ztploantypes as $ztploantype)
                                                <option value="{{ $ztploantype->id }}">
                                                    {{ $ztploantype->portfolio_type_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <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;">Service Type <span class="text-danger"> * </span></label>
                                    <select required class="form-select" name="service_type" id="service_type">
                                        <option value=""> Select Service Type </option>
                                        @if (isset($ztpservicetypes))
                                            @foreach ($ztpservicetypes as $ztpservicetype)
                                                <option value="{{ $ztpservicetype->id }}">
                                                    {{ $ztpservicetype->service_type_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;">Cost
                                        <span class="text-danger"> * </span></label>
                                    <input required type="text" name="cost" id="cost" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter 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;">Allowed Number of Parcels <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="allowed_no_of_parcels" id="allowed_no_of_parcels"
                                        class="form-control" value="" autocomplete="off"
                                        placeholder="Enter Allowed Number of Parcels" data-parsley-type="digits">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label"
                                        style="font-size:14px;">Additional Parcel Cost <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="additional_parcelcost"
                                        id="additional_parcelcost" class="form-control" value=""
                                        autocomplete="off" placeholder="Enter Additional Parcel 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;">Allowed Loan Amount <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="allowed_loanamount" id="allowed_loanamount"
                                        class="form-control" value="" autocomplete="off"
                                        placeholder="Enter Allowed Loan Amount">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label"
                                        style="font-size:14px;">Additional Loan Increase Cost <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="additional_loan_increasecost"
                                        id="additional_loan_increasecost" class="form-control" value=""
                                        autocomplete="off" placeholder="Enter Additional Loan Increase Cost">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn" style="background:#57B492;color:white;"
                        form="add_invoice_form">
                        Submit </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-bs-dismiss="modal" aria-label="Close"
                        style="border:none;background-color:#57B492;color:white;font-size:15px;">
                        <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-select" 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" id="lender_access_data">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label"
                                        style="font-size:14px;">Loan
                                        Type <span class="text-danger"> * </span></label>
                                    <select required class="form-select" name="loan_type" id="loan_type1">
                                        <option value=""> Select Loan Type </option>
                                        @if (isset($ztploantypes))
                                            @foreach ($ztploantypes as $ztploantype)
                                                <option value="{{ $ztploantype->id }}">
                                                    {{ $ztploantype->portfolio_type_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <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;">Service Type <span class="text-danger"> * </span></label>
                                    <select required class="form-select" name="service_type" id="service_type1">
                                        <option value=""> Select Service Type </option>
                                        @if (isset($ztpservicetypes))
                                            @foreach ($ztpservicetypes as $ztpservicetype)
                                                <option value="{{ $ztpservicetype->id }}">
                                                    {{ $ztpservicetype->service_type_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;">Cost
                                        <span class="text-danger"> * </span></label>
                                    <input required type="text" name="cost" id="cost1" class="form-control"
                                        value="" autocomplete="off" placeholder="Enter 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;">Allowed Number of Parcels <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="allowed_no_of_parcels"
                                        id="allowed_no_of_parcels1" class="form-control" value=""
                                        autocomplete="off" placeholder="Enter Allowed Number of Parcels"
                                        data-parsley-type="digits">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label"
                                        style="font-size:14px;">Additional Parcel Cost <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="additional_parcelcost"
                                        id="additional_parcelcost1" class="form-control" value=""
                                        autocomplete="off" placeholder="Enter Additional Parcel 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;">Allowed Loan Amount <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="allowed_loanamount" id="allowed_loanamount1"
                                        class="form-control" value="" autocomplete="off"
                                        placeholder="Enter Allowed Loan Amount">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="example-firstname-input" class="col-form-label"
                                        style="font-size:14px;">Additional Loan Increase Cost <span class="text-danger"> *
                                        </span></label>
                                    <input required type="text" name="additional_loan_increasecost"
                                        id="additional_loan_increasecost1" class="form-control" value=""
                                        autocomplete="off" placeholder="Enter Additional Loan Increase Cost">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn" style="background:#57B492;color:white;"
                        form="pricing_update_form"> Update </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_css')
    <style>
        .dataTables_filter .form-control {
            padding: 8px !important;
            border-radius: 5px !important;
            height: 10px !important;
        }

        div.dt-buttons {
            float: right !important;
            margin-top: -1px;
            margin-left: 11px;
        }

        .form-control,
        .form-select {
            font-size: 13px !important;
            border-radius: 5px !important;
            height: auto;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            padding-right: 8px !important;
            padding-left: 8px !important;
        }

        .parsley-required,
        .parsley-custom-error-message {
            color: red;
            font-size: 12px;
            margin-top: 4px;
            list-style-type: none;
            margin-left: -25px;
        }

        .parsley-length,
        .parsley-type {
            color: red;
            font-size: 12px;
            margin-top: 4px;
            list-style-type: none;
            margin-left: -25px;
        }

        .modal-header {
            background: #57B492;
        }

        .modal-title {
            color: white;
        }

        .dataTables_length .form-select {
            width: 45% !important;
        }

        .form-switch.form-switch-sm .form-check-input {
            height: 1.25rem;
            width: calc(1.25rem + 1rem);
            border-radius: 2rem;
        }
    </style>
@endsection

@section('page_script')
    <script>
        $(document).ready(function() {
            $('#cost').change(function() {
                var value = parseFloat($('#cost').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#cost').val(parts.join("."));
            });

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

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

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

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

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

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

            $('#additional_loan_increasecost1').change(function() {
                var value = parseFloat($('#additional_loan_increasecost1').val()).toFixed(2);
                var parts = value.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $('#additional_loan_increasecost1').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('addPricing') }}",
                                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,
                                                timer: 2000
                                            });
                                            setTimeout(function() {
                                                location.href = location.href;
                                            }, 2000);
                                        } else {
                                            Swal.fire({
                                                position: 'middle',
                                                icon: result[1],
                                                title: result[2],
                                                showConfirmButton: false,
                                                timer: 2000
                                            });
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            });

            $('#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('updatePricing') }}",
                                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: 1000
                                            });
                                            setTimeout(function() {
                                                location.href = location.href;
                                            }, 1000);
                                        } else {
                                            Swal.fire({
                                                position: 'middle',
                                                icon: result[1],
                                                title: result[2],
                                                showConfirmButton: false,
                                                timer: 3000
                                            });
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            });
        });

        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(priceId) {
            $('#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: "/editPricing/" + priceId,
                dataType: "json",
                success: function(data) {
                    $('#pricing_id').val(data.result.id);
                    $('#lender_id1').val(data.result.lender_id);
                    $('#loan_type1').val(data.result.loan_type);
                    $('#service_type1').val(data.result.service_type);
                    $('#cost1').val(data.result.cost);
                    $('#allowed_no_of_parcels1').val(data.result.allowed_no_of_parcels);
                    $('#additional_parcelcost1').val(data.result.additional_parcelcost);
                    $('#allowed_loanamount1').val(data.result.allowed_loanamount);
                    $('#additional_loan_increasecost1').val(data.result.additional_loan_increasecost);
                }
            })
        }
    </script>
@endsection