@extends('layouts.contentLayoutMaster')

@php
$breadcrumbs = [[['link' => route('sponsors.index'), 'name' => "الكفلاء"], ['link' => route('sponsors.create'), 'name' => "اضافة نوع  طلب تجديد جديد"]],['title'=> 'اضافة']];
@endphp

{{--@section('title', 'اضافة كفيل جديد')--}}

@section('content')

    @component('components.')
@component('components.forms.formCard',['title' => 'اضافة كفيل جديد'])

{!! Form::open(['route' => 'sponsors.store','method'=>'POST' , 'onsubmit' => 'showLoader()'])  !!}

<x-ui.divider>معلومات الكفيل</x-ui.divider>

    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input icon="home" label="اسم الكفيل" name="sponsor_name" placeholder="ادخل اسم الكفيل" />
        </div>

        <div class="col-md">
            <x-inputs.select.generic label="نوع الكفيل" name="sponsor_type" data-placeholder="اختر نوع الكفيل" data-msg="رجاء نوع الكفيل" :options="App\Models\Sponsor::sponsorTypes()" />
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input icon="home" label="الرقم الضريبي/رقم الهوية " name="sponsor_ID" placeholder="الرقم الضريبي/رقم الهوية " />
        </div>
        <div class="col-md">
            <x-inputs.text.Input icon="home" label="العنوان" name="address" placeholder="ادخل العنوان " />
        </div>
    </div>
<div class="row mb-1">
    <div class="col-md">
        <x-inputs.text.Input icon="home" label="رمز البريد" name="postal_code" placeholder="ادخل رمز البريد" />
    </div>
    <div class="col-md">
        <x-inputs.text.Input icon="home" label="الهاتف" name="phone" placeholder="الهاتف" />
    </div>
</div>

<div class="row mb-1">
    <div class="col-md">
        <x-inputs.text.Input icon="home" label="البريد الالكتروني" name="email" placeholder="ادخل البريد الالكتروني" />
    </div>
    <div class="col-md">
        <x-inputs.number.Input min="1" label="الحد الاقصى" icon="dollar-sign" name="max_limit" placeholder="ادخل الحد الاقصى" data-msg="ادخل قيمة الدولة بشكل صحيح" />
    </div>
    <div class="col-md">
        <x-inputs.number.Input  min="1" label="حد المطالبة المالي" icon="dollar-sign" name="financial_limit" placeholder="حد المطالبة المالي" data-msg="ادخل حد المطالبة المالي" />
    </div>

    <div class="col-md">
        <x-inputs.number.Input max="27" min="1" class="form-control flatpickr-basic" label="حد المطالبة الزمني (يوم من كل شهر ميلادي)" icon="calendar" name="time_limit" placeholder=" حد المطالبة الزمني- مثال يوم 26 من كل شهر " data-msg=" ادخل حد المطالبة الزمني رقم اليوم" />
    </div>
</div>
    <div class="row mb-1">
        <div class="col-md">
            <label class="form-label mb-1" for="active"> الحالة </label>
            <x-inputs.checkbox name="active">مفعل </x-inputs.checkbox>
        </div>
    </div>

<x-ui.divider>معلومات مسئولي الاتصال</x-ui.divider>
    <div id="contactOfficers">

    </div>
<div class="row mb-1">
    <div class="col-4 text-right mt-2">
        <button type="button" class="btn btn-warning float-start" id="addContactOfficer">إضافة مسئول اتصال</button>
    </div>
</div>

    <div class="col-12 text-center mt-2">
        <x-inputs.submit>اضافة كفيل جديد</x-inputs.submit>
        <x-inputs.link route="sponsors.index">عودة</x-inputs.link>
    </div>
    {!! Form::close() !!}
    @endcomponent

    @endsection


@section('page-script')
    <script>
        validationErrors = [];
        @if(isset($errors))
            var validationErrors = {!! json_encode($errors->toArray()) !!};
        @endif
        $(document).ready(function() {
            let officerCount = 0;
            // Function to add a new contact officer form
                function addContactOfficerForm(officerData=null) {
                    officerCount++;
                    const newContactOfficerForm =`
                        <div class="contact-officer">
                            <div class="row mb-1">
                                <div class="col-md">
                                    <x-inputs.text.Input icon="home" label="اسم مسئول الاتصال" name="sponsor_contact_officer[${officerCount}][contact_officer_name]" placeholder="ادخل اسم مسئول الاتصال" />
                                </div>
                                <div class="col-md">
                                    <x-inputs.text.Input  icon="phone" label="الهاتف" name="sponsor_contact_officer[${officerCount}][phone]" placeholder="الهاتف" />
                                </div>
                                <div class="col-md">
                                    <x-inputs.text.Input icon="email" label="البريد الالكتروني" name="sponsor_contact_officer[${officerCount}][email]" placeholder="البريد الالكتروني"/>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="remove-officer btn btn-danger mt-2">إزالة</button>
                                </div>
                            </div>
                            <!-- Add more contact officer fields here -->
                        </div>`;

                    $('#contactOfficers').append(newContactOfficerForm);

                    if (officerData) {
                        const contactOfficerNameInput = document.querySelector('input[name="sponsor_contact_officer[' + officerCount + '][contact_officer_name]"]');
                        const emailInput = document.querySelector('input[name="sponsor_contact_officer[' + officerCount + '][email]"]');
                        const phoneInput = document.querySelector('input[name="sponsor_contact_officer[' + officerCount + '][phone]"]');
                        contactOfficerNameInput.value = officerData.contact_officer_name;
                        emailInput.value = officerData.email;
                        phoneInput.value = officerData.phone;
                    }

                }

            // Handle "Add Contact Officer" button click
            $('#addContactOfficer').click(function() {
                addContactOfficerForm();
            });


            // Check if there are old contract officers
            @if(old('sponsor_contact_officer'))
            let oldOfficers = {!! json_encode(old('sponsor_contact_officer')) !!};

            Object.entries(oldOfficers).forEach(([key, value]) => {
                addContactOfficerForm(value);
            });

            renderValidationError()
            @endif

            // Handle removal of contact officer forms
            $('#contactOfficers').on('click', '.remove-officer', function() {
                $(this).closest('.contact-officer').remove();
            });

            function renderValidationError(){

                Object.keys(validationErrors).forEach(key => {
                    console.log(key)
                    keyParts = key.split('.');
                    let outputString = keyParts[0]+'['+keyParts[1]+']['+keyParts[2]+']';
                    const fieldErrors = validationErrors[key];
                    console.log(outputString)
                    const input = $(`input[name="${outputString}"]`);
                    // Assuming you want to display the first error message for each field
                        input.addClass('is-invalid'); // Add a class for styling (if needed)
                        input.parent().addClass('is-invalid'); // Add a class for styling (if needed)
                        input.parent().append(`<span class="invalid-feedback">${validationErrors[key]}</span>`);
                });
            }
        });

    </script>

@endsection