@extends('layouts.app')

@section('title', 'Add 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>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endpush

{{-- page connect --}}
@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />
    {{-- {{ dd(dd($breadcrumbs)); }} --}}

    <x-messages />


    <x-row-card>

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


        <x-form id="add-buyer-lender-process-form">

            <div x-data="{ preQualification: ''}">

                <div class="row">
                    <div class="col-md-3">
                        <x-input-label for="Pre-Qualification" required="true" :value="__('Pre-Qualification')" />
                        <select class="form-control form-control-sm " id="pre-qualification-option" name="pre_qualification"
                            x-model="preQualification">
                            <option value="">Choose Option</option>
                            <option value="qualified">Qualified</option>
                            <option value="cash">Cash</option>
                        </select>
                    </div>
                </div>

                <div class="row mt-3" id="qualified-section" x-show="preQualification === 'qualified'" x-cloak>

                    <x-buyer-lender-process.tour-properties-with-agent />

                    <!-- show counter offers show -->
                    <x-buyer-lender-process.property-negotiation-counter-offer />

                    <!-- when counter offers accept then show else hide  -->
                    <div id="counter-offered-is-accepted-section" style="display: none">

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

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

                        <x-buyer-lender-process.accordions.title-company />

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

                        <x-buyer-lender-process.accordions.attorney name="attorney_name" email="attorney_email" phone="attorney_phone" />

                        <x-buyer-lender-process.inspection />

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

                        <x-buyer-lender-process.accordions.environment />

                        <x-buyer-lender-process.accordions.other-insurance />
                    </div>
                </div>

                <!-- cash section   -->
                <x-buyer-lender-process.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">Add</button>
                </div>
            </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection

{{-- custom js --}}
@push('js')
<script>
    const buyerLenderProcessStoreRoute = "{{ route('buyer-lender-process.store') }}";
    const buyerLenderProcessIndexRoute = "{{ route('pending.index') }}";
</script>
<script src="{{ asset('assets/js/custom/property/buyer-lender-process.js') }}"></script>
@endpush