@extends('layouts.admin')

@section('content')

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>{!! __('messages.Address account setting') !!}</h4>
            </div>
        </div>
        @include('layouts.errors')
        <!-- Form for creating/updating user account settings -->
        <form action="{{ route('account-settings.store') }}" method="POST">
            @csrf 
            <input type="hidden" name="client_plans_id" value="{{ $plan->id }}">
            <!-- Accordion structure -->
            <div class="card">
                <div class="card-body add-product pb-0">
                    <div class="accordion-card-one accordion" id="accordionExample">
                        <div class="accordion-item">
                            <div class="accordion-header" id="headingOne">
                                <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">
                                    <div class="addproduct-icon">
                                        <h5><i data-feather="info" class="add-info"></i><span>Account setting Information</span></h5>
                                    </div>
                                </div>
                            </div>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <div class="row">
                                        <!-- Address -->
                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="address" class="form-label">{{ __('messages.Address') }} {{ __('messages.Number') }}</label>
                                                <input type="text" name="address" id="address" class="form-control" value="{{ old('address', $userAccountSetting->address ?? '') }}" required>
                                            </div>
                                        </div>
 
                                        <!-- Street, P.O. Box -->
                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="street_po_box" class="form-label">{{ __('messages.Street, P.O. Box') }}</label>
                                                <input type="text" name="street_po_box" id="street_po_box" class="form-control" value="{{ old('street_po_box', $userAccountSetting->street_po_box ?? '') }}" required>
                                            </div>
                                        </div>

                                        <!-- City -->
                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="city" class="form-label">City</label>
                                                <input type="text" name="city" id="city" class="form-control" value="{{ old('city', $userAccountSetting->city ?? '') }}" required>
                                            </div>
                                        </div>

                                        <!-- State -->
                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="province" class="form-label">State</label>
                                                <input type="text" name="province" id="province" class="form-control" value="{{ old('province', $userAccountSetting->province ?? '') }}" required>
                                            </div>
                                        </div>

                                        <!-- Zip Code -->
                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="postal_code" class="form-label">Zip Code</label>
                                                <input type="text" name="postal_code" id="postal_code" class="form-control" value="{{ old('postal_code', $userAccountSetting->postal_code ?? '') }}" required>
                                            </div>
                                        </div>

                                        @if(isset($userAccountSetting))
                                        <!-- Appartment or Suite -->
                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="type_of_property" class="form-label">Type of Property</label>
                                                <select name="type_of_property" id="type_of_property" class="form-control" required>
                                                    <option value="Single Family Residence" {{ $userAccountSetting->type_of_property == 'Single Family Residence' ? 'selected': ''}}>Single Family Residence</option>
                                                    <option value="Multi-Family Residence" {{ $userAccountSetting->type_of_property == 'Multi-Family Residence' ? 'selected': ''}}>Multi-Family Residence</option>
                                                    <option value="Vacation/Short-Term Rental" {{ $userAccountSetting->type_of_property == 'Vacation/Short-Term Rental' ? 'selected': ''}}>Vacation/Short-Term Rental</option>
                                                    <option value="Commercial" {{ $userAccountSetting->type_of_property == 'Commercial' ? 'selected': ''}}>Commercial</option>
                                                    <option value="Land" {{ $userAccountSetting->type_of_property == 'Land' ? 'selected': ''}}>Land</option>
                                                    <option value="Royalties" {{ $userAccountSetting->type_of_property == 'Royalties' ? 'selected': ''}}>Royalties</option>
                                                    <option value="Self-Rental" {{ $userAccountSetting->type_of_property == 'Self-Rental' ? 'selected': ''}}>Self-Rental</option>
                                                    <option value="Other (describe)" {{ $userAccountSetting->type_of_property == 'Other (describe)' ? 'selected': ''}}>Other (describe)</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-6 col-sm-6 col-12" id="other-describe-container" style="display: {{ $userAccountSetting->type_of_property == 'Other (describe)' ? '': 'none';}};">
                                            <div class="mb-3 add-product">
                                                <label for="other_describe" class="form-label">Other (describe)</label>
                                                <input type="text" name="other_describe" id="other_describe" class="form-control" value="{{ $userAccountSetting->other_describe }}" {{ $userAccountSetting->type_of_property == 'Other (describe)' ? 'required': '';}}>
                                            </div>
                                        </div>
                                        @else
                                        <!-- Appartment or Suite -->
                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="type_of_property" class="form-label">Type of Property</label>
                                                <select name="type_of_property" id="type_of_property" class="form-control" required>
                                                    <option value="Single Family Residence">Single Family Residence</option>
                                                    <option value="Multi-Family Residence">Multi-Family Residence</option>
                                                    <option value="Vacation/Short-Term Rental">Vacation/Short-Term Rental</option>
                                                    <option value="Commercial">Commercial</option>
                                                    <option value="Land">Land</option>
                                                    <option value="Royalties">Royalties</option>
                                                    <option value="Self-Rental">Self-Rental</option>
                                                    <option value="Other (describe)">Other (describe)</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-6 col-sm-6 col-12" id="other-describe-container" style="display: none">
                                            <div class="mb-3 add-product">
                                                <label for="other_describe" class="form-label">Other (describe)</label>
                                                <input type="text" name="other_describe" id="other_describe" class="form-control">
                                            </div>
                                        </div>
                                        @endif

                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="fair_rental_days" class="form-label">Fair Rental Days</label>
                                                <input type="number" name="fair_rental_days" id="fair_rental_days" class="form-control" value="{{ old('fair_rental_days', $userAccountSetting->fair_rental_days ?? 0) }}" required>
                                            </div>
                                        </div>

                                        <div class="col-lg-6 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label for="personal_use_days" class="form-label">Personal Use Days</label>
                                                <input type="number" name="personal_use_days" id="personal_use_days" class="form-control" value="{{ old('personal_use_days', $userAccountSetting->personal_use_days ?? 0) }}" required>
                                            </div>
                                        </div>

                                        <!-- Buttons -->
                                        <div class="col-lg-12">
                                            <div class="btn-addproduct mb-4">
                                                <button type="submit" class="btn btn-submit">{{ __('messages.Save') }}</button>
                                            </div>
                                        </div>

                                    </div> <!-- row -->
                                </div> <!-- accordion-body -->
                            </div> <!-- collapseOne -->
                        </div> <!-- accordion-item -->
                    </div> <!-- accordion-card-one -->
                </div> <!-- card-body -->
            </div> <!-- card -->
        </form> <!-- form -->

    </div> <!-- content -->
</div> <!-- page-wrapper -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#type_of_property').on('change', function () {
            if ($(this).val() === 'Other (describe)') {
                // Show the input field and add 'required' attribute
                $('#other-describe-container').show();
                $('#other_describe').prop('required', true);
            } else {
                // Hide the input field and remove 'required' attribute
                $('#other-describe-container').hide();
                $('#other_describe').prop('required', false);
                $('#other_describe').val(''); // Clear the value
            }
        });
    });
</script>

@endsection