@extends('layouts.app')

@section('content')

<form action="{{ route('dependents.update' , $prisoner->id) }}" class="col col-lg-9 pd-30" id="form_request_ajax" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="responsive-table mb-30">
        <table class="table striped bordered" data-page-length="12">

            <thead>
                <tr class="primary-bg fs-13">
                    <th class="tx-align-start">اسم النزيلة</th>
                    <th class="tx-align-center">رقم الهوية</th>
                    <th class="tx-align-center">الجنسية</th>
                    <th class="tx-align-center">رقم الملف</th>
                    <th class="tx-align-center w-110">صورة النزيلة</th>
                </tr>
            </thead>

            <tbody class="fs-13">
                <tr id="prisoner_female_information">

                    <td id="dependent_prisoner_name">{{ $prisoner->full_name }}</td>

                    <td class="tx-align-center form-ui gray-form">

                        <input
                            class="req mt-20"
                            type="text"
                            name="dependent_prisoner_number"
                            id="dependent_prisoner_number"
                            value="{{ $prisoner->identity_number }}"
                            readonly
                        >

                        <input type="hidden" name="prisoner_id" id="dependent_prisoner_id" value="{{ $prisoner->id }}">
                        <input type="hidden" name="judgment_end_date" id="dependent_prisoner_end_judgement" value="{{ $prisoner->judgement_end_date_hijri }}">
                    </td>

                    <td class="tx-align-center" id="dependent_prisoner_nationality">{{ optional($prisoner->nationality)->name }}</td>

                    <td class="tx-align-center" id="dependent_prisoner_file">{{ $prisoner->file_number }}</td>

                    <td class="tx-align-center">
                        <img
                            id="dependent_prisoner_image"
                            src="{{  !empty($imagePath) ? asset($imagePath) : asset('assets/img/avatar.jpg') }}"
                            alt="" width="70"
                            data-default=""
                        >
                    </td>
                </tr>
            </tbody>

        </table>
    </div>


    <div class="repeater">

        <div class="page-title divider-b pdb-10 flexbox align-between align-center-y mb-20">
            <h1 class="reset-block primary-color lineheight-130 fs-20">قائمة التابعين</h1>

            <button class="btn small primary event-target" onclick="return false" data-repeater-create>اضافة تابع <i class="fas fa-plus"></i></button>

            <button class="btn small primary">حفظ </button>
        </div>

        <!-- Repeater Group -->
        <div data-repeater-list="dependents">
            @foreach ($dependents as $dependent)
                <div class="widget-block pd-30 mb-15 white-bg radius-g form-ui gray-form" data-repeater-item>
                    <!-- Layouts -->
                    <div class="row follower-container">

                        <div class="col col-12 col-md-5 col-lg-5">

                            <label class="mb-15">اسم التابع</label>
                            <div class="col form-group justify-content-around">
                                <div class="col-3">
                                    <input
                                        type="text"
                                        class="input_validation"
                                        name="first_name"
                                        id="first_name"
                                        placeholder="الاسم الأول"
                                        value="{{ $dependent->first_name }}"
                                    >
                                </div>
                                <div class="col-3">
                                    <input
                                        type="text"
                                        class="input_validation"
                                        name="second_name"
                                        id="second_name"
                                        placeholder="الاسم الثاني"
                                        value="{{ $dependent->second_name }}"
                                    >
                                </div>
                                <div class="col-3">
                                    <input
                                        type="text"
                                        class="input_validation"
                                        name="third_name"
                                        id="third_name"
                                        placeholder="الاسم الثالث"
                                        value="{{ $dependent->third_name }}"
                                    >
                                </div>
                                <div class="col-3">
                                    <input
                                        type="text"
                                        class="input_validation"
                                        name="last_name"
                                        id="last_name"
                                        placeholder="الاسم الرابع"
                                        value="{{ $dependent->last_name }}"
                                    >
                                </div>
                            </div>

                        </div>

                        <div class="col col-12 col-md-5 col-lg-5">
                            <label class="col-12 mb-15">رقم الهوية</label>

                            <div class="row" dir="ltr">
                                @for ($i = 0; $i < 10; $i++)
                                    <input type="text" data-name_inp="id_number"
                                        style=" display: inline-block;margin-left: 5px; "
                                        value="{{ $dependent->identity_number[$i] }}"
                                        maxlength="1" min="0" max="9"
                                        class="inp_repate  inp_arr_id_number_{{ $i + 1 }} req  inp_repate_id_number_num_{{ $i + 1 }} col-1"
                                        data-inp_repate_num="{{ $i + 1 }}" name="dependents[identity_number[{{ $i }}]]">
                                @endfor
                            </div>
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5">الجنس</label>
                            <select name="gender" class="req">
                                <option value="">-- اختيار --</option>
                                @foreach ( config('static.gender') as $key => $value)
                                    <option value="{{ $key }}" @selected($dependent->gender == $key)>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col col-lg-3">
                            <label class="col col-lg-3">الجنسية</label>
                                <div class="form-group col-12">

                                    <select class="req" name="nationality_id" id="">
                                        <option value="">-- اختيار --</option>
                                        @foreach ($nationalites as $key => $nationality)
                                            <option value="{{ $nationality->id }}" @selected($dependent->nationality_id == $nationality->id)>
                                                {{ $nationality->name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5">تاريخ الميلاد</label>
                            <div class="pos-rel">
                                <input type="text"  name="birth_date_hijri" class="birth_date date-hijri req" value="{{ $dependent->birth_date_hijri }}" placeholder="- - -">
                            </div>
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5">مكان الميلاد</label>
                            <input type="text" name="birth_place" class="req" placeholder="- - -"  value="{{ $dependent->birth_place }}">
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5">رقم شهادة الميلاد</label>
                            <input type="number" min="0" name="birth_certificate_number" class="req" placeholder="- - -" value="{{ $dependent->birth_certificate_number }}">
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5">تاريخ شهادةالميلاد</label>
                            <div class="pos-rel">
                                <input type="text"  name="birth_certificate_date_hijri" class="date-hijri req" placeholder="- - -" value="{{ $dependent->birth_certificate_date_hijri }}">
                            </div>
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5">تاريخ الدخول</label>
                            <div class="pos-rel">
                                <input type="text" name="entry_date_hijri" class="receipt_date date-hijri req" placeholder="- - -" value="{{ $dependent->entry_date_hijri }}">
                            </div>
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5"> تاريخ الخروج الافتراضى</label>
                            <div class="pos-rel out_date_container">
                                <input type="text"  name="exit_date_hijri" class="out_date req" readonly  placeholder="- - -" value="{{ $dependent->exit_date_hijri }}">
                            </div>
                        </div>

                        <div class="col col-12 col-md-4 col-lg-3">
                            <label class="mb-5">صورة التابع</label>
                            <div data-placeholder="- - -" data-btn="اختيار ملف" class="px-uploader" data-uploader="standard">
                                <input
                                    type="file"
                                    name="dependent_image"
                                    class="req"
                                    accept="image/*"
                                    value="{{ $dependent->dependent_image }}"
                                >
                            </div>
                        </div>

                        {{-- <div class="row" style="margin-top: 10px">
                            <div style="display: flex">
                                @if (!empty($dependent->dependent_image))
                                    <a style="margin: 10px" href="{{ asset($dependent->dependent_image) }}"
                                        class="tail-btn white-bg display-block fas fa-file pdx-10 pdy-20 mb-15 radius-g"
                                        target="_blank">مشاهدة صورة التابع</a>

                                @endif
                            </div>
                        </div> --}}

                        <div class="col col-12">
                            <label class="mb-5">ملاحظات</label>
                            <textarea name="notes" placeholder="- - -">
                                {{ $dependent->notes }}
                            </textarea>
                        </div>

                        <button type="button" class="btn tiny square far fa-times-circle danger-color transparent floating" data-repeater-delete></button>

                    </div>

                </div>
            @endforeach
        </div>

    </div>

</form>

@endsection
@section('script')
    <script src="{{ asset('assets/js/repate-inputs_old.js') }}" defer></script>
    <script src="{{ asset('assets/js/pages/dependents/register_dependent.js') }}" defer></script>
@endsection