@extends('layouts.app')


@section('title', 'Add Pre Listing')

{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/property-pre-listing.css') }}">

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
@endpush

{{-- page connect --}}
@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-messages />

    <x-row-card>

        <x-slot:title>
            <h4 class="card-title">Edit Pre listing</h4>
        </x-slot:title>

        <x-form id="edit-properties-pre-listing-form">

            {{-- {{ dd($address['has_parcel'], $address['additional_buildings_structures']) }} --}}

            @method('PUT')
            {{-- {{ dd(!empty($document)) }} --}}
            <input type="hidden" name="id" value="{{ $preListing['id'] }}">

            {{-- {{ dd($preListing) }} --}}
            <!-- property summary  -->
            @include('layouts.includes.particles.property.pre-listing.edit.property_summary')

            <!-- property information  -->
            @include('layouts.includes.particles.property.pre-listing.edit.property_information')

            <!-- Address Information Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.address-information')

            <!-- Assignment -->
            @include('layouts.includes.particles.property.pre-listing.edit.assignment-information')

            <!-- Agricultural Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.agricultural')

            <!-- Property Information Start (Basic Property Information for Residential Property) -->
            @include('layouts.includes.particles.property.pre-listing.edit.basic_property_information_for_residential_property')


            <!-- Basic Property Information for Commercial -->
            @include('layouts.includes.particles.property.pre-listing.edit.basic_property_for_commercial')

            <!-- Property Details for Retail and Office in Commercial -->
            @include('layouts.includes.particles.property.pre-listing.edit.property_details_for_retail_office_in_commercial')

            <!-- Property Information for Apartment, Retail, Door, and Office -->
            @include('layouts.includes.particles.property.pre-listing.edit.property_information_office_retail_appartment')

            <!-- Property Information for Multifamily Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.basic_property_information_for_multifamily_property')

            <!-- Basic Information for Land for Commercial and Residential -->
            @include('layouts.includes.particles.property.pre-listing.edit.basic_information_for_land_commercial_and_commercial')

            <!-- Apartment Information Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.appartment-information-for-multi-family')

            <!-- Townhouse & Condo Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.townhouse')

            <!-- Property Details Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.property_details_for_residential_property')

            <!-- Property Condition -->
            @include('layouts.includes.particles.property.pre-listing.edit.property_condition')

            <!-- Zoning & Waste End -->
            @include('layouts.includes.particles.property.pre-listing.edit.zoning')

            <!-- Pricing, Status Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.pricing_status_comps')

            <!-- Environmental -->
            @include('layouts.includes.particles.property.pre-listing.edit.environmental')

            <!-- Utilities & Waste Start -->
            @include('layouts.includes.particles.property.pre-listing.edit.utilities')

            <!-- Parcels -->
            @include('layouts.includes.particles.property.pre-listing.edit.parcels')

            <!-- Multiple Building -->
            @include('layouts.includes.particles.property.pre-listing.edit.multiple_buildings')

            <!-- Other Structure -->
            @include('layouts.includes.particles.property.pre-listing.edit.other_structure')

            <!-- Rent -->
            @include('layouts.includes.particles.property.pre-listing.edit.rent')

            <!-- Documents -->

            @include('layouts.includes.particles.property.pre-listing.edit.documents')

            @include('layouts.includes.particles.property.pre-listing.workflow_task_buttons')

            <div class="mt-4 text-end">
                <button type="submit" class="btn btn-primary submit btn-sm">Save & Exit</button>
                <button type="" class="btn btn-primary submit btn-sm">Save</button>
                <button type="button" class="btn btn-primary  btn-sm" id="exit_preListing">Exit</button>

            </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')

<script>

preListingIndexRoute = @json(route('pre-listings.index'));
</script>
<script src="{{ asset('assets/js/custom/property/pre-listing/pre-listing.js') }}"></script>
<script src="{{ asset('assets/js/custom/property/pre-listing/edit-form.js') }}"></script>


 {{-- script for Exit button  --}}
 <script>
    $("#exit_preListing").click(function() {
        window.location.href = preListingIndexRoute;
    });
</script>

<script>
    $(document).ready(function(){

            var $form = $('form[id="edit-properties-pre-listing-form"]');
            var $submitButton = $form.find('button[type="submit"]');

            // prevent the form to not submit on enter pressing
            $form.on('keypress', function(e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                }
            });

            $form.validate({
                rules: {
                    transaction_type: {
                    required: true,
                    },
                    property_type: {
                        required: true,
                    },
                    property_sub_type: {
                        required: true,
                    },
                    f_name: {
                        required: true,
                        minlength: 2
                    },
                    l_name: {
                        required: true,
                        minlength: 2
                    },
                    lead_source: {
                        required: true,
                    },
            },
            messages: {
                transaction_type: {
                    required: "Please select transaction type",
                },
                property_type: {
                    required: "Please select property type",
                },
                property_sub_type: {
                    required: "Please select property sub type",
                },
                f_name: {
                    required: "Please enter your first name",
                    minlength: "First name must be at least 2 characters long"
                },
                l_name: {
                    required: "Please enter your last name",
                    minlength: "Last name must be at least 2 characters long"
                },
                lead_source: {
                    required: "Please select lead source",
                },
            },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.after(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid').removeClass('is-valid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                },
                errorClass: 'text-danger',
                submitHandler: function (form) {

                    var formData = new FormData(form);
                    var $form = $("#edit-properties-pre-listing-form");
                    var $submitButton = $form.find('.submit');

                    $.ajax({
                        url: "{{ route('pre-listings.update',['pre_listing' => $preListing['id']]) }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function () {
                            $form.css('opacity', '0.5');
                            $submitButton.data('original-text', $submitButton.text());
                            $submitButton.text('Processing...');
                            $form.find('.text-danger').remove();
                        }
                    })
                    .done(function (response) {

                        console.log(response);
                        console.log(response.success);
                        console.log(response.server);

                         // server side error handel
                         if (response.success === false && response.server === true) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Server Error',
                            text: response.message,
                            showConfirmButton: true,
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            }
                        });
                    }

                    // success and validation error handle
                if (response.success === true && response.server === false) {

                    console.log('success response');

                    // Show success message and hide modal
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        showConfirmButton: true
                    }).then(() => {
                        window.location.href = "{{ route('pre-listings.index') }}";
                    });

                } else {

                    console.log('validation error');
                    $.each(response.errors, function (key, messages) {
                        let fieldName, $inputField;

                        // handle the array inputs errors. that input we sent in array formate
                        if (key.includes('.')) {
                            fieldName = key.replace(/\.\d+/g, '[]');
                            $inputField = $form.find('[name="' + fieldName + '"]');
                        } else {
                            // Handle simple inputs
                            fieldName = key;
                            $inputField = $form.find('[name="' + fieldName + '"]');
                        }


                        if ($inputField.length) {
                            $inputField.next('.text-danger').remove();
                            $inputField.closest('.form-control').addClass('is-invalid');
                            $.each(messages, function (index, message) {
                                $inputField.after('<div class="text-danger">' + message + '</div>');
                            });
                        } else {
                            console.warn('Input field not found for key:', key);
                        }
                    });
                }
            })
            .fail(function (xhr) {
                // Handle AJAX error
                console.error('An error occurred:', xhr);
            })
                    .always(function () {
                        $form.css('opacity', '1');
                        $submitButton.text($submitButton.data('original-text'));
                    });
                }
            });
        });
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<script>
    Dropzone.options.myDropzone = {
            paramName: "file",
            maxFilesize: 5,
            acceptedFiles: ".jpg,.jpeg,.png,.gif",
            addRemoveLinks: true,
            dictDefaultMessage: "Drop files here or click to upload",
            init: function() {
                this.on("addedfile",
                    function(file) {
                        // File added callback
                    });
                this.on("success", function(
                    file, response
                ) {});
            }
        };
