@extends('admin.layout.index')
@section('content')
    @include('admin.layout.nav', ['title' => trans('language.dashboard')])
    <div class="d-flex flex-column-fluid">
        <div class="container-fluid">
            <div id="kt_app_content" class="app-content flex-column-fluid">

                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <!--begin::Careers main-->
                    <div class="">
                        <!--begin::Content-->
                        <div class="card bg-body me-xl-9 mb-9 mb-xl-0">
                            <div class="card-body">
                                <h3 class="text-primary" style="font-weight: bolder">بيانات الإيجار</h3>
                                <p class="text-muted">أدخل بيانات عقد الإيجار السنوي لأول مرة، التعديلات لاحقًا تتم عن طريق
                                    الباحث.</p>
                                <hr>
                                <form action="{{ route('client.applications.rentStore') }}" enctype="multipart/form-data"
                                    class="form mb-15 fv-plugins-bootstrap5 fv-plugins-framework" method="post"
                                    id="kt_careers_form">
                                    @csrf
                                    <div class="col-md-12">
                                        <!--begin:: Names inputs -->
                                        <div class="row mb-5">
                                            @include('admin.layout.alert')

                                            <div class="col-md-6 fv-row fv-plugins-icon-container pt-4">
                                                <label class="required fs-5 fw-semibold mb-2">مبلغ الإيجار السنوي
                                                    (ريال)</label>
                                                <input required type="number" class="form-control"
                                                    placeholder="مثال: 18000" value="{{ old('aqar_rent_amount') }}"
                                                    name="aqar_rent_amount">
                                            </div>

                                            <div class="col-md-6 fv-row fv-plugins-icon-container pt-4">
                                                <label class="required fs-5 fw-semibold mb-2">تاريخ بداية العقد</label>
                                                <input type="date" class="form-control" required
                                                    value="{{ old('aqar_contract_start') }}" name="aqar_contract_start">
                                            </div>

                                            <div class="col-md-6 fv-row fv-plugins-icon-container pt-4">
                                                <label class="required fs-5 fw-semibold mb-2">تاريخ نهاية العقد</label>
                                                <input type="date" class="form-control" required
                                                    value="{{ old('aqar_contract_expire') }}" name="aqar_contract_expire">
                                            </div>

                                            <div class="col-md-6 fv-row fv-plugins-icon-container pt-4">
                                                <label class="required fs-5 fw-semibold mb-2">رقم العقد الإلكتروني</label>
                                                <input type="text" class="form-control"
                                                    placeholder="رقم العقد في منصة إيجار / سكني" required
                                                    value="{{ old('sadad_number') }}" name="sadad_number">
                                            </div>

                                            <div class="col-md-12 pt-4">
                                                <label class="required fs-5 fw-semibold mb-2">عدد الدفعات خلال السنة</label>
                                                <select style="height: 40px !important;" id="payments_count" required
                                                    class="form-control" name="payments_count">
                                                    <option value="">اختر عدد الدفعات</option>
                                                    @for ($i = 1; $i <= 12; $i++)
                                                        <option value="{{ $i }}">{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>

                                            <div class="col-md-12 pt-4" id="payment_dates_section" style="display: none;">
                                                <label class="fs-5 fw-semibold mb-2 text-primary">تواريخ استحقاق
                                                    الدفعات</label>
                                                <div class="row" id="payment_dates_container">
                                                    <!-- Dynamic date fields will be added here -->
                                                </div>
                                                <small class="text-muted">سيتم ظهور حقول تواريخ الاستحقاق حسب عدد الدفعات
                                                    التي تختارها.</small>
                                            </div>

                                            <!--begin::Submit-->
                                            <div class="col-md-12 pt-5">
                                                <button type="submit" class="btn btn-primary"
                                                    id="kt_careers_submit_button">
                                                    حفظ البيانات
                                                </button>
                                            </div>
                                            <!--end::Submit-->

                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--end::Content-->

                    </div>
                    <!--end::Careers main-->
                </div>
                <!--end::Content container-->
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        // Dynamic payment dates based on payments_count
        $("#payments_count").on('change', function() {
            var count = parseInt($(this).val());
            var container = $("#payment_dates_container");
            var section = $("#payment_dates_section");

            container.empty();

            if (count > 0) {
                section.show();
                for (var i = 1; i <= count; i++) {
                    var html = `
                        <div class="col-md-6 pt-3">
                            <label class="fs-6 fw-semibold mb-2">تاريخ الاستحقاق ${i}</label>
                            <input type="date" class="form-control" name="payment_due_dates[]" required>
                        </div>
                    `;
                    container.append(html);
                }
            } else {
                section.hide();
            }
        });
    </script>
@endsection