@extends('layouts.appmin')

@section('tajuk')
Senarai Untuk Dibawa ke Mesyuarat
@endsection


@section('breadcrumb')
    <ul class="breadcrumbs mb-3">
      <li class="nav-home">
        <a href="#">
          <i class="icon-home"></i>
        </a>
      </li>
      <li class="separator">
        <i class="icon-arrow-right"></i>
      </li>
      <li class="nav-item">
        <a href="#">Penjaja</a>
      </li>
      <li class="separator">
        <i class="icon-arrow-right"></i>
      </li>
      <li class="nav-item">
        <a href="#">Lantikan Admin</a>
      </li>
    </ul>
@endsection


@section('content')        
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Carian Pengguna Berdaftar (Bakal Admin perlu daftar akaun sebagai pengguna awam terlebih dahulu.)</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.cariadmin') }}" method="POST" enctype="multipart/form-data" class="form-inline">
                        @csrf
                        <div class="row">
                          <div class="col-auto">
                              <label for="keyword">Katakunci Nama atau No KP</label>
                          </div>
                          <div class="col-auto">
                              <input type="text" id="keyword" name="keyword" class="form-control" value="{{$keyword}}" aria-label="keyword">                            
                          </div>
                          <div class="col-auto">
                            <input type="submit" id="simpan" value="Cari" class="btn btn-sm btn-primary mb-0 me-2" aria-describedby="adminHelpInline">                            
                          </div>                          
                        </div>                      
                    </form> 
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Senarai Pengguna Awam </h2>
                </div>
                <div class="card-body">
                    <table class="table align-items-center mb-0" id="senarai_user">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>No KP</th>
                                <th>Emel<br />No Telefon</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if(!is_null($awams))
                            @if(count($awams) > 0)
                        @foreach($awams as $user)
                            <tr data-id="{{ $user->id }}"
                                data-name="{{ $user->name }}"
                                data-nokp="{{ $user->nokp }}"
                                data-role="{{ $user->role }}">
                                <td>{{$user->name}}</td>
                                <td>{{$user->nokp}}</td>
                                <td>{{$user->email}}<br />{{$user->no_telefon}}</td>
                                <td>
                                    <button type="button" class="btn btn-secondary btn-sm update-btn" 
                                        data-bs-toggle="modal"
                                        data-bs-target="#roleModal">
                                        <i class="fa fa-arrow-right"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                            @else
                            <tr data-id=""
                                data-name=""
                                data-nokp=""
                                data-role=""><td colspan="2">Tiada data dijumpai.</td><td>&nbsp;</td><td>&nbsp;<input type="hidden" class="btn btn-secondary btn-sm update-btn"></td></tr>
                            @endif
                            
                        @else
                        <tr data-id=""
                                data-name=""
                                data-nokp=""
                                data-role=""><td colspan="2">Sila buat carian.</td><td>&nbsp;</td><td>&nbsp;<input type="hidden" class="btn btn-secondary btn-sm update-btn"></td></tr>
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Senarai Admin</h2>
                </div>
                <div class="card-body">
                    <table class="table align-items-center mb-0" id="senarai_admin">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>No KP</th>
                                <th>Emel<br />No Telefon</th>
                                <th>Role</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        @if(!is_null($admins))
                            @if(count($admins) > 0)
                        @foreach($admins as $admin)
                            <tr data-id="{{ $admin->id }}"
                                data-name="{{ $admin->name }}"
                                data-nokp="{{ $admin->nokp }}"
                                data-role="{{ $admin->role }}">
                                <td>{{$admin->name}}</td>
                                <td>{{$admin->nokp}}</td>
                                <td>{{$admin->email}}<br />{{$admin->no_telefon}}</td>
                                <td>{{$admin->role}}</td>
                              <?php //  <td><a class="btn btn-secondary btn-sm" href="{{route('admin.remove-admin', [$admin->nokp, $keyword ?? ''])}}"><i class="fa fa-arrow-left"></i></td> ?>
                                <td>
                                    <a class="btn btn-secondary btn-sm" href="{{route('admin.remove-admin', [$admin->nokp, $keyword ?? ''])}}"><i class="fa fa-arrow-left"></i></a>
                                </td>
                            </tr>
                        @endforeach
                            @else
                            <tr><td>Tiada data dijumpai.</td><td>&nbsp;</td><td>&nbsp;</td></tr>
                            @endif
                            
                        @else
                        <tr><td>Sila buat carian.</td><td>&nbsp;</td><td>&nbsp;</td></tr>
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    

<!-- Bootstrap Modal -->
<div class="modal fade" id="roleModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="roleForm" method="POST">
            @csrf
            @method('PATCH')
            <input type="hidden" id="keyword" name="keyword" class="form-control" value="{{$keyword}}" aria-label="keyword">  
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateModalLabel">Kemaskini Role Pengguna</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Modal Content -->
                    <input type="hidden" name="user_id" id="user_id">
                    <div class="mb-3">
                        <label for="modalName" class="form-label">Nama</label>
                        <input type="text" class="form-control" id="modalName" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="modalKP" class="form-label">KP</label>
                        <input type="text" class="form-control" id="modalKP" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="modalCurrentRole" class="form-label">Role Semasa</label>
                        <input type="text" class="form-control" id="modalCurrentRole" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="role_select" class="form-label">Role Baru</label>
                        <select name="role" id="role_select" class="form-select" required>
                            <option value="">-- Pilih Role --</option>
                            <option value="awam">awam</option>
                            <option value="pembantu tadbir">pembantu tadbir</option>
                            <option value="pp kesihatan">pp kesihatan</option>
                            <option value="pp tadbir">pp tadbir</option>
                            <option value="pegawai tadbir">pegawai tadbir</option>
                            <option value="pengarah">pengarah</option>
                            <option value="super">super</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function () {
    $('#senarai_user').DataTable();

    $('#senarai_admin').DataTable({
        dom: '<"row mb-3"<"col-md-2 col-sm-6"l><"col-md-10 col-sm-6">>' +
                '<"row"<"col-12"tr>>' +
                '<"row mt-3"<"col-md-5"i><"col-md-7 text-end"p>>',
        searching: false,
        language: {
            lengthMenu: '<span class="me-2">Show</span> _MENU_'
        },
        responsive: false
    });
    
    // Event listener for the Update button
    $('.update-btn').on('click', function () {
        let row = $(this).closest('tr');
        // Get data attributes from the clicked button
        let userId  = row.data('id');
        let name = row.data('name');
        let kp = row.data('nokp');
        let role = row.data('role');

        // Populate the modal fields
        $('#modalName').val(name);
        $('#modalKP').val(kp);
        $('#modalCurrentRole').val(role);
        $('#user_id').val(userId);

        // Set form action dynamically
        $('#roleForm').attr('action', `/admin/users/${userId}/update-role`);
    });
});

</script>
@endsection