@extends('frontend.template.index')
@push('between-css')
    {{-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css"> --}}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
@endpush
@push('after-script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js">
    </script>
    <script>
        $('#datatables').DataTable({});
    </script>
@endpush
@section('content')
    <!-- SECTION 1 -->
    <section id="section-1" class="container mt-5">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item "><a href="#" class="text-dark text-decoration-none">PROFIL</a></li>
                <li class="breadcrumb-item active" aria-current="page">PROFIL PEGAWAI</li>
            </ol>
        </nav>
        <img src="{{ url('templates/frontend') }}/images/dummy/profil-pegawai.png" class="rounded-4" width="100%"
            height="400vh" alt="">
    </section>
    <!-- END SECTION 1 -->

    <!-- SECTION 2 -->
    <section id="section-2" class="container mt-4">
        <h1 class="fw-bold text-dark text-uppercase">Profil </h1>
        <h4 class="text-uppercase">{{ $office->name }}</h4>
        <div class="row mt-4">
            <div class="col-12 col-md-8 table-responsive">
                <table id="datatables" class="table " style="font-size: 12px">
                    <thead>
                        <tr>
                            <td>#</td>
                            <td>Gambar</td>
                            <td>Nama</td>
                            <td>Jenis Kelamin</td>
                            <td>Jabatan</td>
                            <td>Pangkat</td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (@$pegawai as $peg)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    @if (@$peg['image'])
                                        <img src="{{ @$peg['image'] }}" width="50vh" height="70vh" alt="">
                                    @else
                                        <img src="{{ url('templates/frontend/images/dummy/pegawai.png') }}" width="50vh"
                                            height="70vh" alt="">
                                    @endif
                                </td>
                                <td>{{ @$peg['gelar_dpn'] . @$peg['nama_lengkap'] . @$peg['gelar_blkng'] }}</td>
                                <td>{{ @$peg['jenkel'] == 'L' ? 'Laki-laki' : 'Perempuan' }}</td>
                                <td>{{ @$peg['nama_jabatan'] }}</td>
                                <td>{{ @$peg['pangkat'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>

                </table>
            </div>


            <div class="col-12 col-md-4">
                @include('frontend.template.inc.side-profile')
            </div>
        </div>
    </section>
    <!-- END SECTION 2 -->
@endsection