@extends('layouts.app')

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

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

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

        @default
            Add 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">
                    Add New
                    @switch($type)
                        @case('commercial')
                            Commercial
                        @break

                        @case('residential')
                            Residential
                        @break

                        @case('agriculture')
                            Agriculture
                        @break

                        @default
                            Property
                    @endswitch
                    listing
                </h4>

            </x-slot:title>

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

                <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">MLS 1</option>
                                <option value="mls_2">MLS 2</option>
                                <option value="mls_3">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'] }}">
                                        {{ $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">
                                <x-checkbox-input name="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">
                                <x-checkbox-input name="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">
                                <x-checkbox-input name="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">
                                <x-checkbox-input name="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>Select Lock Box</option>
                            <option value="lock-box-1">Lock Box 1</option>
                            <option value="lock-box-2">Lock Box 2</option>
                            <option value="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="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">
                            </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">
                                <x-checkbox-input name="photo_taken" id="marketing-photo-taken" />
                                <x-input-label type="checkbox" for="marketing photo taken" :value="__('Photo Taken')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="video_made" />
                                <x-input-label type="checkbox" for="video_made" :value="__('Video has been made')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="poster_made" />
                                <x-input-label type="checkbox" for="poster_made" :value="__('Poster Made')" />
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3" id="marketing-photo-taken-section" style="display: none;">
                        <div class="col-md-3">
                            <x-input-label for="name" :value="__('Name')" />
                            <x-text-input name="name" />
                        </div>
                        <div class="col-md-3">
                            <x-input-label for="email" :value="__('Email')" />
                            <x-text-input name="email" />
                        </div>
                        <div class="col-md-3">
                            <x-input-label for="phone" :value="__('Phone')" />
                            <x-text-input name="phone" /> <!-- Pass actual value or an empty string if null -->
                        </div>
                    </div>


                    <div class="row">
                        <h5 class="text-primary"> Post Photo On</h5>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_photo_on[]" value="Facebook" />
                                <x-input-label type="checkbox" for="post_to_facebook" :value="__('Facebook')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_photo_on[]" value="Twitter" />
                                <x-input-label type="checkbox" for="post_to_twitter" :value="__('Twitter')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_photo_on[]" value="Instagram" />
                                <x-input-label type="checkbox" for="post_to_instagram" :value="__('Instagram')" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <h5 class="text-primary"> Post Video On</h5>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_video_on[]" value="Youtube" />
                                <x-input-label type="checkbox" for="post_to_youtube" :value="__('Youtube')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_video_on[]" value="TikTok" />
                                <x-input-label type="checkbox" for="post_to_tiktok" :value="__('Tik Tok')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_video_on[]" value="Facebook" />
                                <x-input-label type="checkbox" for="post_to_facebook" :value="__('Facebook')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_video_on[]" value="Twitter" />
                                <x-input-label type="checkbox" for="post_to_twitter" :value="__('Twitter')" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="post_video_on[]" value="Instagram" />
                                <x-input-label type="checkbox" for="post_to_instagram" :value="__('Instagram')" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-check">
                                <x-checkbox-input name="email_complain" />
                                <x-input-label type="checkbox" for="email_complain" :value="__('Email Complain')" />
                            </div>
                        </div>
                    </div>
                </div>

                {{-- {{ dd($type) }} --}}

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

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


                <!--  Present Offer section  -->
                <x-listing.present-offer />


                <!--  Email Lead section  -->
                <div class="row mt-4" id="">
                    <h5 class="text-primary"> Email Lead</h5>
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label">Source</label>
                            <select class="multi-select form-control form-control-sm select2-hidden-accessible wide"
                                multiple="" name="email_lead_source[]" id="email-lead-source" tabindex="-1"
                                aria-hidden="true" data-select2-id="select2-data-email-lead-source">
                                <option>Loopnet</option>
                                <option>Crexi</option>
                                <option>MLS</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-2 d-flex justify-content-end gap-2">
                        <button type="submit" class="btn btn-primary btn-sm"> Save & Exit </button>
                        <button type="submit" class="btn btn-primary btn-sm"> Save </button> 
                        <button type="button" class="btn btn-danger btn-sm" id ="exit_listing"> Exit </button> 

                    </div>
                </div>


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


{{-- custom js --}}
@push('js')
    <script>
        const listingStoreRoute = "{{ route('listings.store') }}";
        const listingIndexRoute = "{{ route('listings.store') }}";

        
        initializeIntlTelInput('#phone_number_formate')

    </script>
    <script src="{{ asset('assets/js/custom/property/listing.js') }}"></script>
@endpush