@extends('adminlte::page')

@section('title', 'Senarai Pengguna')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-users mr-2"></i>Senarai Pengguna</h1>
        <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
            <i class="fas fa-user-plus mr-1"></i> Daftar Pengguna
        </a>
    </div>
@stop

@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
        </div>
    @endif
    @if (session('warning'))
        <div class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <i class="fas fa-exclamation-triangle mr-1"></i> {{ session('warning') }}
        </div>
    @endif

    <!-- Statistic Cards -->
    @php $daerahParam = request('daerah') ? ['daerah' => request('daerah')] : []; @endphp
    <div class="row">
        <div class="col-lg col-md-4 col-6">
            <a href="{{ route('admin.users.index', $daerahParam) }}" class="small-box-footer">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h3>{{ $stats['jumlah'] }}</h3>
                        <p>Jumlah Pengguna</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg col-md-4 col-6">
            <a href="{{ route('admin.users.index', array_merge(['role' => 'admin'], $daerahParam)) }}"
                class="small-box-footer">
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3>{{ $stats['admin'] }}</h3>
                        <p>Admin</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg col-md-4 col-6">
            <a href="{{ route('admin.users.index', array_merge(['role' => 'supervisor'], $daerahParam)) }}"
                class="small-box-footer">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ $stats['supervisor'] }}</h3>
                        <p>Supervisor</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg col-md-4 col-6">
            <a href="{{ route('admin.users.index', array_merge(['role' => 'checker'], $daerahParam)) }}"
                class="small-box-footer">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{ $stats['checker'] }}</h3>
                        <p>Checker</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg col-md-4 col-6">
            <a href="{{ route('admin.users.index', array_merge(['role' => 'pemohon'], $daerahParam)) }}"
                class="small-box-footer">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ $stats['pemohon'] }}</h3>
                        <p>Pemohon</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg col-md-4 col-6">
            <a href="{{ route('admin.users.index', array_merge(['role' => 'pkm'], $daerahParam)) }}"
                class="small-box-footer">
                <div class="small-box bg-purple">
                    <div class="inner">
                        <h3>{{ $stats['pkm'] }}</h3>
                        <p>PKM</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="card card-outline card-primary">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title">Senarai Semua Pengguna</h3>
            <form method="GET" action="{{ route('admin.users.index') }}" class="d-flex align-items-center flex-wrap"
                style="gap:6px">
                <select name="role" class="form-control form-control-sm" style="width:150px"
                    onchange="this.form.submit()">
                    <option value="">-- Semua Peranan --</option>
                    <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                    <option value="supervisor" {{ request('role') == 'supervisor' ? 'selected' : '' }}>Supervisor</option>
                    <option value="checker" {{ request('role') == 'checker' ? 'selected' : '' }}>Checker</option>
                    <option value="pemohon" {{ request('role') == 'pemohon' ? 'selected' : '' }}>Pemohon</option>
                    <option value="pkm" {{ request('role') == 'pkm' ? 'selected' : '' }}>PKM</option>
                </select>
                <select name="daerah" class="form-control form-control-sm" style="width:180px"
                    onchange="this.form.submit()">
                    <option value="">-- Semua Daerah --</option>
                    @foreach ($daerahs as $d)
                        <option value="{{ $d->nama_daerah }}"
                            {{ request('daerah') == $d->nama_daerah ? 'selected' : '' }}>
                            {{ $d->nama_daerah }}
                        </option>
                    @endforeach
                </select>
                <select name="jenis_sekolah" class="form-control form-control-sm" style="width:120px"
                    onchange="this.form.submit()">
                    <option value="">-- Semua Jenis --</option>
                    @foreach ($jenisSekolahs as $j)
                        <option value="{{ $j->nama_jenis }}"
                            {{ strtoupper(request('jenis_sekolah')) == strtoupper($j->nama_jenis) ? 'selected' : '' }}>
                            {{ $j->nama_jenis }}
                        </option>
                    @endforeach
                </select>
                @if (request('role') || request('daerah') || request('jenis_sekolah'))
                    <a href="{{ route('admin.users.index') }}" class="btn btn-sm btn-secondary" title="Kosongkan Penapis">
                        <i class="fas fa-times"></i>
                    </a>
                @endif
            </form>
        </div>
        <div class="card-body table-responsive p-0">
            <table class="table table-hover table-striped">
                <thead class="thead-dark">
                    <tr>
                        <th width="50">#</th>
                        <th>Nama</th>
                        <th>E-mel</th>
                        <th>Peranan</th>
                        <th>Jenis Sekolah</th>
                        <th>Kod Sekolah</th>
                        <th>Nama Sekolah</th>
                        <th>Daerah</th>
                        <th width="100">Tindakan</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $index => $user)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>
                                <span
                                    class="badge
                                    @switch($user->role)
                                        @case('admin') badge-danger @break
                                        @case('supervisor') badge-warning @break
                                        @case('checker') badge-success @break
                                        @default badge-info
                                    @endswitch">
                                    {{ ucfirst($user->role) }}
                                </span>
                            </td>
                            <td>
                                @if (is_array($user->jenis_sekolah) && count($user->jenis_sekolah))
                                    @foreach ($user->jenis_sekolah as $js)
                                        <span class="badge badge-primary">{{ $js }}</span>
                                    @endforeach
                                @else
                                    -
                                @endif
                            </td>
                            <td>{{ $user->kod_sekolah ?? '-' }}</td>
                            <td>{{ $user->nama_sekolah ?? '-' }}</td>
                            <td>{{ $user->daerah ?? '-' }}</td>
                            <td>
                                <div class="d-flex">
                                    <button type="button" class="btn btn-warning btn-sm mr-1 btn-edit"
                                        data-id="{{ $user->id }}" data-name="{{ $user->name }}"
                                        data-email="{{ $user->email }}" data-role="{{ $user->role }}"
                                        data-jenis="{{ json_encode($user->jenis_sekolah ?? []) }}"
                                        data-kod="{{ $user->kod_sekolah }}" data-nama-sekolah="{{ $user->nama_sekolah }}"
                                        data-daerah="{{ $user->daerah }}" data-toggle="modal" data-target="#modalEdit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST"
                                        onsubmit="return confirm('Padam pengguna ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted">Tiada pengguna dijumpai.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal Edit Pengguna -->
    <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title"><i class="fas fa-edit mr-1"></i> Kemaskini Pengguna</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form id="formEdit" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary border-bottom pb-2 mb-3"><i class="fas fa-lock mr-1"></i> Maklumat
                                    Akaun</h6>
                                <div class="form-group">
                                    <label>Nama Penuh <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="edit_name" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>E-mel <span class="text-danger">*</span></label>
                                    <input type="email" name="email" id="edit_email" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>Kata Laluan Baharu <small class="text-muted">(kosongkan jika tidak
                                            tukar)</small></label>
                                    <input type="password" name="password" class="form-control"
                                        placeholder="Kata laluan baharu">
                                </div>
                                <div class="form-group">
                                    <label>Sahkan Kata Laluan</label>
                                    <input type="password" name="password_confirmation" class="form-control"
                                        placeholder="Sahkan kata laluan">
                                </div>
                                <div class="form-group">
                                    <label>Peranan <span class="text-danger">*</span></label>
                                    <select name="role" id="edit_role" class="form-control" required>
                                        <option value="admin">Admin</option>
                                        <option value="supervisor">Supervisor</option>
                                        <option value="checker">Checker</option>
                                        <option value="pemohon">Pemohon</option>
                                        <option value="pkm">PKM</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary border-bottom pb-2 mb-3"><i class="fas fa-school mr-1"></i>
                                    Maklumat
                                    Sekolah</h6>
                                <div class="form-group">
                                    <label>Jenis Sekolah</label>
                                    <div id="edit_jenis_container">
                                        @foreach (\App\Models\JenisSekolah::orderBy('kod_jenis')->get() as $jenis)
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input edit-jenis-cb"
                                                    id="edit_jenis_{{ $jenis->kod_jenis }}" name="jenis_sekolah[]"
                                                    value="{{ $jenis->nama_jenis }}">
                                                <label class="custom-control-label"
                                                    for="edit_jenis_{{ $jenis->kod_jenis }}">
                                                    {{ $jenis->kod_jenis }} ({{ $jenis->nama_jenis }})
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Kod Sekolah</label>
                                    <input type="text" name="kod_sekolah" id="edit_kod" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Nama Sekolah</label>
                                    <input type="text" name="nama_sekolah" id="edit_nama_sekolah"
                                        class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Daerah</label>
                                    <select name="daerah" id="edit_daerah" class="form-control">
                                        <option value="">-- Pilih Daerah --</option>
                                        @foreach (\App\Models\Daerah::orderBy('nama_daerah')->get() as $d)
                                            <option value="{{ $d->nama_daerah }}">{{ $d->nama_daerah }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <i class="fas fa-times mr-1"></i> Batal
                        </button>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-save mr-1"></i> Kemaskini
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script>
        $('.btn-edit').on('click', function() {
            var id = $(this).data('id');
            var name = $(this).data('name');
            var email = $(this).data('email');
            var role = $(this).data('role');
            var jenis = $(this).data('jenis'); // JSON array
            var kod = $(this).data('kod');
            var namaSekolah = $(this).data('nama-sekolah');
            var daerah = $(this).data('daerah');

            $('#edit_name').val(name);
            $('#edit_email').val(email);
            $('#edit_role').val(role);

            // Reset all checkboxes then check matching ones
            $('.edit-jenis-cb').prop('checked', false);
            if (Array.isArray(jenis)) {
                jenis.forEach(function(j) {
                    $('.edit-jenis-cb[value="' + j + '"]').prop('checked', true);
                });
            }

            $('#edit_kod').val(kod);
            $('#edit_nama_sekolah').val(namaSekolah);
            $('#edit_daerah').val(daerah);

            var url = '{{ url('admin/pengguna') }}/' + id;
            $('#formEdit').attr('action', url);
        });
    </script>
@endpush
