@extends('layouts.admin')
@section('title') Manage Admins @endsection
@section('content')
<div class="row">
	<div class="col-md-12 mb-30">
		<div class="bg-white card-box border-20">
			<h4><i class="fa-regular fa-plus"></i> Add Admin</h4><hr>
			<form method="post"  enctype="multipart/form-data" action="{{ route('admin.add-admin') }}">
				@csrf
				<div class="row">
					<div class="col-12">
						<div class="dash-input-wrapper mb-30">
							<label>Name:</label>
							<input class="form-control" value="{{ old('name') }}"  name="name" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Email:</label>
							<input type="email" class="form-control" value="{{ old('email') }}"  name="email" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Phone:</label>
							 <input type="tel"  id="phone" name="phone" style="width: 100% !important;" required="required"  value="{{ old('phone') }}"  >
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Password:</label>
							<input type="password" class="form-control" value="{{ old('password') }}"  name="password" required>
						</div>
					</div>
					<div class="col-md-6">
						<div class="dash-input-wrapper mb-30">
							<label>Role:</label>
							<select name="role" class="form-control" required>
								<option value=" " >Select a Role</option>
								@foreach($roles as $role)
								<option value="{{ $role->id }}" >{{ $role->role }}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-12">
						<label class="mb-2">&nbsp;</label>
						<div class="d-grid">
							<button type="submit" class="btn btn-two btn-block"><i class="fa-regular fa-plus text-white"></i> Add Admin</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="col-md-12">		
		<div class="bg-white card-box p0 border-20">
		    <div class="table-responsive pt-25 pb-25 pe-4 ps-4">
		        <table id="dataTable" class="table property-list-table">
		            <thead>
					  <tr>
					    <th>#</th>
					    <th>Ful Name</th>
					    <th>Email</th>
					    <th>Contact Number</th>
					    <th>Roles</th>
					    <th>Actions</th>
					  </tr>
					</thead>
					<tbody>
						@if(count($admins) > 0)
														@foreach($admins as $admin)
							<tr>
							<td>{{ $i++ }}</td>
							<td>{{ $admin->name }} @if($admin->id == auth('admin')->user()->id ) <b>(You)</b> @endif</td>
							<td>{{ $admin->email }}</td>
							<td>{{ $admin->phone }}</td>
							<td>
								@php $role = \App\Models\Role::findorfail($admin->role); @endphp
								<div class="badge bg-success text-white">{{ $role->role }}</div>
							</td>
							<td>
								<div class="action-dots float-end">
		                            <button class="action-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		                                <span></span>
		                            </button>
		                            <ul class="dropdown-menu dropdown-menu-end">
		                              <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#passModal-{{ $admin->id }}"><i class="fa-regular fa-key"></i> Change Password</a></li>
		                             @if($admin->id !=auth('admin')->user()->id )
		                              @if($admin->status == 'ban')
						               <li> <a class="dropdown-item " href="{{ route('admin.unban-admin',$admin->id) }}"><i class="fa-regular fa-ban"></i> Unblock Admin</a></li>
						              @else
										<li><a class="dropdown-item " href="{{ route('admin.ban-admin',$admin->id) }}"><i class="fa-regular fa-ban"></i> Block Admin</a></li>
					                  @endif
					                 @endif
		                            </ul>
		                        </div>
							</td>
							</tr>
							@endforeach
						@else
						<tr>
							<td></td>
							<td></td>
							<td>No Admin found</td>
							<td></td>
							<td></td>
						</tr>
						@endif
					</tbody>
		        </table>
		        <!-- /.table property-list-table -->
		    </div>                    
		</div>
	</div>
</div>
@endsection
@section('script')
@if(count($admins) > 0)
@foreach($admins as $admin)
<div class="modal fade" id="passModal-{{ $admin->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen modal-dialog-centered">
        <div class="container">
            <div class="remove-account-popup text-center modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <center>
	                <div class="p-2 rounded-circle btn-bg" style="width:70px; height:70px;">
	                	<i class="fa-regular fa-fingerprint fa-3x text-white"></i>
	                </div>
                </center>
                <br>
                <form method="post" action="{{ route('admin.change-admin-password') }}">
		      		@csrf
		      		<input type="hidden" name="user" value="{{ $admin->id }}">
		      		<div class="row justify-content-center">
		      			<div class="col-2">
		      				<label>New Password:</label>
		      			</div>
		      			<div class="col-6">
		      				<input type="password" class="form-control" name="password" required><br>
		      			</div>
		      		</div>
	                <div class="button-group d-inline-flex justify-content-center align-items-center pt-15">
	                	<button type="submit" class="btn btn-one"><i class="fa-regular fa-key"></i> Update Password</button>
	                    <button type="button" class="btn-close fw-500 ms-3" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
	                </div>
                </form>
            </div>
            <!-- /.remove-account-popup -->
        </div>
    </div>
</div>
@endforeach
@endif
<script type="text/javascript">
	$('#dataTable').DataTable({
      dom: "<'row'<'col-md-4 col-sm-12'f><'col-md-5 col-sm-12 text-center'B><'col-md-3 col-sm-12'l>>" +
           "<'row'<'col-12'tr>>" +
           "<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
      autoWidth: true,
      responsive: true,
      buttons: [
        { extend: 'copy', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'excel', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'csv', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'pdf', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'print', className: 'btn btn-sm btn-primary btn-bg' }
      ],
      lengthMenu: [
        [20, 30, 40,50,100, -1],
        [20, 30, 40,50,100, "All"]
      ],
    });
</script>
<script type="text/javascript">
    var input = document.querySelector("#phone");
    var iti = window.intlTelInput(input, {
        initialCountry: "kh",        // Cambodia
        onlyCountries: ["kh"],       // Restrict to Cambodia
        nationalMode: false,         // Always show +855
        formatOnDisplay: true,
        separateDialCode: false,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.1/js/utils.js"
    });

    // Allowed total length for Cambodian numbers (including country code)
    const maxLength = 12; // e.g., +855xxxxxxxx

    // Restrict input as the user types
    input.addEventListener("input", function () {
        let value = input.value.replace(/\D/g, ""); // Remove non-digits
        if (value.startsWith("855")) {
            value = "+" + value;
        } else if (!value.startsWith("+855")) {
            value = "+855" + value; // Force +855
        }

        // Enforce max length
        if (value.length > maxLength + 1) { // + sign is extra
            value = value.slice(0, maxLength + 1);
        }

        input.value = value;
    });
</script>
@endsection