@extends('layouts.base')

@section('stylesheets')
    <!-- third party css -->
    <link href="{{ asset('simple-admin/assets/libs/datatables/dataTables.bootstrap4.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/datatables/buttons.bootstrap4.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/datatables/responsive.bootstrap4.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/datatables/select.bootstrap4.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('simple-admin/assets/libs/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet" />
    <link href="{{ asset('simple-admin/assets/libs/switchery/switchery.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- Summernote css -->
    <link href="{{ asset('simple-admin/assets/libs/summernote/summernote-bs4.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('content')

    <!-- start messages row -->
    <div class="row">
        <div class="col-12">
            @include('inc.components.messages')
        </div>
    </div>
    <!-- end messages row -->

    <!-- start profile image -->
    <div class="row">
        <div class="col-md-12">
            <div class="p-0 text-center">
                <div class="member-card">
                    <div class="avatar-xxl member-thumb mb-2 center-page mx-auto">
                        @if($facility->logo)
                            <img src="{{ asset('storage/images/facilities/medium/'. $facility->logo) }}" class="rounded-circle img-thumbnail" alt="profile-image">
                        @else
                            <img src="{{ asset('simple-admin/assets/images/no-image.jpg') }}" class="rounded-circle img-thumbnail" alt="profile-image">
                        @endif
                        <i class="mdi mdi-star-circle member-star text-success" title="verified user"></i>
                    </div>

                    <div class="">
                        <h5 class="mt-3">
                            {{ $facility->name }}
                        </h5>
                    </div>

                    <p class="text-muted"></p>

                    <button class="btn btn-icon btn-teal waves-effect waves-light" data-toggle="modal" data-target="#edit_facility_modal">
                        <i class="far fa-edit"></i>
                        Edit Facility
                    </button>

                </div>

            </div>
            <!-- end card-box -->

        </div>
        <!-- end col -->
    </div>
    <!-- end profile image -->

    <div class="mt-5">
        <ul class="nav nav-tabs tabs-bordered">
            <li class="nav-item">
                <a href="#personnel" data-toggle="tab" aria-expanded="false" class="nav-link active">
                    Personnel
                </a>
            </li>
            <li class="nav-item">
                <a href="#certifications" data-toggle="tab" aria-expanded="true" class="nav-link">
                    Certificates
                </a>
            </li>
            <li class="nav-item">
                <a href="#vaccinations" data-toggle="tab" aria-expanded="true" class="nav-link">
                    Vaccinations
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="personnel">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- facility personnel table -->
                        <div class="col-sm-12">
                            <div class="card-box">
                                <h5 class="mt-0 font-14 mb-3">Personnel Table History</h5>
                                <div class="row mb-3">
                                    <div class="col-12 ">
                                        <button  class="btn btn-icon btn-teal waves-effect waves-light float-right" data-toggle="modal" data-target="#add-personnel-modal">
                                            <i class="fa fa-plus-circle"></i>
                                            Add Personnel
                                        </button>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="personnel-table" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone Number</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        @foreach($facility->personnel as $staff)
                                            <tr>
                                                <td>{{ $staff->user->first_name }} {{ $staff->user->last_name }}</td>
                                                <td>{{ $staff->user->email }}</td>
                                                <td>{{ $staff->user->phone_number }}</td>
                                                <td>
                                                    @if($staff->user->status == 1)
                                                        <span class="badge badge-success badge-pill">ENABLED</span>
                                                    @elseif($staff->user->status == 2)
                                                        <span class="badge badge-danger badge-pill">DISABLED</span>
                                                    @elseif($staff->user->status == 3)
                                                        <span class="badge badge-warning badge-pill">BLOCKED</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('users.show', $staff->user->id) }}" class="btn btn-icon btn-outline-info waves-effect waves-light">
                                                        <i class="far fa-eye"></i>
                                                        View
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- /facility personnel table -->
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="certifications">
                <div class="col-sm-12">
                    <div class="card-box">
                        <h5 class="mt-0 font-14 mb-3">Certificates</h5>

                        <div class="table-responsive">
                            <table id="certificates-table" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Code</th>
                                    <th>Patient</th>
                                    <th>Facility</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

                                <tbody>
                                @foreach($facility->certifications as $certificate)
                                    <tr>
                                        <td>
                                            @if($certificate->vaccinations->count() == 1)
                                                <span class="btn btn-lg badge-success badge-pill">1</span>
                                            @elseif($certificate->vaccinations->count() == 2)
                                                <span class="btn btn-lg badge-info badge-pill">2</span>
                                            @elseif($certificate->vaccinations->count() == 3)
                                                <span class="btn btn-lg badge-warning badge-pill">3</span>
                                            @else
                                                <span class="btn btn-lg badge-danger badge-pill">3+</span>
                                            @endif
                                        </td>
                                        <td>{{ $certificate->code }}</td>
                                        <td>{{ $certificate->patient->first_name }} {{ $certificate->patient->last_name }}</td>
                                        <td>{{ $certificate->facility->name }}</td>
                                        <td>
                                            <a href="{{ route('patients.show', $certificate->patient_id) }}" class="btn btn-icon btn-outline-info waves-effect waves-light">
                                                <i class="far fa-eye"></i>
                                                View
                                            </a>

                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="vaccinations">
                <div class="col-sm-12">
                    <div class="card-box">
                        <h5 class="mt-0 font-14 mb-3">Vaccinations</h5>

                        <div class="table-responsive">
                            <table id="vaccination-history-table" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Vaccine</th>
                                    <th>Batch Number</th>
                                    <th>Dose</th>
                                    <th>Next Dose Date</th>
                                    <th>Personnel</th>
                                    <th>Place of Vaccination</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

                                <tbody>
                                @foreach($facility->vaccinations as $vaccination)
                                    <tr>
                                        <td>{{ $vaccination->vaccination_date }}</td>
                                        <td>{{ $vaccination->vaccine->product_name }}</td>
                                        <td>{{ $vaccination->batch_number }}</td>
                                        <td>
                                            @if($vaccination->dose == 1)
                                                1ST DOSE
                                            @elseif($vaccination->dose == 2)
                                                2ND DOSE
                                            @elseif($vaccination->dose == 3)
                                                BOOSTER SHOT
                                            @elseif($vaccination->dose == 4)
                                                OTHER
                                            @endif
                                        </td>
                                        <td>{{ $vaccination->next_dose_date }}</td>
                                        <td>{{ $vaccination->issuedBy->first_name }} {{ $vaccination->issuedBy->last_name }}</td>
                                        <td>{{ $vaccination->place_of_vaccination }}</td>
                                        <td>
                                            <a href="#" class="btn btn-icon btn-warning waves-effect waves-light">
                                                <i class="far fa-edit"></i>
                                                Edit
                                            </a>
                                            <a href="#" class="btn btn-icon btn-outline-danger waves-effect waves-light">
                                                <i class="fa fa-trash"></i>
                                                Remove
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('facilities::inc.components.modals.facilities.edit_facility_modal')
    @include('facilities::inc.components.modals.personnel.add_personnel_modal')
