@extends('layouts.app')
@section('title', 'Politeknik Negeri Jember')
@section('topbar', 'Data User')
@section('css')
<!-- Custom styles for this page -->
<link href="{{ asset('vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
<style>
    :root {
        --primary-color: rgb(0, 122, 153);
        --primary-light: rgba(0, 122, 153, 0.1);
        --primary-dark: rgb(0, 92, 115);
    }
    
    .card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    
    .card-header {
        background-color: var(--primary-color);
        color: white;
        padding: 1.25rem 1.5rem;
        border-bottom: none;
    }
    
    .table-container {
        padding: 0 1.5rem 1.5rem;
        overflow-x: auto; 
    }
    
    .table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    
    .table thead th {
        background-color: var(--primary-light);
        color: var(--primary-dark);
        font-weight: 600;
        border: none;
        padding: 12px 15px;
        position: sticky;
        top: 0;
    }
    
    .table tbody tr {
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        transition: all 0.3s ease;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .table tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 122, 153, 0.1);
    }
    
    .table td {
        border: none;
        padding: 15px;
        vertical-align: middle;
        border-top: 1px solid rgba(0, 122, 153, 0.05);
        border-bottom: 1px solid rgba(0, 122, 153, 0.05);
    }
    
    .table td:first-child {
        border-left: 1px solid rgba(0, 122, 153, 0.05);
        border-radius: 8px 0 0 8px;
    }
    
    .table td:last-child {
        border-right: 1px solid rgba(0, 122, 153, 0.05);
        border-radius: 0 8px 8px 0;
    }
    
    .badge {
        padding: 6px 12px;
        font-weight: 500;
        font-size: 0.75rem;
        border-radius: 50px;
    }
    
    .badge-info {
        background-color: rgba(23, 162, 184, 0.2);
        color: rgb(23, 162, 184);
    }
    
    .badge-danger {
        background-color: rgba(220, 53, 69, 0.2);
        color: rgb(220, 53, 69);
    }
    
    .badge-success {
        background-color: rgba(40, 167, 69, 0.2);
        color: rgb(40, 167, 69);
    }
    
    .badge-secondary {
        background-color: rgba(108, 117, 125, 0.2);
        color: rgb(108, 117, 125);
    }
    
    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    .btn-primary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }
    
    .btn-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .action-buttons {
        white-space: nowrap;
    }
    
    .add-user-btn {
        border-radius: 50px;
        padding: 8px 20px;
        font-weight: 500;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 10px;
        border-radius: 4px;
        margin-left: 2px;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--primary-color) !important;
        color: white !important;
        border: none;
    }
</style>
@stop

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-white">
                <i class="fas fa-users mr-2"></i>User
            </h6>
            <!-- <a href="#" class="btn btn-primary add-user-btn shadow-sm">
                <i class="fas fa-user-plus mr-2"></i>Tambah Pengguna
            </a> -->
        </div>

        <div class="table-container">
            <table class="table table-hover" id="DataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th>Nama User</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th width="8%" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                @foreach ($users as $index => $row)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td class="font-weight-bold">{{ $row->name }}</td>
                    <td>{{ $row->email }}</td>
                    <!-- <td>{{ $row->alamat ?? '-' }}</td>
                    <td>{{ $row->telepon ?? '-' }}</td>
                    <td>{{ $row->keterangan ?? '-' }}</td> -->
                    <td>
                        @if($row->role == 'mahasiswa')
                            @if($row->mahasiswa)
                                <span class="badge badge-info">
                                    <i class="fas fa-user-graduate"></i>
                                    {{ $row->mahasiswa->nim }} - {{ $row->mahasiswa->program_studi }}
                                </span>
                            @else
                                <span class="badge badge-warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    Data Tidak Lengkap
                                </span>
                            @endif
                        @elseif($row->role == 'admin')
                            <span class="badge badge-danger">
                                <i class="fas fa-user-shield mr-1"></i> Admin
                            </span>
                        @elseif($row->role == 'karyawan')
                            <span class="badge badge-success">
                                <i class="fas fa-chalkboard-teacher mr-1"></i> Karyawan
                            </span>
                        @else
                            <span class="badge badge-secondary">
                                <i class="fas fa-user mr-1"></i> {{ $row->role }}
                            </span>
                        @endif
                    </td>
                    <td class="text-center action-buttons">
                        <!-- @if($row->role == 'mahasiswa' && !$row->mahasiswa)
                            <a href="{{ route('user.edit', $row->id) }}" 
                                class="btn btn-circle btn-warning mr-2"
                                title="Lengkapi Data Mahasiswa">
                                <i class="fas fa-pencil-alt"></i>
                            </a>
                        @endif -->

                        <button type="button" 
                            class="btn btn-circle btn-danger hapus"
                            data-id="{{ $row->id }}"
                            title="Hapus Pengguna">
                          <i class="fas fa-trash"></i>
                        </button>

                        <form id="deleteForm-{{ $row->id }}" 
                                action="{{ route('user.destroy', $row->id) }}" 
                                method="POST" 
                                style="display: none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@stop

@section('js')
<!-- Page level plugins -->
<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/sweetalert.js')}}"></script>

<script>
$(document).ready(function() {
    // Inisialisasi DataTable
    $('#DataTable').DataTable({
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Indonesian.json",
            "search": "Cari:",
            "lengthMenu": "Tampilkan _MENU_ data per halaman",
            "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            "paginate": {
                "first": "Pertama",
                "last": "Terakhir",
                "next": "Selanjutnya",
                "previous": "Sebelumnya"
            }
        },
        "dom": '<"top"<"d-flex justify-content-between align-items-center"f<"ms-3"l>>>rt<"bottom"ip><"clear">',
        "pageLength": 10,
        "columnDefs": [
            { "orderable": false, "targets": [4] }
        ]
    });

    // Toggle Form Mahasiswa
    const roleSelect = document.getElementById('roleSelect');
    const mahasiswaFields = document.getElementById('mahasiswaFields');

    function toggleMahasiswaFields() {
        if (roleSelect && mahasiswaFields) {
            if (roleSelect.value === 'mahasiswa') {
                mahasiswaFields.style.display = 'block';
                mahasiswaFields.querySelectorAll('input').forEach(input => input.required = true);
            } else {
                mahasiswaFields.style.display = 'none';
                mahasiswaFields.querySelectorAll('input').forEach(input => input.required = false);
            }
        }
    }

    if (roleSelect) {
        toggleMahasiswaFields();
        roleSelect.addEventListener('change', toggleMahasiswaFields);
    }

    // Konfirmasi Delete dengan SweetAlert
    $(document).on('click', '.hapus', function(e) {
    e.preventDefault();
    const userId = $(this).data('id');
    const form = $(`#deleteForm-${userId}`);
    
    Swal.fire({
        title: 'Konfirmasi Hapus',
        text: "Data yang dihapus tidak dapat dikembalikan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#007a99',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            form.submit();  
        }
    });
});
});
</script>
@stop