@extends('adminlte::page')

@section('title', config('adminlte.title') . ' | Emergency Contacts')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Emergency Contacts</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Emergency Contacts</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')

    {{-- Main Content Card --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif

                    <div class="row mb-2">
                        <div class="col-6">
                            <a href="{{ route('emergency_contacts.create') }}" class="btn btn-success mr-4"><i
                                    class="fa fa-plus"></i> Create new emergency contact</a>
                            @if ($recycleBin->isNotEmpty())
                                @php
                                    $user = Auth::user();
                                    $recycleCount = App\Models\EmergencyContact::onlyTrashed()
                                        ->where('employee_id', $user->id)
                                        ->count();
                                @endphp
                                <button id="recycleBin" class="btn btn-info"><i class="fas fa-trash"></i> Open Recycle Bin
                                    <span class="badge badge-light">{{ $recycleCount }}</span>
                                </button>
                                <script>
                                    let recycleBinOpen = false; // Initially closed

                                    $('#recycleBin').click(function() {
                                        $('#DisRecycle').toggle(); // Show/hide recycle bin section
                                        $('#DisData').toggle(); // Toggle normal data display

                                        if (recycleBinOpen) {
                                            // Closing the recycle bin
                                            $('#recycleBin').html(
                                                '<i class="fas fa-trash"></i> Open Recycle Bin <span class="badge badge-light">{{ $recycleCount }}</span>'
                                            );
                                        } else {
                                            // Opening the recycle bin
                                            $('#recycleBin').html(
                                                '<i class="fas fa-trash"></i> Close Recycle Bin <span class="badge badge-light">{{ $recycleCount }}</span>'
                                            );
                                        }

                                        recycleBinOpen = !recycleBinOpen; // Flip the state
                                    });
                                </script>
                            @endif
                        </div>
                    </div>


                    <hr class="bg-secondary">

                    {{-- Statistics Cards --}}
                    @php
                        $totalContacts = $emergencies->count();
                        $primaryContacts = $emergencies->where('primary', 1)->count();
                        $secondaryContacts = $emergencies->where('primary', 0)->count();
                        $deletedContacts = $recycleBin->count();
                    @endphp

                    <div class="row">
                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                            <div class="info-box">
                                <span class="info-box-icon bg-info"><i class="fas fa-address-book"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total</span>
                                    <span class="info-box-number">{{ $totalContacts }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                            <div class="info-box ">
                                <span class="info-box-icon bg-success"><i class="fas fa-star"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Primary</span>
                                    <span class="info-box-number">{{ $primaryContacts }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                            <div class="info-box ">
                                <span class="info-box-icon bg-warning"><i class="fas fa-users"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Secondary</span>
                                    <span class="info-box-number">{{ $secondaryContacts }}</span>
                                </div>
                            </div>
                        </div>
                    </div>


                    {{-- Recycle Bin --}}
                    <div id="DisRecycle" style="display: none;">
                        <div class="card shadow-sm">
                            <div class="card-header bg-danger">
                                <h3 class="card-title">Recycle Bin</h3>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table id="delcontactList" class="table table-striped table-hover w-100">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Relationship</th>
                                                <th>Telephone</th>
                                                <th>Mobile</th>
                                                <th>Type</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($recycleBin as $recycledata)
                                                <tr>
                                                    <td>{{ $recycledata->id }} </td>
                                                    <td>{{ $recycledata->name }}</td>
                                                    <td>{{ $recycledata->relationship }}</td> {{-- Fixed typo in 'relationship' --}}
                                                    <td>{{ $recycledata->telephone }}</td>
                                                    <td>{{ $recycledata->mobile }}</td>
                                                    <td>
                                                        @if ($recycledata->primary == 1)
                                                            Primary
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="btn-group">
                                                            <a href="{{ route('emergency_contacts.restore', ['id' => $recycledata->id]) }}"
                                                                class="btn btn-sm btn-outline-success action-btn"
                                                                title="Restore">
                                                                <i class="fas fa-trash-restore"></i>
                                                            </a>

                                                            <a href="#"
                                                                class="btn btn-sm btn-outline-danger action-btn"
                                                                data-toggle="modal"
                                                                data-target="#binmodal{{ $recycledata->id }}"
                                                                title="Delete"><i class="fa fa-trash"></i></a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                @if (!empty($recycledata->id))
                                                    <!-- Modal -->
                                                    <div class="modal fade" id="binmodal{{ $recycledata->id }}"
                                                        tabindex="-1" aria-labelledby="modal_Delete" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered">
                                                            <div class="modal-content">
                                                                <div class="modal-header bg-light">
                                                                    <h5 class="modal-title" id="exampleModalLabel">Delete
                                                                        Emergency
                                                                        Contact: {{ $recycledata->name }}</h5>
                                                                    <button type="button" class="close"
                                                                        data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body">

                                                                    Are you sure you want to delete
                                                                    <b>{{ $recycledata->name }}</b>?

                                                                </div>
                                                                <div class="modal-footer bg-light">
                                                                    <button type="button" class="btn btn-secondary"
                                                                        data-dismiss="modal">
                                                                        <i class="fa fa-times mr-1"></i>
                                                                        Close</button>
                                                                    <a href="{{ route('emergency_contacts.empty', ['id' => $recycledata->id]) }}"
                                                                        class="btn btn-danger">
                                                                        <i class="fa fa-trash-alt mr-1"></i>
                                                                        Delete</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end modal -->
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>


                    {{-- Data --}}
                    <div id="DisData" style="display: block;">
                        <div class="card shadow-sm">
                            <div class="card-header bg-light">
                                <h3 class="card-title">Emergency Contacts Records</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="contactList" class="table table-striped table-hover w-100">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Relationship</th>
                                                <th>Telephone</th>
                                                <th>Mobile</th>
                                                <th>Type</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($emergencies as $emergency)
                                                <tr>
                                                    <td>{{ $emergency->id }} </td>
                                                    <td>{{ $emergency->name }}</td>
                                                    <td>{{ $emergency->relationship }}</td> {{-- Fixed typo in 'relationship' --}}
                                                    <td>{{ $emergency->telephone }}</td>
                                                    <td>{{ $emergency->mobile }}</td>
                                                    <td>
                                                        @if ($emergency->primary == 1)
                                                            Primary
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="btn-group">

                                                            <a href="{{ route('emergency_contacts.show', $emergency->id) }}"
                                                                class="btn btn-sm btn-outline-secondary action-btn"
                                                                title="View"><i class="fa fa-eye"></i></a>
                                                            <a href="{{ route('emergency_contacts.edit', $emergency->id) }}"
                                                                class="btn btn-sm btn-outline-primary action-btn"
                                                                title="Edit"><i class="fa fa-pen"></i></a>
                                                            <a href="#"
                                                                class="btn btn-sm btn-outline-danger action-btn"
                                                                data-toggle="modal"
                                                                data-target="#modal{{ $emergency->id }}"
                                                                title="Delete"><i class="fa fa-trash"></i></a>
                                                        </div>
                                                    </td>
                                                </tr>

                                                {{-- Modal for this row --}}
                                                <div class="modal fade" id="modal{{ $emergency->id }}" tabindex="-1"
                                                    aria-labelledby="moal_Delete" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header bg-light">
                                                                <h5 class="modal-title" id="deleteModalLabel">Move:
                                                                    {{ $emergency->name }}
                                                                    to the recycle bin</h5>
                                                                <button type="button" class="close"
                                                                    data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                Are you sure you want to move:
                                                                <b>{{ $emergency->name }}</b> to the
                                                                recycle
                                                                bin?
                                                            </div>
                                                            <div class="modal-footer bg-light">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">
                                                                    <i class="fa fa-times mr-1"></i>
                                                                    No, Keep it</button>
                                                                <form
                                                                    action="{{ route('emergency_contacts.destroy', $emergency->id) }}"
                                                                    method="POST">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-danger">
                                                                        <i class="fa fa-trash-alt mr-1"></i>
                                                                        Yes</button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <script>
                                        $(document).ready(function() {
                                            $('#contactList').DataTable({

                                            });
                                            $('#delcontactList').DataTable({

                                            });
                                            $(function() {
                                                $('[data-toggle="tooltip"]').tooltip()
                                            });
                                            $('.action-btn').hover(function() {
                                                $(this).tooltip('show');
                                            }, function() {
                                                $(this).tooltip('hide');
                                            });
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>

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

@section('footer')
    &nbsp;
@stop