@extends('admin.layout.app')
@section('head')
	<link rel="stylesheet" href="{{asset('assets/css/dataTables.bootstrap4.min.css')}} ">
@endsection
@section('content')
	<div class="row">
		<div class="col-6">
			<x-page-header title="لوحة التحكم" :breadcrumb="[

			['title' => 'لوحة التحكم', 'url' => route('dashboard')],
			['title' => 'المستخدمون']
		]" />
		</div>
		<div class="col-6">
			<x-add-button label="اضافة جديد" target="add_user" id="addNewBtn" />

		</div>
	</div>





	<div class="row">
		<div class="col-sm-12">
			<div class="card mb-0">
				{{-- <div class="card-header">
					<h4 class="card-title mb-0">قائمة المستخدمون</h4>
					<p class="card-text">

					</p>
				</div> --}}
				<div class="card-body">

					<div class="table-responsive">
						<table class="datatable table table-stripped mb-0">
							<thead>
								<tr class="">
									<th>#</th>
									<th>المسؤول </th>
									<th>اسم المسجد </th>
									<th>الدور</th>
									<th>الايميل </th>

									<th>العنوان</th>
									<th>المديرية</th>
								
									<th>الإجرائات</th>
								</tr>
							</thead>
							<tbody>
								@foreach ($users as $item)
									<tr class="text-center0">
										<td>{{ $loop->iteration }}</td>
										<td>{{$item->name}}</td>
<td>{{$item->user_name}}</td>
										<td>
											<span class="badge bg-primary">
												{{ __('roles.' . $item->getRoleNames()->first()) }}
											</span>
										</td>



										<td>{{$item->email}}</td>

										<td>{{$item->address}}</td>
										<td>{{$item->directorate}}</td>
										<td>
											<x-button  icon class="btn-edit" data-id="{{ $item->id }}">
												
											</x-button>
											<x-button 
    icon 
    class="toggle-active btn {{ $item->is_active ? 'btn-danger' : 'btn-success' }}" 
    data-id="{{ $item->id }}" 
    data-active="{{ $item->is_active ? '1' : '0' }}"
>
    {{ $item->is_active ? 'تعطيل' : 'تفعيل' }}
</x-button>
{{-- <x-button 
    icon 
    class="toggle-contract btn {{ $item->contract_account ? 'btn-danger' : 'btn-success' }}" 
    data-id="{{ $item->id }}" 
    data-active="{{ $item->contract_account ? '1' : '0' }}"
>
    {{ $item->contract_account ? 'الغاء تقييد المستخدم بجهاز واحد' : 'تقييد المستخدم بجهاز واحد' }}
</x-button> --}}




										</td>

									</tr>
								@endforeach

							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>


	<x-modal.form-modal id="add_user" title="اضافة جديد">
		<form method="POST" id="myForm" action="{{route('users.store')}}">
			@csrf
           <input type="hidden" id="user_id" name="user_id">
			<div class="row">
				<x-form.form-group label="الاسم" name="name" required="true" />
				<x-form.form-group label="الايميل" name="email"  />
			</div>
			<div class="row">
				<x-form.form-group label="الجوال" name="phone" required="true" />
				<x-form.form-group label="العنوان" name="address" required="true" />
			</div>
			<div class="row">
				<x-form.form-group label="كلمة السر" name="password" type="password" required="true" />
				<x-form.form-group label="تأكيد كلمة السر" name="password_confirmation" type="password" required="true" />
			</div>
						<div class="row">
			<x-form.select-input name="role_id" required="true" label="اختر الدور" :options="$roles->pluck('label', 'id')"
				:selected="old('role_id')" />

						</div>
						<div class="row">
				<x-form.form-group label="المديرية" name="directorate" id="directorate" required="true" />
				<x-form.form-group label="اسم المستخدم" name="user_name" id="user_name" required="true" />
			</div>

			<button type="submit" class="btn btn-primary mt-3">حفظ</button>
		</form>
	</x-modal.form-modal>




	<!-- Edit User Modal -->
	<div id="edit_user" class="modal custom-modal fade" role="dialog">
		<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Edit User</h5>
					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form>
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label>First Name <span class="text-danger">*</span></label>
									<input class="form-control" value="John" type="text">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Last Name</label>
									<input class="form-control" value="Doe" type="text">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Username <span class="text-danger">*</span></label>
									<input class="form-control" value="johndoe" type="text">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Email <span class="text-danger">*</span></label>
									<input class="form-control" value="johndoe@example.com" type="email">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Password</label>
									<input class="form-control" type="password">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Confirm Password</label>
									<input class="form-control" type="password">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Phone </label>
									<input class="form-control" value="9876543210" type="text">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Role</label>
									<select class="select">
										<option>Admin</option>
										<option>Client</option>
										<option selected>Employee</option>
									</select>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Company</label>
									<select class="select">
										<option>Global Technologies</option>
										<option>Delta Infotech</option>
									</select>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label>Employee ID <span class="text-danger">*</span></label>
									<input type="text" value="FT-0001" class="form-control floating">
								</div>
							</div>
						</div>
						<div class="table-responsive m-t-15">
							<table class="table table-striped custom-table">
								<thead>
									<tr>
										<th>Module Permission</th>
										<th class="text-center">Read</th>
										<th class="text-center">Write</th>
										<th class="text-center">Create</th>
										<th class="text-center">Delete</th>
										<th class="text-center">Import</th>
										<th class="text-center">Export</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Employee</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
									</tr>
									<tr>
										<td>Holidays</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
									</tr>
									<tr>
										<td>Leaves</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
									</tr>
									<tr>
										<td>Events</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
										<td class="text-center">
											<input checked="" type="checkbox">
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="submit-section">
							<button class="btn btn-primary submit-btn">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- /Edit User Modal -->

	<!-- Delete User Modal -->
	<div class="modal custom-modal fade" id="delete_user" role="dialog">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-body">
					<div class="form-header">
						<h3>Delete User</h3>
						<p>Are you sure want to delete?</p>
					</div>
					<div class="modal-btn delete-action">
						<div class="row">
							<div class="col-6">
								<a href="javascript:void(0);" class="btn btn-primary continue-btn">Delete</a>
							</div>
							<div class="col-6">
								<a href="javascript:void(0);" data-bs-dismiss="modal"
									class="btn btn-primary cancel-btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /Delete User Modal -->




