@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">

                <a class="col-md-2 btn btn-dark" href="{{ url()->previous() }}"> عودة </a>
                <br> <br>
                <!--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.rentUpdate', $item->id) }}"
                                    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">
                                        <div class="row mb-5">
                                            @include('client.applications.applicationStatusMsg')
                                            @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="{{ $item->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="{{ $item->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="{{ $item->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="{{ $item->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 }}" @if($item->payments_count == $i) selected @endif>{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>

                                            <div class="col-md-12 pt-4" id="payment_dates_section" @if(!$item->payments_count) style="display: none;" @endif>
                                                <label class="fs-5 fw-semibold mb-2 text-primary">تواريخ استحقاق الدفعات</label>
                                                <div class="row" id="payment_dates_container">
                                                    @if($item->paymentDates && $item->paymentDates->count() > 0)
                                                        @foreach($item->paymentDates as $paymentDate)
                                                            <div class="col-md-6 pt-3">
                                                                <label class="fs-6 fw-semibold mb-2">تاريخ الاستحقاق {{ $paymentDate->payment_number }}</label>
                                                                <input type="date" class="form-control" name="payment_due_dates[]" required
                                                                    value="{{ $paymentDate->due_date ? $paymentDate->due_date->format('Y-m-d') : '' }}">
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                                <small class="text-muted">سيتم ظهور حقول تواريخ الاستحقاق حسب عدد الدفعات التي تختارها.</small>
                                            </div>

                                        </div>
                                    </div>

                                    <!--begin::Submit-->
                                    <button type="submit" class="btn btn-primary" id="kt_careers_submit_button">
                                        تحديث البيانات
                                    </button>
                                    <!--end::Submit-->

                                </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