@extends('layouts.app')

@section('title', 'Edit Buyer Lender Process')

{{-- custom css --}}
@push('css')
<style>
    @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; */
    }

    /* This attribute is used to hide elements until Alpine.js has initialized. It ensures that the elements are not visible before Alpine.js takes control */
    [x-cloak] {
        display: none;
    }
</style>
@endpush


@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-messages />

    <x-row-card>

        <x-slot:title>
            <h4 class="card-title"> Edit Buyer Lender Process</h4>
        </x-slot:title>


        <x-form id="edit-buyer-lender-process-form">
            @method('PUT')
            <div x-data="{ preQualification: '{{ $buyerLender['pre_qualification'] ?? '' }}'}">

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

                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">Pre-Qualification</label>
                        <select class="form-control form-control-sm " id="pre-qualification-option"
                            name="pre_qualification" x-model="preQualification">
                            <option value="" @selected(old('pre_qualification', $buyerLender['pre_qualification'] ?? ''
                                )=='' )>Choose Option</option>
                            <option value="qualified" @selected(old('pre_qualification',
                                $buyerLender['pre_qualification'] ?? '' )=='qualified' )>Qualified</option>
                            <option value="cash" @selected(old('pre_qualification', $buyerLender['pre_qualification']
                                ?? '' )=='cash' )>Cash</option>
                        </select>
                    </div>
                </div>

                <div class="row mt-3" id="qualified-section" x-show="preQualification === 'qualified'" x-cloak>
{{-- {{ dd($buyerLender['visited']) }} --}}
                    <x-buyer-lender-process.tour-properties-with-agent
                        :visitedProperties="$buyerLender['visited'] ?? '' " />

                    <!-- Pass the counterOffers to the component -->
                    <x-buyer-lender-process.property-negotiation-counter-offer
                        :counterOffers="$allCounterOffers ?? []" />

                    <!-- when counter offers accept then show else hide  -->
                    <div id="counter-offered-is-accepted-section"
                        style="{{ empty($companies) ? 'display: none' : '' }}">

                        <x-buyer-lender-process.accepted-property-address />

                        <x-buyer-lender-process.escrow-deposit />

                        <x-buyer-lender-process.accordions.title-company :companies="$companies" />

                        <x-buyer-lender-process.accordions.quit-claim />

                        <x-buyer-lender-process.accordions.attorney name="attorney_name" email="attorney_email"
                            phone="attorney_phone" :data="$attorneys[0] ?? []" />

                        <x-buyer-lender-process.inspection :inspection="$inspections[0] ?? []" />

                        <x-buyer-lender-process.accordions.survey title="survey_title[]" date="survey_date[]"
                            document="survey_document[]" note="survey_notes[]" :surveys="$surveys" />


                        <x-buyer-lender-process.accordions.environment :environments="$environments" />

                        <x-buyer-lender-process.accordions.other-insurance :insurances="$insurances" />
                    </div>
                </div>

                <!-- cash section   -->
                <x-buyer-lender-process.cash amount="{{ $buyerLender['cash_amount'] }}"
                    proof="{{ $buyerLender['proof_of_cash'] }}" />

            </div>
            <div class="row mt-3">
                <div class="col-md-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>
    const buyerLenderProcessUpdateRoute = @json(route('buyer-lender-process.update',['buyer_lender_process' => $buyerLender['id']]));
    const buyerLenderProcessIndexRoute = "{{ route('pending.index') }}";
</script>

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