@extends('admin.layouts.app')

@section('title', 'Perangkat')

@push('styles')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">

    <style>
        .soft-card {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
        }

        .table-hlines {
            --line: #e9edf4;
        }

        .table-hlines> :not(caption)>*>* {
            border-top: 0;
            border-right: 0 !important;
            border-left: 0 !important;
            border-bottom: 1px solid var(--line);
            background: transparent;
        }

        .table-hlines thead th {
            border-bottom: 2px solid var(--line) !important;
        }

        .table-hlines.table-hover tbody tr:hover {
            background: transparent !important;
        }

        table.dataTable.hover>tbody>tr:hover>*,
        table.dataTable.display>tbody>tr:hover>* {
            background: transparent !important;
        }

        .table-sticky thead th {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 1
        }

        div.dataTables_filter,
        div.dataTables_length {
            display: none
        }

        .btn-icon-sm {
            display: inline-grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            padding: 0
        }

        .btn-edit {
            background: #0f766e;
            color: #fff
        }

        .btn-delete {
            background: #dc2626;
            color: #fff
        }

        .btn-edit:hover {
            opacity: .9
        }

        .btn-delete:hover {
            opacity: .9
        }

        .avatar-sq {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            overflow: hidden;
            display: grid;
            place-items: center;
            background: #f3f4f6
        }

        .avatar-sq img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .btn-tambah {
            background: #0f766e;
            color: #fff
        }

        .btn-tambah:hover {
            background: #0f766e;
            color: #fff;
            opacity: .9;
        }
    </style>
@endpush

@section('content')
    <div class="card soft-card">
        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                <div>
                    <h4 class="mb-0">Kelola Perangakat Desa</h4>
                    <small style="color: #0f766e">Anggota aktif</small>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="fw-semibold">Anggota</span>
                    <a href="{{ route('admin.perangkat.add') }}"
                        class="btn btn-sm btn-tambah d-inline-flex align-items-center gap-1">
                        <i class="ti ti-plus"></i> Tambah
                    </a>
                </div>
            </div>

            <table id="perangkatTable" class="table align-middle w-100 table-sticky table-hlines table-hover">
                <thead>
                    <tr>
                        <th class="d-none d-md-table-cell">Profil</th>
                        <th>Nama</th>
                        <th class="d-none d-md-table-cell">Alamat</th>
                        <th class="d-none d-md-table-cell">TTL</th>
                        <th class="d-none d-md-table-cell">Status</th>
                        <th class="d-none d-md-table-cell">Jabatan</th>
                        <th>Aksi</th>

                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $r)
                        @php
                            $r = $r->only([
                                'name',
                                'id',
                                'status',
                                'role',
                                'jabatan',
                                'address',
                                'tempat_lahir',
                                'tanggal_lahir',
                                'email',
                                'employee_id',
                                'url_photo',
                            ]);
                        @endphp
                        <tr>
                            {{-- PROFIL --}}
                            <td class="text-nowrap d-none d-md-table-cell">
                                @if (!empty($r['url_photo']))
                                    <div class="avatar-sq">
                                        <img src="{{ asset('storage/' . $r['url_photo']) }}" alt="Foto {{ $r['name'] }}">
                                    </div>
                                @else
                                    <div class="avatar-sq">
                                        <i class="ti ti-user text-muted fs-5"></i>
                                    </div>
                                @endif
                            </td>
                            <td class="text-nowrap">
                                <div>
                                    <h6 class="mb-0">{{ $r['name'] }}</h6>
                                    <small class="text-muted">{{ $r['email'] }}</small>
                                </div>
                            </td>
                            <td class="text-nowrap d-none d-md-table-cell">{{ $r['address'] }}</td>
                            <td class="text-nowrap d-none d-md-table-cell">
                                <div>
                                    <h6 class="mb-0">{{ $r['tempat_lahir'] }}</h6>
                                    <small class="text-muted">{{ $r['tanggal_lahir'] }}</small>
                                </div>
                            </td>
                            <td class="text-nowrap d-none d-md-table-cell">
                                <div>
                                    <h6 class="mb-0">{{ $r['status'] }}</h6>
                                    <small class="text-muted">{{ $r['employee_id'] }}</small>
                                </div>
                            </td>

                            <td class="text-nowrap d-none d-md-table-cell">{{ $r['jabatan'] }}</td>
                            <td class="text-nowrap">
                                <a href="{{ route('admin.perangkat.edit', ['id' => $r['id']]) }}"
                                    class="btn btn-icon-sm btn-edit" title="Edit"><i class="ti ti-pencil"></i></a>
                                <button class="btn btn-icon-sm btn-delete" title="Hapus"><i
                                        class="ti ti-trash"></i></button>
                            </td>

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

@push('scripts')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <script>
        $(function() {
            var hasData = $('#perangkatTable tbody tr').length > 0 && !$('#perangkatTable tbody tr td[colspan]')
                .length;
            if (typeof $.fn.DataTable !== 'undefined' && hasData) {
                $('#perangkatTable').DataTable({
                    autoWidth: false,
                    responsive: {
                        details: false
                    },
                    paging: true,
                    pageLength: 8,
                    lengthChange: false,
                    info: true,
                    ordering: true,
                    searching: false,
                    order: [
                        [0, 'asc']
                    ],
                    language: {
                        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        infoFiltered: "(difilter dari _MAX_ total data)",
                        paginate: {
                            first: "Pertama",
                            last: "Terakhir",
                            next: "Selanjutnya",
                            previous: "Sebelumnya"
                        },
                        emptyTable: "Tidak ada data yang tersedia",
                        zeroRecords: "Tidak ada data yang cocok"
                    },
                    columnDefs: [{
                            targets: [1, 2],
                            className: 'text-nowrap'
                        },
                        {
                            targets: 1,
                            orderable: false,
                            searchable: false
                        }
                    ],
                    dom: "rt<'row align-items-center mt-3'<'col-sm-6 text-center text-sm-start'i><'col-sm-6 d-flex justify-content-center justify-content-sm-end'p>>"
                });
            }
        });
    </script>
@endpush