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

{{-- {{ dd($environments) }} --}}

<x-buyer-lender-process.template.accordion-template title="Environmental" targeId="environmental-accordion-content">
    <div class="px-5">
        <div class="environment-section border border-1 rounded p-3">
            @forelse ($environments as $environment)
                {{-- {{ dd($environment['environment_phase_study']) }} --}}

                <div class="container p-0 m-0 mt-2">
                    <!-- environmental pase 1 Study title and pass and fail option    -->
                    <div class="row">
                        <div class="col-3">
                            <h6 class="text-primary mt-1 me-3">Environmental Phase {{ $loop->index + 1 }} Study</h6>
                        </div>
                        <div class="col-6">
                            <div class="form-check form-check-inline">
                                <input
                                    class="form-check-input @if ($loop->index == 0) environmental-pase-1-study @endif"
                                    type="radio" name="environment_phase_study[]"
                                    id="environment_phase_study_pass_status" value="pass"
                                    @checked(old('environment_phase_study', $environment['environment_phase_study'] ?? '') == 'pass') />
                                <label class="form-check-label" for="environment_phase_study_pass_status">Pass</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input
                                    class="form-check-input @if ($loop->index == 0) environmental-pase-1-study @endif"
                                    type="radio" name="environment_phase_study[]"
                                    id="environment_phase_study_fail_status" value="fail"
                                    @checked(old('environment_phase_study', $environment['environment_phase_study'] ?? '') == 'fail') />
                                <label class="form-check-label" for="environment_phase_study_fail_status">Fail</label>
                            </div>
                        </div>
                    </div>

                    <!-- environmental pase 1 Study form   -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label for="" class="form-label">Company Name</label>
                            <x-text-input name="environment_company_name[]" :value="old('environment_company_name', $environment['environment_company_name'] ?? '')" />
                        </div>
                        <div class="col-md-4">
                            <label for="" class="form-label">Contact</label>
                            <x-text-input name="environment_company_contact[]" :value="old(
                                'environment_company_contact',
                                $environment['environment_company_contact'] ?? '',
                            )" />
                        </div>
                        <div class="col-md-4">
                            <label for="" class="form-label">Email</label>
                            <x-text-input type="email" name="environment_company_email[]" :value="old(
                                'environment_company_email',
                                $environment['environment_company_email'] ?? '',
                            )" />
                        </div>
                        <div class="col-md-4 mt-3">
                            <label for="" class="form-label">Previous or current deed restriction on the
                                property </label>
                            <select name="environment_company_restriction[]" id=""
                                class="form-control form-control-sm">
                                <option selected disabled @selected(old('environment_company_restriction', $environment['environment_company_restriction'] ?? '') == '')>Select</option>
                                <option value="yes" @selected(old('environment_company_restriction', $environment['environment_company_restriction'] ?? '') == 'yes')>Yes</option>
                                <option value="no" @selected(old('environment_company_restriction', $environment['environment_company_restriction'] ?? '') == 'no')>No</option>
                            </select>
                        </div>
                        <div class="col-md-4 mt-3">
                            <label for="" class="form-label">File</label>
                            <x-text-input type="file" name="environment_company_file[]" />
                        </div>
                        <div class="col-md-4 mt-1">
                            <x-text-area name="environment_company_notes[]" rows="2" :value="old(
                                'environment_company_notes',
                                $environment['environment_company_notes'] ?? '',
                            )" />
                        </div>
                    </div>
                </div>

                @if ($loop->index == 1 && $environment['environment_phase_study'] == 'fail')
                    <div class="" id="environmental-pase-2-study" style="">
                        <!-- environmental pase 2 Study title and pass and fail option    -->
                        <div class="row">
                            <div class="col-3">
                                <h6 class="text-primary mt-1 me-3">Environmental Phase 2 Study</h6>
                            </div>
                            <div class="col-6">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input " type="radio" name="environment_phase_study[]"
                                        id="environment_phase_study_pass_status" value="pass"
                                        @checked(old('environment_phase_study', $environment['environment_phase_study'] ?? '') == 'pass') />
                                    <label class="form-check-label"
                                        for="environment_phase_study_pass_status">Pass</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="environment_phase_study[]"
                                        id="environment_phase_study_fail_status" value="fail"
                                        @checked(old('environment_phase_study', $environment['environment_phase_study'] ?? '') == 'fail') />
                                    <label class="form-check-label"
                                        for="environment_phase_study_fail_status">Fail</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label for="" class="form-label">Company Name</label>
                                <x-text-input name="environment_company_name[]" placeholder="Enter company name" />
                            </div>
                            <div class="col-md-4">
                                <label for="" class="form-label">Contact</label>
                                <x-text-input name="environment_company_contact[]" placeholder="Enter contact number" />
                            </div>
                            <div class="col-md-4">
                                <label for="" class="form-label">Email</label>
                                <x-text-input type="email" name="environment_company_email[]"
                                    placeholder="example@gmail.com" />
                            </div>
                            <div class="col-md-4 mt-3">
                                <label for="" class="form-label">Previous or current deed restriction on the
                                    property </label>
                                <select name="environment_company_restriction[]" id=""
                                    class="form-control form-control-sm">
                                    <option selected disabled>Select</option>
                                    <option value="yes">Yes</option>
                                    <option value="no">No</option>
                                </select>
                            </div>
                            <div class="col-md-4 mt-3">
                                <label for="" class="form-label">File</label>
                                <x-text-input type="file" name="environment_company_file[]" />
                            </div>
                            <div class="col-md-4 mt-1">
                                <x-text-area name="environment_company_notes[]" rows="2"
                                    placeholder="Enter your notes here..." />
                            </div>
                        </div>
                    </div>
                @endif

            @empty
                <div class="container p-0 m-0">
                    <!-- environmental pase 1 Study title and pass and fail option    -->
                    <div class="row">
                        <div class="col-3">
                            <h6 class="text-primary mt-1 me-3">Environmental Phase 1 Study</h6>
                        </div>
                        <div class="col-6">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input environmental-pase-1-study" type="radio"
                                    name="environment_phase_study[]" id="" value="pass" />
                                <label class="form-check-label" for="">Pass</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input environmental-pase-1-study" type="radio"
                                    name="environment_phase_study[]" id="" value="fail" />
                                <label class="form-check-label" for="">Fail</label>
                            </div>
                        </div>
                    </div>
                    <!-- environmental pase 1 Study form   -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label for="" class="form-label">Company Name</label>
                            <x-text-input name="environment_company_name[]" placeholder="Enter company name" />
                        </div>
                        <div class="col-md-4">
                            <label for="" class="form-label">Contact</label>
                            <x-text-input name="environment_company_contact[]" placeholder="Enter contact number" />
                        </div>
                        <div class="col-md-4">
                            <label for="" class="form-label">Email</label>
                            <x-text-input type="email" name="environment_company_email[]"
                                placeholder="example@gamil.com" />
                        </div>
                        <div class="col-md-4 mt-3">
                            <label for="" class="form-label">Previous or current deed restriction on the
                                property </label>
                            <select name="environment_company_restriction[]" id=""
                                class="form-control form-control-sm">
                                <option selected disabled>Select</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>
                        <div class="col-md-4 mt-3">
                            <label for="" class="form-label">File</label>
                            <x-text-input type="file" name="environment_company_file[]" />
                        </div>
                        <div class="col-md-4 mt-1">
                            <x-text-area name="environment_company_notes[]" rows="2"
                                placeholder="Enter your notes here..." />
                        </div>
                    </div>
                </div>
            @endforelse

            <!-- environmental pase 2 Study form with title  -->
            <div class="" id="environmental-pase-2-study" style="display:none;">
                <!-- environmental pase 2 Study title and pass and fail option    -->
                <div class="row">
                    <div class="col-3">
                        <h6 class="text-primary mt-1 me-3">Environmental Phase 2 Study</h6>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="environment_phase_study[]"
                                id="" value="pass" />
                            <label class="form-check-label" for="">Pass</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="environment_phase_study[]"
                                id="" value="fail" />
                            <label class="form-check-label" for="">Fail</label>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-4">
                        <label for="" class="form-label">Company Name</label>
                        <x-text-input name="environment_company_name[]" placeholder="Enter company name" />
                    </div>
                    <div class="col-md-4">
                        <label for="" class="form-label">Contact</label>
                        <x-text-input name="environment_company_contact[]" placeholder="Enter contact number" />
                    </div>
                    <div class="col-md-4">
                        <label for="" class="form-label">Email</label>
                        <x-text-input type="email" name="environment_company_email[]"
                            placeholder="example@gmail.com" />
                    </div>
                    <div class="col-md-4 mt-3">
                        <label for="" class="form-label">Previous or current deed restriction on the property
                        </label>
                        <select name="environment_company_restriction[]" id=""
                            class="form-control form-control-sm">
                            <option selected disabled>Select</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="col-md-4 mt-3">
                        <label for="" class="form-label">File</label>
                        <x-text-input type="file" name="environment_company_file[]" />
                    </div>
                    <div class="col-md-4 mt-1">
                        <x-text-area name="environment_company_notes[]" rows="2"
                            placeholder="Enter your notes here..." />
                    </div>
                </div>
            </div>


            <!-- Additional Testing for environmental pase   -->
            <div class="p-0 mt-3">
                <h6 class="text-primary pt-2 pb-2 me-3">Additional Testing</h6>
                <div id="environmental-additional-testing-section">
                </div>
                <div class="row mt-3">
                    <div class="col-md-4">
                        <button type="button" class="btn btn-sm btn-primary environmental-additional-testing-btn">
                            Add Additional Testing </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-buyer-lender-process.template.accordion-template>