@extends('layouts.contentLayoutMaster')

@php
$breadcrumbs = [[['link' => route('sponsors.index'), 'name' => "الكفلاء"], ['link' => route('sponsors.edit',$sponsor), 'name' => "مشاهدة معلومات الكفيل"]],['title'=> 'مشاهدة']];
@endphp

@section('title', 'مشاهدة معلومات الكفيل')

@section('content')

@component('components.forms.formCard',['title' => sprintf('مشاهدة معلومات الكفيل : <span class="text-danger"> %s </span>', $sponsor->sponsor_name)])


<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 class="row mb-1">
    @foreach($sponsor->contactOfficers as $contact_officer)
    <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="ادخل اسم مسئول الاتصال"  value="{{$contact_officer->officer_name}}"/>
            </div>
            <div class="col-md">
                <x-inputs.text.Input  icon="phone" label="الهاتف" name="sponsor_contact_officer[${officerCount}][phone]" placeholder="الهاتف" value="{{$contact_officer->phone}}"/>
            </div>
            <div class="col-md">
                <x-inputs.text.Input icon="email" label="البريد الالكتروني" name="sponsor_contact_officer[${officerCount}][email]" placeholder="البريد الالكتروني" value="{{$contact_officer->email}}"/>
            </div>

        </div>
    </div>
    @endforeach
</div>
<div class="col-12 text-center mt-2">
    <x-inputs.link route="sponsors.index">عودة</x-inputs.link>
</div>

    @endcomponent

    @endsection