@extends('layouts.app')

@section('title', $type === "commercial" ? 'Add Seller Commercial Pending' : 'Add Seller Residential Pending')


{{-- 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;
    }

    .select2-container--default .select2-selection--single {
        background-color: #fff;
        border-radius: 0.625rem;
        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 Seller {{ $type === "commercial" ? 'Commercial' : 'Residential' }} Pending</h4>

        </x-slot:title>

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

            <x-text-input type="hidden" name="property_type" value="{{ $type }}" />


                <!-- list to LMS  -->
                <div class="row ">
                    <div class="mb-3 col-md-3">
                        <x-input-label for="Listed On MLS" required="true" :value="__('Listed On MLS')" />
                        <select class="multi-select form-control form-control-sm select2-hidden-accessible wide"
                            multiple="" name="residential_post_mls" id="list-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="col-md-3 mt-4 pt-2">
                        <div class="form-check">
                            <x-checkbox-input name="residential_mark_as_pending_listing" />
                            <label class="form-check-label" for="mark is pending">
                                Mark As Pending in Listing Service
                            </label>
                        </div>
                    </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
                            @endforelse
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-4">
                        <label class="form-label"> Assign To Transaction Coordinator<span class="text-danger">
                            </span></label>
                        <select class="multi-select form-select form-select-md" name="contact_id" id="contactList">
                            <option selected disabled> Select Contact</option>
                           @forelse ($contacts as $contact)
                           <option value="{{ $contact['id'] }}"> {{ $contact['f_name'] }} {{ $contact['m_name'] }} {{ $contact['l_name'] }}</option>
                           @empty
                           @endforelse
                        </select>
                    </div>
                    <div class="col-md-4">
                        <x-input-label for="Email"  :value="__('Email')" />
                        <x-text-input name="residential_pending_property_email" placeholder="Enter Email Address" />

                    </div>
                    <div class="col-md-4">
                        <x-input-label for="Phone"  :value="__('Phone')" />
                        <x-text-input id="phone_number_formate" name="residential_pending_property_phone" placeholder="Enter Phone Number" />
                    </div>
                </div>


                <div class="row mt-3">
                    <div class="mb-3 col-md-3">
                        <x-input-label for="state"  :value="__('State')" />
                        <x-select name="residential_pending_property_status" disabled="false" id="status"  :options="['pending'=> 'In Contract / Pending', 'withdraw_release' => 'Withdraw Released', 'relist' => 'Re-List']"/>
                    </div>
                    <div class="col-md-3 mt-4 pt-2">
                        <div class="form-check">
                            <x-checkbox-input name="residential_post_as_in_contract_or_pending" />
                            <label class="form-check-label" for="mark is pending">
                                Post As In Contract/Pending
                            </label>
                        </div>
                    </div>
                </div>

                <!-- withdraw release section  -->
                <div class="row" id="withdraw-release-section" style="display:none">
                    <div class="mb-3 col-md-3">
                        <button type="button" class="btn btn-primary btn-sm"> Kill the
                            Deal</button>
                    </div>
                </div>

                <!-- contact pending section  -->
                <div class="row" id="contract-pending-section" style="display:none">
                    <div class="mb-3 col-md-3">
                        <x-input-label for="dual limited agency"  :value="__('Is it Dual/ Limited Agency')" />
                        <x-select name="residential_is_it_dual" disabled="false" id="" class="" :options="['yes'=> 'Yes', 'no' => 'No']"/>
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="Type"  :value="__('Type')" />
                        <select id="type-option" name="residential_pending_property_type" class="form-control form-control-sm">
                            <option value="">Select an option</option>
                            <option value="buyer">Buyer</option>
                            <option value="seller">Seller </option>
                        </select>
                    </div>
                </div>

                <!-- remove this later when refine the api  -->
                <x-text-input type="hidden" name="residential_company_is_it_dual" value="no" />

                <!-- buyer -->
                <div class="accordion-item mt-3" id="buyer-section" style="display: none;">
                    <h2 class="accordion-header accordion-header-primary">
                        <button class="accordion-button collapsed bg-primary text-white" type="button"
                            data-bs-toggle="collapse" data-bs-target="#buyer" aria-expanded="true"
                            aria-controls="buyer" id="accordion-title">
                            Buyer
                        </button>
                    </h2>
                    <div id="buyer" class="accordion-collapse collapse" data-bs-parent="#accordion-one">
                        <div class="accordion-body  pt-4">
                            <x-pending.accordions.title-company />

                            @if($type == "commercial")

                            <x-pending.accordions.other-see-notes />
                            <x-pending.accordions.zoning />
                            <x-pending.accordions.enviroment />

                            @endif

                            <x-pending.accordions.due-diligence />

                            <x-pending.accordions.order-insurance />

                            <x-pending.accordions.inspection />

                            <x-pending.accordions.appraisal />

                            <x-pending.accordions.survey />

                            <x-pending.accordions.no-inspection />
                        </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="submit" class="btn btn-danger btn-sm">Exit</button>
                    </div>
                </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    const pendingStoreRoute = "{{ route('pending.store') }}";
    const pendingIndexRoute = "{{ route('pending.index') }}";
    initializeIntlTelInput('#phone_number_formate')


</script>

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