@extends('layouts.app')
@section('content')

<style>
    .tb_around {
        border: 1px solid #000;
    }

    .tb_bottom td {
        border-bottom: 1px solid #000;
    }

    .tb_pad {
        padding: 10px 5px 10px 20px;
        line-height: 22px;
    }

    .tb_pad2 {
        padding: 10px 5px 10px 5px
    }

    .tb_pad3 {
        padding: 50px 5px 10px 5px
    }

    .hover-edit {
        position: relative;
        display: inline-block;
    }

    /* .hover-edit input,
    .hover-edit select {
        display: none;
        font-size: 16px;
        padding: 2px;
        width: 120px;
    }

    .hover-edit span {
        display: inline-block;
    }

    .hover-edit:hover span {
        display: none;
    }

    .hover-edit:hover input,
    .hover-edit:hover select {
        display: inline-block;
    } */

    .container {
        max-width: 800px;
        margin: auto;
        padding: 20px;
        background: #fff;
    }

    @media (max-width: 768px) {
        .container {
            padding: 15px;
        }
    }

    @media (max-width: 480px) {
        body {
            font-size: 14px;
        }

        .container {
            padding: 10px;
        }
    }

    button#generateInvoiceBtn {
        background-color: #3c8dbc;
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-align: center;
        font-size: 14px;
        border: none;
        float: right;
        margin-right: 22px;
    }

    .editable-display:hover {
        background-color: #ffff99;
        cursor: pointer;
    }

    .highlight {
        border: 1px dashed #3c8dbc;
        padding: 4px 6px;
        border-radius: 6px;
        display: inline-block;
        min-width: 50px;
    }

    .page-box-shadow {
        max-width: 850px;
        margin: 40px auto;
        padding: 40px;
        background-color: #fff;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        border: 1px solid #ccc;
    }

    .signature-box-style {
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .combined-box {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #fdfdfd;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .fingerprint-box,
    .barcode-box {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        height: 100%;
    }

    .barcode {
        height: 40px;
        background-color: #000;
        width: 100%;
        border-radius: 3px;
        margin-top: 10px;
    }
    .highlight-error {
        border: 1px solid #dc3545 !important; /* Bootstrap red */
        background: #fff0f0;
    }
    .mb-2 {
        margin-bottom: 0.5rem !important;
    }
    .text-right {
        text-align: right !important;
    }
    .mr-2 {
        margin-right: 0.5rem !important;
    }
</style>
<section class="content top-head">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary border-no">
                <div class="box-header with-border blue-back">
                    <h3 class="box-title">{{ __('Lease Verification') }}</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="property_email">{{ __('Send Lease Email') }}</label>
                                    <span class="val-in">*</span>
                                    <input id="property_email" type="email" class="form-control" name="property_email" value="{{ $property->prop_invoice_email ?? $property->prop_email ?? '' }}" placeholder="Enter Email" autofocus>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="agent_email">{{ __('Agent Email') }}</label>
                                    <span class="val-in">*</span>
                                    <input id="agent_email" type="email" class="form-control" name="agent_email" value="{{ $agentInfo->email ?? '' }}" placeholder="Enter Email" autofocus>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="content top-head page-box-shadow">
    <div class="row">
        <div class="col-xs-12">
            <form method="POST">
                <input type="hidden" id="le_ids" value="{{ $leadclient->id }}">

                <table width="100%" cellpadding="2" cellspacing="0">
                    @if($team != '')
                    <tr>
                        <td style="font-size: 35px;font-weight: bold;text-align: center;">
                            {{ $team->name }} <br>
                            <span style="font-size:10px; font-weight: 500;">
                                @if(!empty($company)) Brokered By: {{ $company->mgmt_name }} @endif
                            </span>
                        </td>
                    </tr>
                    @else
                    <tr>
                        <td style="font-size: 35px;font-weight: bold;text-align: center;">
                            @if(!empty($company)){{ $company->mgmt_name }} @endif
                        </td>
                    </tr>
                    @endif

                    <tr>
                        <td style="line-height:22px"><br />
                            <div class="row mb-2">
                                <label class="col-sm-2 col-form-label">Agent Name:</label>
                                <div class="col-sm-10">
                                    <span>{{ $agentInfo->name . ' ' . $agentInfo->last_name }}</span>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label class="col-sm-2 col-form-label">Agent Contact:</label>
                                <div class="col-sm-10">
                                    <span>{{ serformatephone($agentInfo->phone) }}</span>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label class="col-sm-2 col-form-label">Agent Fax:</label>
                                <div class="col-sm-10">
                                    <span>{{ serformatephone($agentInfo->fax) }}</span>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label class="col-sm-2 col-form-label">Agent Email:</label>
                                <div class="col-sm-10">
                                    <span>{{ $agentInfo->email }}</span>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td style="font-size: 18px;font-weight: bold;text-align: center;"><br />
                            Lease Verification - NOT AN INVOICE <br />
                        </td>
                    </tr>

                    <tr>
                        <td class="mb-2" style="font-size:12px"><br />
                            Authorized Representative:<br />
                            Please verify the following lease information for the client we have referred to you. Thank you so much for taking great care of my client! <br />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <table width="100%" cellpadding="2" cellspacing="0" class="tb_around" style="font-size:16px">
                                <tr class="tb_bottom">
                                    <td class="tb_pad" colspan="3">
                                        <div class="row mb-2">
                                            <label class="col-sm-3 col-form-label">Property Name:</label>
                                            <div class="col-sm-9">
                                                <span>{{ $property->prop_name ?? '' }}</span>
                                            </div>
                                        </div>
                                        <div class="row mb-2">
                                            <label class="col-sm-3 col-form-label">Property Phone:</label>
                                            <div class="col-sm-9">
                                                <span>{{ isset($property->prop_phone) ? serformatephone($property->prop_phone) : '' }}</span>
                                            </div>
                                        </div>
                                        <div class="row mb-2">
                                            <label class="col-sm-3 col-form-label">Property Fax:</label>
                                            <div class="col-sm-9">
                                                <span>{{ isset($property->prop_fax) ? serformatephone($property->prop_fax) : '' }}</span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr class="tb_bottom">
                                    <td class="tb_pad" colspan="2" style="width:50%">
                                        <div class="row mb-2">
                                            <label class="col-sm-5 col-form-label">Client Name:</label>
                                            <div class="col-sm-7">
                                                <span>{{ ucfirst($leadclient->fname) }} {{ ucfirst($leadclient->lname) }}</span>
                                                <input type="hidden" name="client_name" value="{{ ucfirst($leadclient->fname) }} {{ ucfirst($leadclient->lname) }}">
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <label class="col-sm-5 col-form-label">Apartment #:</label>
                                            <div class="col-sm-7">
                                                <input type="text" name="apt_unit" value="{{ $leadclient->apt_unit }}" class="form-control" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <label class="col-sm-5 col-form-label">Length of Lease:</label>
                                            <div class="col-sm-7 d-flex align-items-center">
                                                <input type="text" name="lease_term" value="{{ $leadclient->lease_term }}" class="form-control mr-2" readonly>
                                                <span class="ms-2">months</span>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <label class="col-sm-5 col-form-label">Lease Start Date:</label>
                                            <div class="col-sm-7">
                                                <input type="date" name="start_date" value="{{ $leadclient->start_date }}" class="form-control" readonly>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="tb_pad2" style="width:50%;vertical-align: top;">
                                        <div class="row mb-2 align-items-center">
                                            <label class="col-sm-5 col-form-label text-right">Registration #/PO #:</label>
                                            <div class="col-sm-7">
                                                @if($leadclient->reg_po != '')
                                                    <input type="text" id="reg_po" name="reg_po" value="{{ $leadclient->reg_po }}" class="form-control" readonly>
                                                @else
                                                    <select name="reg_po" id="reg_po" style="width: 120px;" class="form-control">
                                                        <option value="">Please select</option>
                                                        <option value="yes">Yes</option>
                                                        <option value="no">No</option>
                                                    </select>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="tb_pad" colspan="2">
                                        <div class="row mb-2 align-items-center">
                                            <label class="col-sm-5 col-form-label">Net Effective Rent Amount:</label>
                                            <div class="col-sm-7">
                                                <input type="text" name="rent_amount" value="{{ $leadclient->rent_amount }}" class="form-control" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-2 align-items-center">
                                            <label class="col-sm-5 col-form-label">Commission:</label>
                                            <div class="col-sm-4">
                                                <input type="text" name="commision" value="{{ $leadclient->commision }}" class="form-control" readonly>
                                            </div>
                                            <div class="col-sm-3">
                                                <input type="text" name="commision_unit" value="{{ $leadclient->commision_unit }}" class="form-control" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-2 align-items-center">
                                            <label class="col-sm-5 col-form-label">Total:</label>
                                            <div class="col-sm-7">
                                                <input type="text" name="total" value="{{ $total }}" class="form-control" readonly>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="tb_pad2" style="vertical-align: top;">
                                        <div class="row mb-2 align-items-center">
                                            <label class="col-sm-5 col-form-label text-right">Bonus:</label>
                                            <div class="col-sm-7">
                                                <input type="text" name="bonus" value="{{ $leadclient->bonus }}" class="form-control" readonly>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td style="font-size:12px"><br />
                            By signing below the property agrees to the following:<br />
                            1. "@if(!empty($company)){{ $company->mgmt_name }} @endif" and/or {{ $agentInfo->name.' '. $agentInfo->last_name }} was listed on the guest card and application.<br />
                            2. The information above is correct, and a commission will be earned upon client move in.<br />
                            3. To sign this document electronically.
                        </td>
                    </tr>

                    <!-- <tr>
                        <td style="text-align: center;"><br><strong>Scan and email back to {{ $clientdetail->email }}, OR</strong></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><br><strong>Please fax back to {{ $clientdetail->fax }}</strong></td>
                    </tr> -->
                </table>

                <br><br>
                <span id="leaseLoader" style="display: none;margin-top:5px;float:right;"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i></span>
                <button type="button" id="generateInvoiceBtn">Generate Email</button>
            </form>


           
        </div>
    </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.ckeditor.com/4.20.2/standard/ckeditor.js"></script>
<script src="{{ asset('js/leadclient.js') }}"></script>

<script>

    $(document).ready(function() {
        $('select[name="reg_po"], input[name="reg_po"]').on('change input', function() {
            $(this).removeClass('highlight-error');
        });
        $('#property_email').on('input', function() {
            $(this).removeClass('highlight-error');
        });

        $(document).on('click',"#generateInvoiceBtn",function () {
            let property_email = $('#property_email').val().trim();
            let agent_email = $('#agent_email').val().trim();

            // Validate property_email
            if (!isValidEmail(property_email)) {
                swal("Info", "Please enter a valid property email address (must end with .com, no mailto:).", "info");
                $('#property_email').addClass('highlight-error');
                $('#generateInvoiceBtn').prop('disabled', false);
                $('#leaseLoader').hide();
                return false;
            }
            // Validate agent_email
            if (!isValidEmail(agent_email)) {
                swal("Info", "Please enter a valid agent email address (must end with .com, no mailto:).", "info");
                $('#agent_email').addClass('highlight-error');
                $('#generateInvoiceBtn').prop('disabled', false);
                $('#leaseLoader').hide();
                return false;
            }

            $('#generateInvoiceBtn').prop('disabled', true);
            $('#leaseLoader').show();
            let id = $("#le_ids").val();
            $.ajaxSetup({
                headers: {
                    "X-XSRF-Token": $('meta[name="_token"]').attr("content"),
                },
            });

            var apt_unit = $('input[name="apt_unit"]').val();
            var lease_term = $('input[name="lease_term"]').val();
            var start_date = $('input[name="start_date"]').val();
            
            // Handle reg_po based on whether it's an input or select
            var reg_po;
            if($('input[name="reg_po"]').length > 0) {
                // If it's an input (apt_reg_po has value), get the input value
                reg_po = $('input[name="reg_po"]').val();
            } else {
                // If it's a select (apt_reg_po is empty), get the selected option text
                reg_po = $('select[name="reg_po"] option:selected').text();
            }
            
            var rent_amount = $('input[name="rent_amount"]').val();
            var commision = $('input[name="commision"]').val();
            var commision_unit = $('input[name="commision_unit"]').val();
            var bonus = $('input[name="bonus"]').val();
            var total = $('input[name="total"]').val();
            var agent_username = "{{ $agentInfo->email }}";
            // var property_email = $('#property_email').val();

            // Validate reg_po - only validate if it's a dropdown
            if($('select[name="reg_po"]').length > 0 && (reg_po == '' || reg_po == 'Please select')) {
                swal("Info", "Please select the Registration PO option.", "info");
                $('select[name="reg_po"]').addClass('highlight-error');
                $('#generateInvoiceBtn').prop('disabled', false);
                $('#leaseLoader').hide();
                return false;
            }

            // Validate property_email
            if(property_email == '') {
                swal("Info", "Please enter the property email address.", "info");
                $('#property_email').addClass('highlight-error');
                $('#generateInvoiceBtn').prop('disabled', false);
                $('#leaseLoader').hide();
                return false;
            }

            // Collect missing or invalid fields
            let missingFields = [];
            if (!apt_unit) missingFields.push("Apartment Unit");
            if (!lease_term) missingFields.push("Lease Term");
            if (!start_date) missingFields.push("Start Date");
            // Only check for dropdown validation if it's a select element
            if ($('select[name="reg_po"]').length > 0 && reg_po == 'Yes') missingFields.push("Registration PO");
            if (!rent_amount || rent_amount == 0) missingFields.push("Rent Amount");
            if (!commision || commision == 0) missingFields.push("Commission");
            if (!commision_unit) missingFields.push("Commission Unit");
            if (!total || total == 0) missingFields.push("Total");

            let infoMsg = "";
            if (missingFields.length > 0) {
                infoMsg = `To Be Completed –

                        ${missingFields.join('\n')}

                        Since the above fields need to be completed, you will receive a signature request in your ${agent_username} inbox after the property has completed their signature.`;
            }

            // Check if we need to show the confirmation dialog (only for dropdown case)
            var needsConfirmation = false;
            if ($('select[name="reg_po"]').length > 0) {
                needsConfirmation = (apt_unit == '' || lease_term == '' || start_date == '' || reg_po == 'Yes' || rent_amount == '' || commision == '' || commision_unit == '' || total == '');
            } else {
                needsConfirmation = (apt_unit == '' || lease_term == '' || start_date == '' || rent_amount == '' || commision == '' || commision_unit == '' || total == '');
            }

            if(needsConfirmation) {
                swal({
                    title: "Info",
                    text: infoMsg,
                    type: "info",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'OK',
                    cancelButtonText: "Cancel",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function(isConfirm){
                    if(isConfirm){
                        let formData = {
                            _token: $('meta[name="csrf-token"]').attr("content"),
                            client_name: $('input[name="client_name"]').val(),
                            apt_unit: $('input[name="apt_unit"]').val(),
                            lease_term: $('input[name="lease_term"]').val(),
                            start_date: $('input[name="start_date"]').val(),
                            moved_in: $('select[name="moved_in"]').val(),
                            reg_po: reg_po,
                            rent_amount: $('input[name="rent_amount"]').val(),
                            commision: $('input[name="commision"]').val(),
                            commision_unit: $('input[name="commision_unit"]').val(),
                            bonus: $('input[name="bonus"]').val(),
                            total: $('input[name="total"]').val(),
                            property_email: property_email,
                        };

                        $.ajax({
                            url: "{{ route('invoice.generate', ['invoiceId' => '__ID__']) }}".replace('__ID__', id),
                            type: "POST",
                            data: formData,
                            success: function (response) {
                                if (response.success) {
                                    swal({
                                        title: "Success",
                                        text: "A lease verification signature request has been sent to the property and is awaiting their response.",
                                        type: "info",
                                        showCancelButton: false,
                                        confirmButtonColor: '#DD6B55',
                                        confirmButtonText: 'OK',
                                        closeOnConfirm: true
                                    }, function() {
                                        window.close();
                                    });
                                } else {
                                    $('#generateInvoiceBtn').prop('disabled', false);
                                    $('#leaseLoader').hide();
                                    swal({
                                        title: "Error",
                                        text: response.message ? response.message : "Error occurred while saving.",
                                        type: "error",
                                        confirmButtonText: 'OK',
                                        closeOnConfirm: true
                                    });
                                }
                            },
                            error: function (err) {
                                $('#generateInvoiceBtn').prop('disabled', false);
                                $('#leaseLoader').hide();
                                swal({
                                    title: "Error",
                                    text: "Something went wrong!",
                                    type: "error",
                                    confirmButtonText: 'OK',
                                    closeOnConfirm: true
                                });
                            },
                        });
                    } else {
                        $('#generateInvoiceBtn').prop('disabled', false);
                        $('#leaseLoader').hide();
                    }
                    // If not confirmed, do nothing
                });
            } else {

                let formData = {
                    _token: $('meta[name="csrf-token"]').attr("content"), // ✅ CSRF Token here
                    client_name: $('input[name="client_name"]').val(),
                    apt_unit: $('input[name="apt_unit"]').val(),
                    lease_term: $('input[name="lease_term"]').val(),
                    start_date: $('input[name="start_date"]').val(),
                    moved_in: $('select[name="moved_in"]').val(),
                    reg_po: reg_po,
                    rent_amount: $('input[name="rent_amount"]').val(),
                    commision: $('input[name="commision"]').val(),
                    commision_unit: $('input[name="commision_unit"]').val(),
                    bonus: $('input[name="bonus"]').val(),
                    total: $('input[name="total"]').val(),
                    property_email: property_email,
                };
                $.ajax({
                    url: "{{ route('invoice.generate', ['invoiceId' => '__ID__']) }}".replace('__ID__', id),
                    type: "POST",
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            swal({
                                title: "Success",
                                text: "A lease verification signature request has been sent to the property and is awaiting their response.",
                                type: "info",
                                showCancelButton: false,
                                confirmButtonColor: '#DD6B55',
                                confirmButtonText: 'OK',
                                closeOnConfirm: true
                            }, function() {
                                window.close();
                            });
                        } else {
                            $('#generateInvoiceBtn').prop('disabled', false);
                            $('#leaseLoader').hide();
                            swal({
                                title: "Error",
                                text: response.message ? response.message : "Error occurred while saving.",
                                type: "error",
                                confirmButtonText: 'OK',
                                closeOnConfirm: true
                            });
                        }
                    },
                    error: function (err) {
                        $('#generateInvoiceBtn').prop('disabled', false);
                        $('#leaseLoader').hide();
                        swal({
                            title: "Error",
                            text: "Something went wrong!",
                            type: "error",
                            confirmButtonText: 'OK',
                            closeOnConfirm: true
                        });
                    },
                });
            }

        });

        function isValidEmail(email) {
            // Basic email regex, no mailto, ends with valid TLD
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email.toLowerCase().startsWith('mailto:')) return false;
            if (email.match(/,[cC][oO][mM]$/)) return false; // ends with ,com
            if (!emailPattern.test(email)) return false;
            // Check if email ends with valid TLD (.com, .net, .org, .co, etc.)
            const validTldPattern = /\.[a-z]{2,6}$/i;
            if (!validTldPattern.test(email.toLowerCase())) return false;
            return true;
        }
    });

</script>

@endsection