@endsection

@section('scripts')
    <script src="{{ asset('simple-admin/assets/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/switchery/switchery.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/select2/select2.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/bootstrap-filestyle2/bootstrap-filestyle.min.js') }}"></script>

    <!-- Required datatable js -->
    <script src="{{ asset('simple-admin/assets/libs/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <!-- Buttons examples -->
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.keyTable.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/buttons.print.min.js') }}"></script>

    <script src="{{ asset('simple-admin/assets/libs/bootstrap-filestyle2/bootstrap-filestyle.min.js') }}"></script>

    <!-- Responsive examples -->
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/responsive.bootstrap4.min.js') }}"></script>

@endsection

@section('page_scripts')
    <script>
        $(document).ready(function () {
            let a = $("#personnel-table").DataTable({
                lengthChange: !1,
                buttons: ["copy", "excel", "pdf"],
                order:[[0, 'desc']]
            });

            let b = $("#vaccination-history-table").DataTable({
                lengthChange: !1,
                buttons: ["copy", "excel", "pdf"],
                order:[[0, 'desc']]
            });

            let c = $("#certificates-table").DataTable({
                lengthChange: !1,
                buttons: ["copy", "excel", "pdf"],
                order:[[0, 'desc']]
            });

            a.buttons().container().appendTo("#personnel-table_wrapper .col-md-6:eq(0)")

            b.buttons().container().appendTo("#vaccination-history-table_wrapper .col-md-6:eq(0)")

            c.buttons().container().appendTo("#certificates-table_wrapper .col-md-6:eq(0)")
        });
    </script>
@endsection