@extends('admin.layouts.layout')
@section('title', 'Data Pegawai | Skripsi 2024')
@section('nav', 'Data Pegawai')
@section('content')
        <div class="pagetitle">
        <nav>
            <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-black">Dashboard</a></li>
            <li class="breadcrumb-item">Pegawai</li>
            <li class="breadcrumb-item active">Data Pegawai</li>
            </ol>
        </nav>
        </div><!-- End Page Title -->

        <div class="content">
            @if (Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-1"></i> {{ Session::get('success') }}.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

        <div class="container-fluid">
            <!-- Page Heading -->
            <!-- DataTales Example -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h4 class="m-0 font-weight-bold">Data Pegawai</h4>
                    <div>
                        <a href="{{route('employees.create')}}" class="btn btn-primary"><i class="bi bi-person-add"></i></a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table " id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Posisi</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                              @foreach ($data as $item)
                                <tr>
                                    <td>{{$numb++}}</td>
                                    <td>{{$item->name}}</td>
                                    <td>{{$item->role}}</td>
                                    <td>
                                        <div class="btn-group" role="group" aria-label="Basic example">
                                            <button type="button" class="btn btn-warning ms-2" data-bs-toggle="modal" data-bs-target="#staticBackdrop{{$item->id}}"  data-toggle="tooltip" data-placement="top" title="Detail">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                              @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

@foreach ($data as $item)
    <div class="modal fade" id="staticBackdrop{{ $item->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">Detail Pegawai</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body ">
                    <img src="{{ asset('storage/'.$item->photos) }}" class="rounded-circle" style="width: 200px; height: 200px; object-fit: cover; margin: auto; display:block;">
                    <table class="table tablebordered">
                    <tr>
                        <th>Nama</th>
                        <td>{{$item->name}}</td>
                    </tr>
                    <tr>
                        <th>Posisi</th>
                        <td>{{$item->role}}</td>
                    </tr>
                    <tr>
                        <th>Alamat</th>
                        <td>{{$item->address}}</td>
                    </tr>
                    <tr>
                        <th>No. Telp</th>
                        <td>{{$item->phone}}</td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td>{{$item->email}}</td>
                    </tr>
                    <tr>
                        <th>TTL</th>
                        <td>{{$item->date_of_birth}}</td>
                    </tr>

                   </table>
                    <!-- Add more details as needed -->
                </div>
                <div class="modal-footer">
                    <a href="{{route('employees.edit', $item->id)}}" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Edit"><i class="bi bi-pencil-square"></i></a>
                    <form id="deleteForm" method="POST" action="{{ route('employees.destroy', ['employee' => $item]) }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger ms-2" data-toggle="tooltip" data-placement="top" title="Delete" onclick="confirmDelete()">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endforeach
@endsection

@push('scripts')
<script>
    function confirmDelete() {
        if (window.confirm('Are you sure you want to delete this employee?')) {
            document.getElementById('deleteForm').submit();
        }
    }
</script>
@endpush