@extends('layouts.admin', ['title' => 'Officer Details'])

<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@push('stylesheets')



@endpush

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="profile-foreground position-relative mx-n4 mt-n4">
                <div class="profile-wid-bg">
                    <img src="assets/images/profile-bg.jpg" alt="" class="profile-wid-img" />
                </div>
            </div>
            <div class="pt-4 mb-4 mb-lg-3 pb-lg-4 profile-wrapper">
                <div class="row g-4">
                    <div class="col">
                        <div class="p-2">
                            <h3 class="text-white mb-1">{{$officer_details->name}}</h3>
                        </div>
                    </div>
                </div>
                <!--end row-->
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div>
                        <div class="d-flex profile-wrapper">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#overview-tab" role="tab">
                                        <i class="ri-airplay-fill d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Overview</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content pt-4 text-muted">
                            <div class="tab-pane active" id="overview-tab" role="tabpanel">
                                <div>
                                    <div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="card">
                                                    <div class="card-body" style="margin: 50px;">
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Name</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$officer_details->name}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Conatct</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$officer_details->phone_number}} </p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Staff Number</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$officer_details->staff_number}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Position</b></label>
                                                            </div>
                                                            @foreach($officer_details->roles as $position)
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$position->role}}</p>
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                        <!--  -->
                                                        

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>District</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$officer_details->district}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Email</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$officer_details->email}}</p>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-3">
                                                            <div class="col-12 col-lg-6">
                                                                <label for=""><b>Address</b></label>
                                                            </div>
                                                            <div class="col-12 col-lg-6">
                                                                <p>{{$officer_details->address}}</p>
                                                            </div>
                                                        </div>
                                                        

                                                    </div><!-- end card body -->
                                                </div><!-- end card -->
                                            </div><!-- end col -->
                                        </div><!-- end row -->
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </div>
                            <!--end tab-content-->
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div><!-- container-fluid -->
    </div><!-- End Page-content -->
</div>


@endsection

@push('scripts')

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>

$(document).ready(function () {



});


</script>


@endpush