@extends('layouts.app')

@section('content')
<div class="col col-lg-9 pd-30">
    <!-- 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>
    </div> --}}
    <!-- // Page Title -->
@component('components.print')
    ارشيف تابع
@endcomponent
    <!-- Grid -->
    <div class="row gpx-20">
        <!-- Tails Panel -->
        <!-- Column -->
        <div class="col col-lg-6 ">
            <!-- Details Widget -->

            <div class="widget-block mb-30 white-bg radius-g pdb-20 form-ui gray-form">
                <!-- Title -->
                <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20 primary">  بيانات التابع</h3>
                <!-- Content -->
                <div class="widget-content pdx-20">
                    <!-- Informations List -->
                    <ul class="info-list reset-list fs-13 lineheight-160">
                    <li class="mb-5"><span class="gray-color inline-block">اسم التابع</span> : {{$follower->name}}</li>
                    <li class="mb-5"><span class="gray-color inline-block">رقم الهوية</span> : {{$follower->id_number}}</li>
                    </ul>


                </div>
                <!-- // Content -->
            </div>


        </div>

        <div class="col col-lg-6">
            <!-- Details Widget -->

            <div class="widget-block mb-30 white-bg radius-g pdb-20 form-ui gray-form">
                <!-- Title -->
                <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20 primary">بيانات النزيل</h3>
                <!-- Content -->
                <div class="widget-content pdx-20">

                    <h4 class="primary-color fs-14 mb-10"></h4>
                    <!-- Informations List -->
                    <ul class="info-list reset-list fs-13 lineheight-160">
                    <li class="mb-5"><span class="gray-color inline-block">اسم النزيل</span> : {{ $follower->prisoner->full_name }}</li>
                    <li class="mb-5"><span class="gray-color inline-block">رقم الهوية</span> : {{$follower->prisoner->identity_number}}</li>
                    </ul>


                </div>
                <!-- // Content -->
            </div>


        </div>

    </div>
    <!-- // Grid -->

        <!-- Table -->
        <div class="responsive-table mb-30">
            <table class="table striped bordered" data-page-length="12">
                <!-- Table Head -->
                <thead>
                    <tr class="primary-bg fs-13">
                        <!-- Column -->
                        <th class="tx-align-start">  #</th>
                        <!-- Column -->
                        <th class="tx-align-center">تاريخ الخروج</th>
                        <!-- Column -->
                        <th class="tx-align-center">تاريخ الدخول</th>
                        <!-- Column -->
                        <th class="tx-align-center">مستلم التابع</th>
                        <!-- Column -->
                        <th class="tx-align-center">صلة القرابة</th>
                        <!-- Column -->
                        <th class="tx-align-center">هاتف</th>
                        <!-- Column -->
                    </tr>
                </thead>
                <!-- Table Body -->
                <tbody class="fs-13">
                    <!-- Row -->
                   @foreach($followerOperation as  $operation)
                   <tr>
                    <!-- Column -->
                    <td >{{ $loop->iteration }}</td>
                    <td >{{  App\Lib\Test\Src\Facades\LaravelHijrian::hijri($operation->out_date)->format('Y-m-d')  }}</td>
                    <td >{{ !empty($operation->return_date)? Hijrian::hijri($operation->return_date)->format('Y-m-d') : '-' }}</td>
                    <td >{{ $operation->recipient_name }}</td>
                    <td >{{ $operation->relation }}</td>
                    <td >{{ $operation->mobile }}</td>
                    <!-- Column -->

                    <!-- // Column -->
                </tr>
                   @endforeach
                    <!-- // Row -->
                </tbody>
                <!-- // Table Body -->
            </table>
        </div>
        <!-- // Table -->
</div>
@endsection