@extends('layouts.app')

@section('title', 'จัดการผู้ใช้งาน')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="fw-bold text-dark">ผู้ใช้งานทั้งหมด</h2>
    </div>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="card shadow-sm">
        <div class="card-body">
            <table id="users-table" class="table table-striped table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>รหัสสมาชิก</th>
                        <th>ชื่อ-สกุล</th>
                        <th>LINE Display</th>
                        <th>สิทธิ์การใช้งาน</th>
                        <th>สถานะ</th>
                        <th class="text-center">การจัดการ</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $u)
                        <tr>
                            <td>{{ $u->id }}</td>
                            <td>{{ $u->membership_no }}</td>
                            <td>{{ $u->member?->first_name }} {{ $u->member?->last_name }}</td>
                            <td>
                                <img src="{{ $u->line_picture_url }}" width="30" class="rounded-circle me-2">
                                {{ $u->line_display_name }}
                            </td>
                            <td>{{ $u->role }}</td>
                            <td>
                                @if ($u->status == 1)
                                    <span class="badge bg-success">ใช้งาน</span>
                                @else
                                    <span class="badge bg-secondary">ปิดการใช้งาน</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <a href="{{ route('admin.users.edit', $u->id) }}" class="btn btn-sm btn-warning">แก้ไข</a>
                                <form action="{{ route('admin.users.destroy', $u->id) }}" method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger"
                                        onclick="return confirm('ยืนยันการลบผู้ใช้?')">ลบ</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).ready(function() {
                $('#users-table').DataTable({
                    "pageLength": 50,
                    "lengthMenu": [ 50, 100],
                    "language": {
                        "decimal": "",
                        "emptyTable": "ไม่พบข้อมูลในตาราง",
                        "info": "แสดง _START_ ถึง _END_ จากทั้งหมด _TOTAL_ รายการ",
                        "infoEmpty": "แสดง 0 ถึง 0 จากทั้งหมด 0 รายการ",
                        "infoFiltered": "(กรองจากทั้งหมด _MAX_ รายการ)",
                        "lengthMenu": "แสดง _MENU_ รายการ",
                        "loadingRecords": "กำลังโหลด...",
                        "processing": "กำลังประมวลผล...",
                        "search": "ค้นหา:",
                        "zeroRecords": "ไม่พบข้อมูลที่ตรงกัน",
                        "paginate": {
                            "first": "หน้าแรก",
                            "last": "หน้าสุดท้าย",
                            "next": "ถัดไป",
                            "previous": "ก่อนหน้า"
                        },
                        "aria": {
                            "sortAscending": ": เปิดการเรียงจากน้อยไปมาก",
                            "sortDescending": ": เปิดการเรียงจากมากไปน้อย"
                        }
                    }
                });
            });
        </script>
    @endpush
@endsection