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


<x-pending.accordions.accordion-template title="Environmental" targetId="pending-environmental">

    <div class="px-5">



        @forelse ($environments as $environment)
            <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="environmental_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="environmental_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="environmental_company_name[]" :value="old('environmental_company_name', $environment['environmental_company_name'] ?? '')" />
                    </div>
                    <div class="col-md-4">
                        <label for="" class="form-label">Contact</label>
                        <x-text-input name="environmental_contact[]" :value="old('environmental_contact', $environment['environmental_contact'] ?? '')" />
                    </div>
                    <div class="col-md-4">
                        <label for="" class="form-label">Email</label>
                        <x-text-input type="email" name="environmental_email[]" :value="old('environmental_email', $environment['environmental_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="environmental_deed_restriction_on_the_property[]" id=""
                            class="default-select form-control form-control-sm">
                            <option selected disabled @selected(old('environmental_deed_restriction_on_the_property', $environment['environmental_deed_restriction_on_the_property'] ?? '') == '')>Select</option>
                            <option value="yes" @selected(old('environmental_deed_restriction_on_the_property', $environment['environmental_deed_restriction_on_the_property'] ?? '') == 'yes')>Yes</option>
                            <option value="no" @selected(old('environmental_deed_restriction_on_the_property', $environment['environmental_deed_restriction_on_the_property'] ?? '') == '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="environmental_file[]" />
                    </div>
                    <div class="col-md-4 mt-1">
                        <x-text-area name="environmental_notes[]" rows="2" :value="old('environmental_notes', $environment['environmental_notes'] ?? '')" />
                    </div>
                </div>
            </div>
        @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="environmental_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="environmental_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="environmental_company_name[]" />
                    </div>
                    <div class="col-md-4">
                        <label for="" class="form-label">Contact</label>
                        <x-text-input name="environmental_contact[]" />
                    </div>
                    <div class="col-md-4">
                        <label for="" class="form-label">Email</label>
                        <x-text-input type="email" name="environmental_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="environmental_deed_restriction_on_the_property[]" id=""
                            class="default-select 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="environmental_file[]" />
                    </div>
                    <div class="col-md-4 mt-1">
                        <x-text-area name="environmental_notes[]" rows="2" />
                    </div>
                </div>
            </div>
        @endforelse




        {{-- <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="environmental_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="environmental_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="environmental_company_name[]"/>
            </div>
            <div class="col-md-4">
                <label for="" class="form-label">Contact</label>
                <x-text-input name="environmental_contact[]"/>
            </div>
            <div class="col-md-4">
                <label for="" class="form-label">Email</label>
                <x-text-input type="email" name="environmental_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="environmental_deed_restriction_on_the_property[]" id="" class="default-select 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="environmental_file[]"/>
            </div>
            <div class="col-md-4 mt-1">
                <x-text-area name="environmental_notes[]" rows="2" />
            </div>
        </div>
    </div> --}}


        <!-- environmental pase 2 Study form with title  -->
        <div class="container p-0 mt-5" 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="environmental_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="environmental_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="environmental_company_name[]" />
                </div>
                <div class="col-md-4">
                    <label for="" class="form-label">Contact</label>
                    <x-text-input name="environmental_contact[]" />
                </div>
                <div class="col-md-4">
                    <label for="" class="form-label">Email</label>
                    <x-text-input type="email" name="environmental_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="environmental_deed_restriction_on_the_property[]" id=""
                        class="default-select form-control form-control-sm">
                        <option selected disabled>Select</option>
                        <option>Yes</option>
                        <option>No</option>
                    </select>
                </div>
                <div class="col-md-4 mt-3">
                    <label for="" class="form-label">File</label>
                    <x-text-input type="file" name="environmental_file[]" />
                </div>
                <div class="col-md-4 mt-1">
                    <x-text-area name="environmental_notes[]" rows="2" />
                </div>
            </div>
        </div>

        <!-- Additional Testing for environmental pase   -->
        <div class="container 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>
</x-pending.accordions.accordion-template>