@extends('layouts.app')

@section('title', $type === "commercial" ? 'Edit Seller Commercial Pending' : 'Edit 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"> Edit Seller {{ $type === "commercial" ? 'Commercial' : 'Residential' }} Pending</h4>

        </x-slot:title>

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

            @method('PUT')


            <x-text-input type="hidden" name="id" value="{{  $pending['id'] ?? '' }}" />
            <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">
                        <option value="mls_1" @selected(old('residential_post_mls', $pending['residential_post_mls'] ?? '') == "mls_1")>MLS 1</option>
                        <option value="mls_2" @selected(old('residential_post_mls', $pending['residential_post_mls'] ?? '') == "mls_2")>MLS 2</option>
                        <option value="mls_3" @selected(old('residential_post_mls', $pending['residential_post_mls'] ?? '') == "mls_3")>MLS 3</option>
                        {{-- <option value="mls_1" {{ in_array('mls_1', (array) old('residential_post_mls',
                        $pending['residential_post_mls'] ?? [])) ? 'selected' : '' }}>MLS 1</option>
                        <option value="mls_2" {{ in_array('mls_2', (array) old('residential_post_mls',
                        $pending['residential_post_mls'] ?? [])) ? 'selected' : '' }}>MLS 2</option>
                        <option value="mls_3" {{ in_array('mls_3', (array) old('residential_post_mls',
                        $pending['residential_post_mls'] ?? [])) ? 'selected' : '' }}>MLS 3</option> --}}
                    </select>


                </div>
                <div class="col-md-3 mt-4 pt-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input me-1" name="residential_mark_as_pending_listing"
                            @checked(old('residential_mark_as_pending_listing',
                            $pending['residential_mark_as_pending_listing'] ?? '' )==1) />
                        <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'] }}" @selected(old('property_id', $pending['property_id'])==$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-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'] }}" @selected(old('contact_id',
                            $pending['contact_id'])==$contact['id'])> {{ $contact['f_name'] }} {{ $contact['m_name'] }}
                            {{ $contact['l_name'] }}</option>
                        @empty

                        {{-- <option> Transaction Coordinator Not Found</option> --}}
                        @endforelse
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Email</label>
                    <x-text-input name="residential_pending_property_email" placeholder="Enter Email Address"
                        value="{{ old('residential_pending_property_email', $pending['residential_pending_property_email'] ?? '') }}" />

                </div>
                <div class="col-md-4">
                    <label class="form-label">Phone</label>
                    <x-text-input name="residential_pending_property_phone" placeholder="Enter Phone Number"
                        value="{{ old('residential_pending_property_phone', $pending['residential_pending_property_phone'] ?? '') }}" />
                </div>
            </div>

            <div class="row mt-3">
                <div class="mb-3 col-md-3">
                    <label class="form-label">Status</label>
                    <x-select name="residential_pending_property_status" id="status"
                        :options="['pending'=> 'In Contract / Pending', 'withdraw_release' => 'Withdraw Released', 'relist' => 'Re-List']"
                        selected-value="{{ $pending['residential_pending_property_status'] }}" />
                </div>
                <div class="col-md-3 mt-4 pt-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input me-1"
                            name="residential_post_as_in_contract_or_pending"
                            @checked(old('residential_post_as_in_contract_or_pending',
                            $pending['residential_post_as_in_contract_or_pending'] ?? '' )==1) />
                        <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="{{ ($pending['residential_pending_property_status'] == " withdraw_release") ? '' : '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="{{ ($pending['residential_pending_property_status'] == "pending") ? '' : 'display:none' }}">
                <div class="mb-3 col-md-3">
                    <label class="form-label">Is it Dual/ Limited Agency </label>
                    <x-select name="residential_is_it_dual" id="dual-agent" :options="['yes'=> 'Yes', 'no' => 'No']"
                        selected-value="{{ $pending['residential_is_it_dual'] }}" />
                </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="{{ ($pending['residential_is_it_dual'] == "yes")
                ? '' : '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 :company="$pending['residentials'][0] ?? []" />

                        @if($type == "commercial")

                        <x-pending.accordions.other-see-notes  :other="$pending['others'][0] ?? []" />
                        <x-pending.accordions.zoning  :zoning="$pending['zoning_properties'][0] ?? []" />
                        <x-pending.accordions.enviroment :environments="$pending['environments'] ?? []"/>
                        @endif


                        <x-pending.accordions.due-diligence :diligencies="$pending['diligencies'][0] ?? []" />

                        <x-pending.accordions.order-insurance :insurance="$pending['buyer_insurance'] ?? []" />

                        <x-pending.accordions.inspection :inspections="$pending['inspections'][0] ?? []" />

                       <x-pending.accordions.appraisal :appraisals="$pending['appraisals'][0] ?? []" />
                        
                        <x-pending.accordions.survey :servey="$pending['surveys'] ?? []" />
                        
                        <x-pending.accordions.no-inspection  :noinspection="$pending['noinspections'][0] ?? []" />
            
                    </div>
                </div>
            </div>


            {{-- <div class="accordion-item mt-3" id="seller-section" style="{{ ( $pending['residential_is_it_dual'] == "no"
                || $pending['residential_is_it_dual']=="yes" ) ? '' : '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="#seller" aria-expanded="true" aria-controls="seller"
                        id="accordion-title">
                        Seller
                    </button>
                </h2>
                <div id="seller" class="accordion-collapse collapse" data-bs-parent="#accordion-one">
                    <div class="accordion-body  pt-4">

                        <x-pending.accordions.title-company :company="$pending['residentials'][0]" />


                        @if($type == "commercial")

                        <x-pending.accordions.other-see-notes  :other="$pending['others'][0]" />
                        <x-pending.accordions.zoning />
                        <x-pending.accordions.enviroment />
                        @endif

                        <x-pending.accordions.due-diligence :diligencies="$pending['diligencies'][0]" />

                        <x-pending.accordions.order-insurance :insurance="$pending['buyer_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 d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary btn-sm"> Update</button>
                </div>
            </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    let pendingUpdate = @json(route('pending.update', ['pending' => $pending['id']]));
    let pendingIndex = @json(route('pending.index'));
</script>

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