</script>

{{-- script for phone number --}}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const phoneInput = document.getElementById("phone");

        phoneInput.addEventListener("input", function(e) {
            let value = phoneInput.value.replace(/\D/g, ''); // Remove all non-digit characters

            if (value.length > 15) {
                value = value.slice(0, 15); // Limit the length to 15 digits
            }

            let formattedValue = "";

            if (value.length > 0) {
                formattedValue += '+' + value.substring(0, 2);
            }
            if (value.length > 2) {
                formattedValue += ' ' + value.substring(2, 5);
            }
            if (value.length > 5) {
                formattedValue += '-' + value.substring(5, 8);
            }
            if (value.length > 8) {
                formattedValue += '-' + value.substring(8, 12);
            }

            phoneInput.value = formattedValue;
        });

        if(document.getElementById("phoneForm")){

        document.getElementById("phoneForm").addEventListener("submit", function(event) {
            const pattern = /^\+\d{3} \d{3}-\d{3}-\d{4}$/;
            if (!pattern.test(phoneInput.value)) {
                alert("Please enter a valid phone number in the format +CCC ###-###-####.");
                event.preventDefault();
            }
        });
    }
    });
</script>

{{-- script for additional phone nubmer --}}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const phoneInput = document.getElementById("additional_phone");

        phoneInput.addEventListener("input", function(e) {
            let value = phoneInput.value.replace(/\D/g, ''); // Remove all non-digit characters

            if (value.length > 15) {
                value = value.slice(0, 15); // Limit the length to 15 digits
            }

            let formattedValue = "";

            if (value.length > 0) {
                formattedValue += '+' + value.substring(0, 2);
            }
            if (value.length > 2) {
                formattedValue += ' ' + value.substring(2, 5);
            }
            if (value.length > 5) {
                formattedValue += '-' + value.substring(5, 8);
            }
            if (value.length > 8) {
                formattedValue += '-' + value.substring(8, 12);
            }

            phoneInput.value = formattedValue;
        });

        if(  document.getElementById("phoneForm")){
        document.getElementById("phoneForm").addEventListener("submit", function(event) {
            const pattern = /^\+\d{3} \d{3}-\d{3}-\d{4}$/;
            if (!pattern.test(phoneInput.value)) {
                alert("Please enter a valid phone number in the format +CCC ###-###-####.");
                event.preventDefault();
            }
        });
    }
    });
</script>
@endpush