@extends('layouts.app')

@section('title', 'Kelola Hak Akses Staf')

@section('content')
<section class="section">
    <div class="section-header">
        <h1 style="color: black;"><i class="fas fa-user-shield mr-2 text-emerald"></i>Hak Akses Staf</h1>
    </div>

    <div class="section-body">
        @if (session('message'))
        <div class="alert alert-success alert-dismissible show fade shadow-sm border-0 mb-4" style="border-left: 4px solid #10b981;">
            <div class="alert-body">
                <button class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
                <i class="fas fa-check-circle mr-1"></i> {{ session('message') }}
            </div>
        </div>
        @endif

        @if (session('error'))
        <div class="alert alert-danger alert-dismissible show fade shadow-sm border-0 mb-4" style="border-left: 4px solid #ef4444;">
            <div class="alert-body">
                <button class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
                <i class="fas fa-exclamation-triangle mr-1"></i> {{ session('error') }}
            </div>
        </div>
        @endif

        <!-- Filter and Search Row -->
        <div class="row mb-4">
            <div class="col-md-6 col-lg-5">
                <form action="{{ route('hakakses.index') }}" method="GET">
                    <div class="input-group" style="box-shadow: 0 4px 10px rgba(0,0,0,0.02); border-radius: 12px; overflow: hidden; border: 1.5px solid #e2e8f0; background: #ffffff;">
                        <div class="input-group-prepend" style="background: transparent; border: none;">
                            <span class="input-group-text bg-white border-0 text-muted pl-3"><i class="fas fa-search"></i></span>
                        </div>
                        <input type="text" name="search" class="form-control border-0 bg-white" placeholder="Cari staf berdasarkan ID, Nama..." value="{{ request('search') }}" style="box-shadow: none !important; padding-left: 5px !important; height: 46px !important;">
                        <div class="input-group-append" style="margin: 0 !important; background: transparent; border: none;">
                            <button class="btn btn-primary px-4" type="submit" style="border-radius: 0 10px 10px 0 !important; height: 46px !important; margin: 0 !important; border: none !important;">Cari</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Access Rights Table Card -->
        <div class="card shadow-sm border-0">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-md mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="pl-4">ID Staf</th>
                                <th>Nama Lengkap</th>
                                <th>Alamat Email</th>
                                <th>Peran / Role</th>
                                <th class="text-center">Aksi Konfigurasi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($hakakses as $item)
                            <tr>
                                <td class="pl-4 font-weight-600 align-middle"><code class="px-2 py-1 bg-light rounded text-dark font-weight-500">#{{ $item->id }}</code></td>
                                <td class="font-weight-700 align-middle text-slate">{{ $item->name }}</td>
                                <td class="align-middle text-muted">{{ $item->email }}</td>
                                <td class="align-middle">
                                    @if($item->role == 'superadmin')
                                    <span class="badge badge-success px-3 py-2 font-weight-700 text-uppercase" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; letter-spacing: 0.5px;">Superadmin</span>
                                    @else
                                    <span class="badge badge-info px-3 py-2 font-weight-700 text-uppercase" style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; letter-spacing: 0.5px;">Staf Kasir</span>
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <a href="{{ route('hakakses.edit', $item->id) }}" class="btn btn-sm btn-warning mr-1 shadow-sm text-white"><i class="fas fa-pencil-alt text-white"></i> Edit</a>
                                    <form action="{{ route('hakakses.delete', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus staf kasir ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger shadow-sm"><i class="fas fa-trash-alt"></i> Hapus</button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="fas fa-user-shield d-block mb-3" style="font-size: 3rem; opacity: 0.5;"></i>
                                    Belum ada staf kasir terdaftar.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection