@extends('layouts.app')

@section('content')

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

        <!-- Page Title -->
        <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">حفظ </button>

        </div>

        <!-- بيانات التابع -->
        <div class="row">
            <!-- Avatar Uploader -->
            <div class="col-lg-1">
                <div
                    data-src="{{ asset($dependent->dependent_image) ?? asset('assets/img/avatar.jpg') }}"
                    class="px-media radius-g ratio-1x1 mb-15 ratio-none"
                    style="background-image: url({{ asset($dependent->dependent_image) ?? asset('assets/img/avatar.jpg') }});"
                >
                </div>

            </div>

            <div class="col-lg-11">
                <!-- Table -->
                <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">تاريخ الميلاد</th>
                            </tr>
                        </thead>

                        <tbody class="fs-13">
                            <tr>
                                <td>{{ $dependent->full_name }}</td>
                                <td class="tx-align-center form-ui gray-form">{{ $dependent->identity_number }}</td>
                                <td class="tx-align-center">{{ optional($dependent->nationality)->name }}</td>
                                <td class="tx-align-center">{{ config("static.gender.$dependent->gender") }}</td>
                                <td class="tx-align-center">{{ $dependent->birth_date_hijri }}</td>
                                <input type="hidden" name="dependent_id" value="{{ $dependent->id }}">
                            </tr>
                        </tbody>

                    </table>
                </div>
                <!-- // Table -->
            </div>

        </div>

        <!-- بيانات النزيلة -->
        <div class="row">
            <!-- Avatar Uploader -->
            <div class="col-lg-1">
                <div
                    data-src="{{ ($prisoner->images()->imageType('image')) ? asset(optional($prisoner->images()->imageType('image')->first())->path) : asset('assets/img/avatar.jpg') }}"
                    class="px-media radius-g ratio-1x1 mb-15 ratio-none"
                    style="background-image: url({{ ($prisoner->images()->imageType('image')) ? asset(optional($prisoner->images()->imageType('image')->first())->path) : asset('assets/img/avatar.jpg') }});"
                >
                </div>
            </div>
            <div class="col-lg-11">
                <!-- Table -->
                <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">رقم الملف</th>
                            </tr>
                        </thead>

                        <tbody class="fs-13">

                            <tr>
                                <td>{{ $prisoner->full_name }}</td>
                                <td class="tx-align-center form-ui gray-form">{{ $prisoner->identity_number }}</td>
                                <td class="tx-align-center">{{ optional($prisoner->nationality)->name }}</td>
                                <td class="tx-align-center">{{ optional($prisoner->prisoner_detail)->prisoner_number }}</td>
                                <td class="tx-align-center">{{ $prisoner->file_number }}</td>
                                <input type="hidden" name="prisoner_id" value="{{ $prisoner->id }}">
                            </tr>

                        </tbody>

                    </table>
                </div>
                <!-- // Table -->
            </div>

        </div>

        <div class="row">
            <div class="col-lg-12">

                <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-center">تاريخ الخروج</th>
                                <th class="tx-align-center">وقت الخروج</th>
                                <th class="tx-align-center">الغرض من الخروج</th>
                            </tr>
                        </thead>

                        <tbody class="fs-13">

                            <tr>
                                <td class="tx-align-center" id="exit_date">{{ optional($dependent->dependent_detail)->exit_date_hijri }}</td>
                                <td class="tx-align-center">{{ optional($dependent->dependent_detail)->exit_time }}</td>
                                <td>{{ optional($dependent->dependent_detail)->exit_purpose }}</td>
                            </tr>

                        </tbody>

                    </table>
                </div>

            </div>
        </div>



        <div class="widget-block mb-30 white-bg radius-g pdb-5 form-ui gray-form">

            <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20">بيانات تسجيل عودة</h3>


            <div class="widget-content pdx-20">
                <div>
                    <div class="widget-block pd-30 mb-15 white-bg radius-g form-ui gray-form">

                        <div class="row">

                            <div class="col col-12 col-md-4 col-lg-3">
                                <label class="mb-5">تاريخ الرجوع</label>
                                <div class="pos-rel">
                                    <input type="text" class="date-hijri req" placeholder="- - -" name="return_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="time" class="req" placeholder="- - -" name="return_time"  >
                                </div>
                            </div>

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

                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <button class="btn primary fluid">حفظ </button>
        </div>

    </form>

@endsection

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