@endsection

@section('script')

	<script>
	$(document).on('click', '.toggle-active', function () {
    const btn = $(this);
    const userId = btn.data('id');

    $.ajax({
        url: '/users/' + userId + '/toggle-active',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
            // غيّر النص والستايل بناءً على الحالة الجديدة
            if (response.is_active) {
                btn.text('تعطيل').removeClass('btn-success').addClass('btn-danger');
            } else {
                btn.text('تفعيل').removeClass('btn-danger').addClass('btn-success');
            }

            // رسالة اختيارية
            
			Swal.fire({
            icon: 'success',
            title: 'نجاح',
            text: response.message ,
            confirmButtonText: 'حسنًا'
        });
        },
        error: function (error) {
          Swal.fire({
            icon: 'error',
            title: 'خطأ',
            html: `{!! implode('<br>', $errors->all()) !!}`,
            confirmButtonText: 'حسنًا'
        });
        }
    });
});
			
		$(function () {
			$(document).on('click', '.btn-edit', function () {

				var btn = $(this);
	var originalText = btn.html();
	btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> جاري التحميل...');


				var userId = $(this).data('id');
				
				$.ajax({
					url: '/users/' + userId + '/edit',  // تأكد من وجود هذا الراوت
					method: 'GET',
					success: function (response) {
						// تعبيئة الحقول بالبيانات
						$('#user_id').val(response.id);
						$('#name').val(response.name);
						$('#email').val(response.email);
						$('#phone').val(response.phone);
						$('#address').val(response.address);
						$('#directorate').val(response.directorate);
						$('#user_name').val(response.user_name);
						$('#role_id').val(response.role_id);

						// تفضّل تفريغ حقول كلمة السر عند التعديل
						$('#password').val('');
						$('#password_confirmation').val('');
$('#password').removeAttr('required');
$('#password_confirmation').removeAttr('required');
						// تغيير عنوان المودال أو تفعيله إذا كان هناك حاجة
						$('#myForm').attr('action', '/users/' + userId);

$('#myForm').find('input[name="_method"]').remove();
			$('#myForm').append('<input type="hidden" name="_method" value="PUT">');
						// فتح المودال (إذا تستخدم Bootstrap Modal)
						var myModal = new bootstrap.Modal(document.getElementById('add_user'));
						myModal.show();
						btn.prop('disabled', false).html(originalText);
						
					},
					error: function () {
						alert('حدث خطأ أثناء جلب بيانات المستخدم');
						btn.prop('disabled', false).html(originalText);
					}
				});
			});
		});
	</script>


	<script src="{{ asset('assets/js/jquery.dataTables.min.js')}}"></script>
	<script src="{{ asset('assets/js/dataTables.bootstrap4.min.js')}}"></script>
	<script>
		if ($('.datatable').length > 0) {
			$('.datatable').DataTable({
				"bFilter": false,
			});
		}






$(document).on('click', '.toggle-contract', function () {
    const btn = $(this);
    const userId = btn.data('id');

    $.ajax({
        url: '/users/' + userId + '/toggle-contract',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
            // غيّر النص والستايل بناءً على الحالة الجديدة
            if (response.contract_account) {
                btn.text('الغاء تقييد المستخدم بجهاز واحد').removeClass('btn-success').addClass('btn-danger');
            } else {
                btn.text('تقييد المستخدم بجهاز واحد').removeClass('btn-danger').addClass('btn-success');
            }

            // رسالة اختيارية
            
			Swal.fire({
            icon: 'success',
            title: 'نجاح',
            text: response.message ,
            confirmButtonText: 'حسنًا'
        });
        },
        error: function (error) {
          Swal.fire({
            icon: 'error',
            title: 'خطأ',
            html: `{!! implode('<br>', $errors->all()) !!}`,
            confirmButtonText: 'حسنًا'
        });
        }
    });
});



	</script>



@endsection