@props(['appraisals' => []])

<x-pending.accordions.accordion-template title="Appraisal" targetId="pending-appraisal">
    <!-- response is seller accept section  -->
    <div class="row px-5" id="">
        <div class="col-md-3 mt-3">
            <label class="form-label">Appraisal Outcome</label>
            <select id="" name="residential_appraisal_outcome"
                class="default-select form-control form-control-sm wide appraised">
                <option @selected(old('residential_appraisal_outcome', $appraisals['residential_appraisal_outcome']
                    ?? '' )=="" )>Choose Option</option>
                <option value="appraised" @selected(old('residential_appraisal_outcome',
                    $appraisals['residential_appraisal_outcome'] ?? '' )=="appraised" )>Appraised</option>
                <option value="low-appraisal" @selected(old('residential_appraisal_outcome',
                    $appraisals['residential_appraisal_outcome'] ?? '' )=="low-appraisal" )>Low Appraisal
                </option>
            </select>
        </div>
        <div class="col-12">
            {{-- Section shown when "Low Appraisal" is selected from Appraisal Outcome --}}

            <div class="row mt-1 low-appraisal-section px-5" id="" style="display: none;">
                <div class="col-md-2 mt-4">
                    <div class="form-check">
                        <input class="form-check-input low-appraisal-option" type="radio"
                            name="residential_renegotiate_withdraw_or_released" value="renegotiate"
                            id="renegotiate-radio" @checked(old('residential_renegotiate_withdraw_or_released',
                            $appraisals['residential_renegotiate'] ?? '' )=='renegotiate' )>
                        <label class="form-check-label" for="renegotiate-radio">
                            Renegotiate
                        </label>
                    </div>
                </div>
                <div class="col-md-2 mt-4">
                    <div class="form-check">
                        <input class="form-check-input low-appraisal-option" type="radio"
                            name="residential_renegotiate_withdraw_or_released" value="withdraw-released"
                            id="withdraw-released-radio" @checked(old('residential_renegotiate_withdraw_or_released',
                            $appraisals['residential_renegotiate'] ?? '' )=='withdraw-released' )>
                        <label class="form-check-label" for="withdraw-released-radio">
                            Withdraw / Released
                        </label>
                    </div>
                </div>
            </div>

            {{-- Common section for Appraisal and Low Appraisal --}}
            {{-- Show this section immediately for Appraisal, and on click of "Renegotiate" in Low Appraisal --}}

            @php
            // Check conditions for showing the section
            $showAppraisalSection = isset($appraisals) && (
            (isset($appraisals['residential_appraisal_outcome']) && $appraisals['residential_appraisal_outcome'] ==
            'appraised') ||
            (isset($appraisals['residential_renegotiate']) && $appraisals['residential_renegotiate'] == 'renegotiate')
            );
            @endphp

            <div class="row mt-1 appraisal-and-low-appraisal-common-section px-5"
                style="display: {{ $showAppraisalSection ? '' : 'none' }}">
                <div class="col-12">
                    <x-pending.schedule-remote-live-closing scheduleClosing="residential_schedule_closing"
                        closingDate="residential_schedule_closing_date" remoteClosing="residential_remote_closing"
                        remoteType="residential_remote_closing_option" liveClosing="residential_live_closing"
                        liveType="residential_live_closing_option" :data="$appraisals ?? []" />
                </div>
                <div class="col-12">
                    <div class="row">
                        <x-pending.provide-utility-company title="Provide Utility companies"
                            name="appraisal_utility_name[]" email="appraisal_utility_email[]"
                            phone="appraisal_utility_phone[]" />
                        <div class="col-md-12">
                            <x-pending.provide-utility-company-check-boxes removeSign="removeSign" close="close"
                                markAsSold="mark_as_sold" marketAsSold="market_as_sold" lock="lock" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-pending.check-box-accordion>