@extends('layouts.app')

@section('content')

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

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

                        <input type="hidden" name="prisoner_id" id="dependent_prisoner_id" value="">
                        <input type="hidden" name="judgment_end_date" id="dependent_prisoner_end_judgement" value="">
                    </td>

                    <td class="tx-align-center" id="dependent_prisoner_nationality"></td>

                    <td class="tx-align-center" id="dependent_prisoner_file"></td>

                    <td class="tx-align-center">
                        <img
                            id="dependent_prisoner_image"
                            src="{{ 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">
            <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="">
                            </div>
                            <div class="col-3">
                                <input  type="text" class="input_validation" name="second_name" id="second_name" placeholder="الاسم الثاني" value="">
                            </div>
                            <div class="col-3">
                                <input  type="text" class="input_validation" name="third_name" id="third_name" placeholder="الاسم الثالث" value="">
                            </div>
                            <div class="col-3">
                                <input  type="text" class="input_validation" name="last_name" id="last_name" placeholder="الاسم الرابع" value="">
                            </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=""
                                    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 }}">{{ $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 }}">
                                            {{ $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="">
                        </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="">
                    </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="">
                    </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="">
                        </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="">
                        </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 date-hijri req" readonly  placeholder="- - -" value="">
                        </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/*">
                        </div>
                    </div>

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

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

                </div>

            </div>

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