@extends('layouts.app')

@section('title')
    @switch($type)
        @case('commercial')
            Edit Commercial Listing
        @break

        @case('residential')
            Edit Residential Listing
        @break

        @case('agriculture')
            Edit Agriculture Listing
        @break

        @default
            Edit Property Listing
    @endswitch
@endsection

{{-- custom css --}}
@push('css')
    <style>
        .select2-container--default .select2-selection--multiple {
            background-color: white;
            border: 1px solid #aaa;
            border-radius: 4px;
            cursor: text;
            padding-bottom: 5px;
            padding-right: 5px;
            position: relative;
            border-radius: 0.625rem;
            background: #fff;
            border: 1px solid #E6E6E6;
            color: #6e6e6e;
        }

        @keyframes blink {
            0% {
                background-color: transparent;
            }

            50% {
                background-color: #dcf4e9;
            }

            75% {
                background-color: #dcf4e9;
            }

            100% {
                background-color: transparent;
            }
        }

        /* Apply the animation to the new row */
        .new-row {
            animation: blink 2s ease-out;
            border-radius: 10px;
            /* padding: 10px 0px; */
        }
    </style>
@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 {{ $type == 'commercial' ? 'Commercail' : 'Residential' }} listing</h4>
            </x-slot:title>

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


                @method('PUT')

                <x-text-input type="hidden" name="id" value="{{ $listing['id'] }}" />
                <x-text-input type="hidden" name="property_type" value="{{ $type }}" />


                <!-- post to LMS  -->
                <div class="row ">
                    <div class="row">
                        <div class="mb-3 col-md-3">
                            <x-input-label for="post-to-lms" required="true" :value="__('Posted On MLS')" />
                            <select class="multi-select form-control form-control-sm select2-hidden-accessible wide"
                                multiple name="post_to_mls[]" id="post-to-lms" tabindex="-1" aria-hidden="true"
                                data-select2-id="select2-data-post-lms">
                                <option value="mls_1" @if (in_array('mls_1', json_decode($listing['post_to_mls']))) selected @endif>MLS 1</option>
                                <option value="mls_2" @if (in_array('mls_2', json_decode($listing['post_to_mls']))) selected @endif>MLS 2</option>
                                <option value="mls_3" @if (in_array('mls_3', json_decode($listing['post_to_mls']))) selected @endif>MLS 3</option>
                            </select>
                        </div>


                        <div class="mb-3 col-md-4">
                            <x-input-label for="Properties" required="true" :value="__('Properties')" />
                            <select class="form-control form-control-sm select2-hidden-accessible" name="property_id"
                                tabindex="-1" aria-hidden="true" id="property">
                                @forelse ($properties as $property)
                                    <option value="{{ $property['id'] }}" @selected($property['id'] == $listing['property_id'])>
                                        {{ $property['addresses'][0]['street'] }} {{ $property['addresses'][0]['city'] }}
                                        {{ $property['addresses'][0]['state'] }} {{ $property['addresses'][0]['zip_code'] }}
                                    </option>
                                @empty
                                    <option>Property Not Found</option>
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="setup_sky_slope" value="true"
                                    @checked(old('setup_sky_slope', $listing['setup_sky_slope'] ?? '')) />
                                <x-input-label type="checkbox" for="setup_sky_slope_digi_sign_dot_loop" :value="__('Setup sky-slope, Digi-sign, Dot loop')" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="create_file_sky_slope"
                                    value="true" @checked(old('create_file_sky_slope', $listing['create_file_sky_slope'] ?? '')) />
                                <x-input-label type="checkbox" for="create_file_on_sky_slope_digi_sign_dot_loop"
                                    :value="__('Create file on sky-slope, Digi-sign, Dot loop')" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="get_listing_agreement_signed"
                                    id="marketing-photo-taken" value="true" @checked(old('get_listing_agreement_signed', $listing['get_listing_agreement_signed'] ?? '')) />
                                <x-input-label type="checkbox" for="get_listing_agreement_sign" :value="__('Get listing agreement Sign')" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="sellers_office_document"
                                    id="marketing-photo-taken" value="true" @checked(old('sellers_office_document', $listing['sellers_office_document'] ?? '')) />
                                <x-input-label type="checkbox" for="sellers_office_document" :value="__('Seller\'s office document')" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Place Lock Box section  -->
                <div class="row mt-2">
                    <h5 class="text-primary"> Place Lock Box</h5>
                    <div class="col-md-3">
                        <label class="form-label">Lock Box</label>
                        <select id="lock-box-select" class="form-control form-control-sm" name="lock_box">
                            <option value="" @selected($listing['lock_box'] === null || $listing['lock_box'] === '')>Select
                                Lock Box</option>
                            <option value="lock-box-1" @selected($listing['lock_box'] === 'lock-box-1')>Lock Box 1</option>
                            <option value="lock-box-2" @selected($listing['lock_box'] === 'lock-box-2')>Lock Box 2</option>
                            <option value="lock-box-3" @selected($listing['lock_box'] === 'lock-box-3')>Lock Box 3</option>
                        </select>
                    </div>


                    <!-- hide and show depend on lock box option  -->
                    <div class="col-md-9" id="lock-box-details"
                        style=" {{ isset($listing['lock_box']) && !empty($listing['lock_box']) ? '' : 'display: none;' }} ">
                        <div class="row">
                            <div class="col-md-4">
                                <label class="form-label">Placement</label>
                                <input type="text" name="placement" id="" class="form-control form-control-sm"
                                    placeholder="front door, back door etc"
                                    value="{{ old('placement', $listing['placement'] ?? '') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Type</label>
                                <p>Portable</p>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Password</label>
                                <p>2345</p>
                            </div>

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



                <!-- marketing section  -->
                <div class="row  mt-3">
                    <h5 class="text-primary"> Marketing</h5>

                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="photo_taken"
                                    id="marketing-photo-taken" value="1" @checked(old('photo_taken', $listing['photo_taken'] ?? false)) />
                                <x-input-label type="checkbox" for="residential-marketing-photo-taken"
                                    :value="__('Photo Taken')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="video_made" id="video-made"
                                    value="1" @checked(old('video_made', $listing['video_made'] ?? false)) />
                                <x-input-label type="checkbox" for="video-made" :value="__('Video has been made')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="poster_made" id="poster-made"
                                    value="1" @checked(old('poster_made', $listing['poster_made'] ?? false)) />
                                <x-input-label type="checkbox" for="poster-made" :value="__('Poster Made')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="get_listing_agreement_sign"
                                    id="get-listing-agreement-sign" value="1" @checked(old('get_listing_agreement_sign', $listing['get_listing_agreement_sign'] ?? false)) />
                                <x-input-label type="checkbox" for="get-listing-agreement-sign" :value="__('Listing Agreement Signed')" />
                            </div>
                        </div>
                    </div>



                    <div class="row mb-3" id="marketing-photo-taken-section"
                        style="{{ isset($listing['photo_taken']) && $listing['photo_taken'] === 1 ?: 'display: none;' }}">
                        <div class="col-md-3">
                            <x-input-label for="name" :value="__('Name')" />
                            <x-text-input name="name" :value="old('name', $listing['listing_name'] ?? '')" />
                        </div>
                        <div class="col-md-3">
                            <x-input-label for="email" :value="__('Email')" />
                            <x-text-input name="email" :value="old('email', $listing['listing_email'] ?? '')" />
                        </div>
                        <div class="col-md-3">
                            <x-input-label for="phone" :value="__('Phone')" />
                            <x-text-input name="phone" :value="old('phone', $listing['listing_phone'] ?? '')" />
                        </div>
                    </div>

                    {{-- {{ dd(in_array('Twitter', json_decode($listing['listing_post_photo_on'] ?? '[]', true) ?? [])) }} --}}

                    <div class="row">
                        <p> Post Photo On</p>
                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_photo_on[]"
                                    id="post_to_facebook" value="Facebook" @checked(in_array('Facebook', json_decode($listing['listing_post_photo_on'] ?? '[]', true) ?? []) == 'true') />
                                <x-input-label for="post_to_facebook" :value="__('Facebook')" />
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_photo_on[]"
                                    id="post_to_twitter" value="Twitter" @checked(in_array('Twitter', json_decode($listing['listing_post_photo_on'] ?? '[]', true) ?? [])) />
                                <x-input-label for="post_to_twitter" :value="__('Twitter')" />
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_photo_on[]"
                                    id="post_to_instagram" value="Instagram" @checked(in_array('Instagram', json_decode($listing['listing_post_photo_on'] ?? '[]', true) ?? [])) />
                                <x-input-label for="post_to_instagram" :value="__('Instagram')" />
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <p>Post Video On</p>

                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_video_on[]"
                                    id="post_to_youtube" value="Youtube" @checked(in_array('Youtube', json_decode($listing['listing_post_video_on'] ?? '[]', true) ?? [])) />
                                <x-input-label for="post_to_youtube" :value="__('Youtube')" />
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_video_on[]"
                                    id="post_to_tiktok" value="TikTok" @checked(in_array('TikTok', json_decode($listing['listing_post_video_on'] ?? '[]', true) ?? [])) />
                                <x-input-label for="post_to_tiktok" :value="__('TikTok')" />
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_video_on[]"
                                    id="post_to_facebook" value="Facebook" @checked(in_array('Facebook', json_decode($listing['listing_post_video_on'] ?? '[]', true) ?? [])) />
                                <x-input-label for="post_to_facebook" :value="__('Facebook')" />
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_video_on[]"
                                    id="post_to_twitter" value="Twitter" @checked(in_array('Twitter', json_decode($listing['listing_post_video_on'] ?? '[]', true) ?? [])) />
                                <x-input-label for="post_to_twitter" :value="__('Twitter')" />
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="post_video_on[]"
                                    id="post_to_instagram" value="Instagram" @checked(in_array('Instagram', json_decode($listing['listing_post_video_on'] ?? '[]', true) ?? [])) />
                                <x-input-label for="post_to_instagram" :value="__('Instagram')" />
                            </div>
                        </div>
                    </div>

                    <x-listing.post-video-on :postVideoOn="$listing['listing_post_video_on']" />

                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input me-2" name="email_complain"
                                    id="email_complain" value="1" @checked(old('email_complain', $listing['listing_email_complain'] ?? false)) />
                                <x-input-label type="checkbox" for="email_complain" :value="__('Email Complain')" />
                            </div>
                        </div>
                    </div>
                </div>

                @if ($type === 'commercial')
                    @include('layouts.includes.particles.property.listing.edit.commercial')
                @endif


                @if ($type === 'residential')
                    @include('layouts.includes.particles.property.listing.add.residential')
                @endif


                <!--  Present Offer section  -->
                <x-listing.present-offer :presentOffers="$listing['present_listings']" />


                <div class="row ">
                    <div class="col-12 d-flex justify-content-end m-2">
                        <button type="submit" class="btn btn-primary btn-sm me-2"> Save & Exit</button>
                        <button type="submit" class="btn btn-primary btn-sm me-2"> Save</button>
                        <button type="button" class="btn btn-primary btn-sm me-2" id="exit_listing"> Exit</button>
                    </div>
                </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/listing.js') }}"></script>


    <script>
        $("#exit_listing").click(function() {
            window.location.href = preListingIndexRoute;
        });
    </script>

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

            var $form = $('form[id="edit-properties-listing-form"]');
            var $submitButton = $form.find('button[type="submit"]');
            console.log('validation is loaded..');

            $form.validate({
                rules: {
                    property_id: {
                        required: true,
                    },
                    'post_to_mls[]': {
                        required: true,
                    },
                },
                messages: {
                    property_id: {
                        required: "Please select property",
                    },
                    'post_to_mls[]': {
                        required: "Please select post to MLS",
                    },
                },
                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 = $("#add-properties-listing-form");
                    var $submitButton = $form.find('.submit');

                    $.ajax({
                            url: "{{ route('listings.update', ['listing' => $listing['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) {
                            // 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) {
                                // Show success message and hide modal
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    showConfirmButton: true
                                }).then(() => {
                                    window.location.href = "{{ route('listings.index') }}";
                                });
                            } else {
                                $.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>
@endpush