@extends('voyager::master')

@section('page_title', 'National ID')

@section('page_header')
    <div class="page-header">
        <div class="row align-items-center py-2">
            <div class="col-sm mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}" src="{{ asset('thumb.png') }}"
                        width="38" alt="img">
                    <div class="w-0 flex-grow pl-2">
                        <h1 class="page-header-title mb-0">{{ __('form.national_id') }}</h1>
                        <p class="page-header-text m-0">{{ __('form.national.subtitle') }}</p>

                        @if (in_array('edit', $permission) || in_array('add', $permission))
                            @php $edit = true @endphp
                            <a href="{{ route('nationalId.create') }}"
                                class="btn btn-sm btn-success btn-add-new pull-right">
                                <i class="voyager-plus"></i> <span>{{ __('voyager::generic.add_new') }}</span>
                            </a>
                        @else
                            @php $edit = false @endphp
                        @endif

                    </div>



                </div>
            </div>
        </div>
    </div>
@stop

@section('content')
    @include('_partials.alerts')

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-bordered">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table" id="dataTable">
                            <thead>
                                <tr>
                                    <th>{{ __('datatable.sn') }}</th>
                                    <th>{{ __('voyager::generic.name') }}</th>
                                    <th>{{ __('form.national_id') }}</th>
                                    <th>{{ __('form.mobile_number') }}</th>
                                    <th>{{ __('form.gender.gender') }}</th>
                                    <th>{{ __('voyager::generic.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (isset($paginatedData))
                                    @foreach ($paginatedData as $nationalID)
                                        <tr>
                                            <td>{{ $loop->index + 1 }}</td>
                                            <td>{{ checkAndReturnValue($nationalID, 'passportNameArb') }}<br>


                                            </td>
                                            <td>
                                                {{ checkAndReturnValue($nationalID, 'nationalId') }}

                                            </td>
                                            <td>
                                                {{ checkAndReturnValue($nationalID, 'mobileNo') }}

                                            </td>
                                            <td>
                                                {{ checkAndReturnValue($nationalID, 'gender') }}

                                            </td>
                                            <td>
                                                @if (!checkAndReturnValue($nationalID, 'nationalId') == null || !checkAndReturnValue($nationalID, 'nationalId') == '')
                                                    <a href=" {{ route('nationalId.edit', ['nationalId' => checkAndReturnValue($nationalID, 'nationalId'), 'mobileNo' => checkAndReturnValue($nationalID, 'mobileNo')]) }}"
                                                        title="@if ($edit == true) Edit @else View @endif"
                                                        class="btn btn-sm @if ($edit == true) btn-primary @else btn-warning @endif pull-right edit">
                                                        <i
                                                            class="@if ($edit) voyager-edit @else voyager-eye @endif"></i>
                                                        <span class="hidden-xs hidden-sm">
                                                            @if ($edit)
                                                                {{ __('voyager::generic.edit') }}
                                                            @else
                                                                {{ __('voyager::generic.view') }}
                                                            @endif
                                                        </span>
                                                    </a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>


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

    <!-- Modal for creating/editing national ID -->
    <!-- Modal content -->
@stop

@section('javascript')
    <script>
        $(document).ready(function() {
            var searchLabel = "@lang('datatable.sSearch')";
            var lengthMenuLabel = "@lang('datatable.sLengthMenu')";
            var infoLabel = "@lang('datatable.sInfo')";
            var infoEmptyLabel = "@lang('datatable.sInfoEmpty')";
            var infoFilteredLabel = "@lang('datatable.sInfoFiltered')";
            var loadingRecordsLabel = "@lang('datatable.sLoadingRecords')";
            var processingLabel = "@lang('datatable.sProcessing')";
            var zeroRecordsLabel = "@lang('datatable.sZeroRecords')";

            var firstLabel = "@lang('datatable.oPaginate.sFirst')";
            var lastLabel = "@lang('datatable.oPaginate.sLast')";
            var nextLabel = "@lang('datatable.oPaginate.sNext')";
            var previousLabel = "@lang('datatable.oPaginate.sPrevious')";

            var sortAscendingLabel = "@lang('datatable.oAria.sSortAscending')";
            var sortDescendingLabel = "@lang('datatable.oAria.sSortDescending')";

            $('#dataTable').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                lengthChange: true,
                info: true,
                language: {
                    search: searchLabel,
                    lengthMenu: lengthMenuLabel,
                    info: infoLabel,
                    infoEmpty: infoEmptyLabel,
                    infoFiltered: infoFilteredLabel,
                    loadingRecords: loadingRecordsLabel,
                    processing: processingLabel,
                    zeroRecords: zeroRecordsLabel,
                    paginate: {
                        first: firstLabel,
                        last: lastLabel,
                        next: nextLabel,
                        previous: previousLabel
                    },
                    aria: {
                        sortAscending: sortAscendingLabel,
                        sortDescending: sortDescendingLabel
                    }
                },
            });
        });
    </script>

@stop