@props(['zoning'])

<x-pending.accordions.accordion-template title="Zoning">
    <div class="px-5">

    
    <div class="container p-0 m-0 mt-3">
        <div class="row">
            <div class="col-md-3">
                <x-input-label :value="__('is a variance needed')" />
                <select name="" class="default-select form-control form-control-sm is-a-variance-need-option" id="">
                    <option selected>Select Option</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </div>
        </div>
        <div class="row is-a-variance-need-section border border-2 mx-0 p-3 mb-3 mt-3" style="display: none;">
            <div class="col-3">
                <div class="mb-3">
                    <x-input-label for="Variance Due Date" :value="__('Variance Due Date')" />
                    <x-text-input type="date" name="variance_due_date" :value="old('bariance_due_date', $zoning['variance_due_date'] ?? '')" />
                </div>
            </div>

            {{-- zoning process component --}}
            <x-pending.zoning-process label="Variance Process" :zoning-variance="isset($zoning['variance_process']) ?? $zoning['variance_process']" />

            <div class="col-md-3 mt-3">
                <x-input-label :value="__('is completed')" />
                <select name="variance_is_completed" class="form-control form-control-sm">
                    <option @selected(old('variance_is_completed', $zoning['variance_is_completed'] ?? '' ) == "")>Select Option</option>
                    <option value="yes" @selected(old('variance_is_completed', $zoning['variance_is_completed'] ?? '' ) == "yes")>Yes</option>
                    <option value="no" @selected(old('variance_is_completed', $zoning['variance_is_completed'] ?? '' ) == "no")>No</option>
                </select>
            </div>
            <div class="col-md-3 if-completed-section mt-5" style="{{ (isset($zoning) && $zoning['variance_is_completed'] == 'yes') ? '' : 'display:none' }}">
                <p class="text-primary">Proceed with Due Diligence</p>
            </div>
        </div>
    </div>

    <div class="container p-0 m-0 mt-3">
        <div class="row">
            <div class="col-md-3">
                <x-input-label :value="__('Does property need to be Re-Zoned')" />
                <x-select name="does_property_needs_to_be_re_zoned" class="does-property-needs-to-be-rezone-option"
                          defaultOption="Select Option" :options="['yes' => 'Yes', 'no' => 'No']"
                          selected-value="{{ old('does_property_needs_to_be_re_zoned', $zoning['does_property_needs_to_be_re_zoned'] ?? '') }}"/>
            </div>
        </div>
        <div class="row does-property-needs-to-be-rezone-section border border-2 mx-0 p-3" style="display: none;">
            <div class="col-3">
                <div class="mb-3">
                    <x-input-label :value="__('Re-Zoning Due Date')" />
                    <x-text-input type="date" name="re_zoning_due_date" :value="old('re_zoning_due_date', $zoning['re_zoning_due_date'] ?? '')" />
                </div>
            </div>

                {{-- zoning process component --}}
                <x-pending.re-zoning-process label="Re-Zoning Process" :re-zoning-variance="isset($zoning['re_zoning_process']) ?? $zoning['re_zoning_process']" />

                <div class="col-md-3 mt-3">
                    <x-input-label :value="__('is completed')" />
                    <x-select 
                    name="re_zoning_is_completed" class="if-completed-option"
                    disabled="false"
                              :options="['yes' => 'Yes', 'no' => 'No']"
                              selected-value="{{ old('re_zoning_is_completed', $zoning['re_zoning_is_completed'] ?? '') }}"/>
                </div>
                <div class="col-md-3 if-completed-section mt-5" style="display: none;">
                    <p class="text-primary">Proceed with Due Diligence</p>
                </div>
            {{-- </div> --}}
        </div>
        <div class="container p-0 m-0 mt-3">
            <div class="row">
                <div class="col-md-3">
                    <x-input-label :value="__('Accept Current Zoning')" />
                    <x-select name="accept_current_zoning" class="" :options="['yes' => 'Yes', 'no' => 'No']" />
                </div>
            </div>
        </div>
    </div>
</div>
</x-pending.accordions.accordion-template>