@extends('layout.mainlayout')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            @component('components.breadcrumb')
                @slot('title')
                    User List
                @endslot
                @slot('li_1')
                    Manage Your Users
                @endslot
                @slot('li_2')
                    Add New User
                @endslot
            @endcomponent

            <!-- /product list -->
            <div class="card table-list-card">
                <div class="card-body">
                    <div class="table-top">
                        <div class="search-set">
                            <div class="search-input">
                                <a href="" class="btn btn-searchset"><i data-feather="search"
                                        class="feather-search"></i></a>
                            </div>
                        </div>
                        <div class="search-path">
                            <div class="d-flex align-items-center">
                                <a class="btn btn-filter" id="filter_search">
                                    <i data-feather="filter" class="filter-icon"></i>
                                    <span><img src="{{ URL::asset('/build/img/icons/closes.svg') }}" alt="img"></span>
                                </a>
                            </div>
                        </div>
                        <div class="form-sort">
                            <i data-feather="sliders" class="info-img"></i>
                            <select class="select">
                                <option>Sort by Date</option>
                                <option>Newest</option>
                                <option>Oldest</option>
                            </select>
                        </div>
                    </div>
                    <!-- /Filter -->
                    <div class="card" id="filter_inputs">
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-lg-3 col-sm-6 col-12">
                                    <div class="input-blocks">
                                        <i data-feather="user" class="info-img"></i>
                                        <select class="select">
                                            <option>Choose Name</option>
                                            <option>Lilly</option>
                                            <option>Benjamin</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 col-12">
                                    <div class="input-blocks">
                                        <i data-feather="stop-circle" class="info-img"></i>
                                        <select class="select">
                                            <option>Choose Status</option>
                                            <option>Active</option>
                                            <option>Inactive</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 col-12">
                                    <div class="input-blocks">
                                        <i data-feather="zap" class="info-img"></i>
                                        <select class="select">
                                            <option>Choose Role</option>
                                            <option>Store Keeper</option>
                                            <option>Salesman</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 col-12">
                                    <div class="input-blocks">
                                        <a class="btn btn-filters ms-auto"> <i data-feather="search"
                                                class="feather-search"></i> Search </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Filter -->
                    <div class="table-responsive">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li class="text-danger">{{ $error }}</li>
                               
                            @endforeach
                        </ul>
                            <!-- Display Success Message -->
        @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
                        <table class="table datanew">
                            <thead>
                                <tr>
                                    <th class="no-sort">
                                        <label class="checkboxs">
                                            <input type="checkbox" id="select-all">
                                            <span class="checkmarks"></span>
                                        </label>
                                    </th>
                                    <th>User Name</th>
                                    <th>Phone</th>
                                    <th>email</th>
                                    <th>Role</th>
                                    <th>Created On</th>
                                    <th>Status</th>
                                    <th class="no-sort">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                <tr>
                                    <td>
                                        <label class="checkboxs">
                                            <input type="checkbox">
                                            <span class="checkmarks"></span>
                                        </label>
                                    </td>
                                    <td>{{ $user->full_name }}</td>
                                    <td>{{ $user->phone_number }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ ucfirst($user->role) }}</td>
                                    <td>{{ $user->created_at->format('d M Y') }}</td>
                                    <td>
                                        <span class="badge badge-line{{ $user->status == 'active' ? 'success' : 'danger' }}">
                                            {{ $user->status }}
                                        </span>
                        {{-- action for view edit and  delete --}}
                                    </td>
                                    <td class="action-table-data">
                                        <div class="edit-delete-action">


                                        <a href="#" class="me-2 p-2 mb-0 text-info view-user" data-id="{{ $user->id }}">
    <i data-feather="eye" class="action-eye"></i>
</a>


                                            {{--
                                            <a class="me-2 p-2 mb-0" href="javascript:void(0);">
                                                <i data-feather="eye" class="action-eye"></i>
                                            </a>
                                            --}}


                                            <a href="#" class="me-2 p-2 mb-0 text-warning edit-user" data-id="{{ $user->id }}">
    <i data-feather="edit" class="feather-edit"></i>
</a>

                                           {{--  <a class="me-2 p-2 mb-0" data-bs-toggle="modal" data-bs-target="#edit-units">
                                                <i data-feather="edit" class="feather-edit"></i>
                                            </a>
                                            --}}
                                            {{--
                                            <a class="me-2 confirm-text p-2 mb-0" href="javascript:void(0);">
                                                <i data-feather="trash-2" class="feather-trash-2"></i>
                                            </a>
                                            --}}


                                            <a href="#" class="me-2 p-2 mb-0 text-danger delete-user" data-id="{{ $user->id }}">
    <i data-feather="trash-2" class="feather-trash-2"></i>
</a>

<form id="delete-form-{{ $user->id }}" action="{{ route('users.destroy', $user->id) }}" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>


                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /product list -->
        </div>
    </div>

    
@if(Route::is(['users']))
<!-- Add User -->
	<div class="modal fade" id="add-units">
			<div class="modal-dialog modal-dialog-centered custom-modal-two">
				<div class="modal-content">
					<div class="page-wrapper-new p-0">
						<div class="content">
							<div class="modal-header border-0 custom-modal-header">
								<div class="page-title">
									<h4>Add User</h4>
								</div>
								<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body custom-modal-body">
							


                                <form action="{{ route('user.save') }}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>Full Name</label>
                                                <input type="text" name="full_name" class="form-control" required value="{{ old('full_name') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>Phone</label>
                                                <input type="text" name="phone_number" required class="form-control" value="{{ old('phone_number') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>User Name</label>
                                                <input type="text" name="username" required class="form-control" value="{{ old('username') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>Address</label>
                                                <input type="text" name="address" required class="form-control" value="{{ old('address') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>Email</label>
                                                <input type="email" name="email" required class="form-control" value="{{ old('email') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>Role</label>
                                                <select class="select" required name="role">
                                                    <option value="">Choose</option>
                                                  
                                                    <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                                                    <option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>User</option>
                                                     <option value="hr" {{ old('role') == 'user' ? 'selected' : '' }}>Hr</option>
                                                       <option value="director" {{ old('role') == 'director' ? 'selected' : '' }}>Executive Director</option>
                                                    
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>Password</label>
                                                <div class="pass-group">
                                                    <input type="password" required name="password" class="pass-input">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-blocks">
                                                <label>Confirm Password</label>
                                                <div class="pass-group">
                                                    <input type="password" required name="password_confirmation" class="pass-input">
                                                </div>
                                            </div>
                                        </div> --}}
                                    </div>
                                    <div class="modal-footer-btn">
                                        <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-submit">Submit</button>
                                    </div>
                                </form>
                                
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>

    @endif
<!-- /Add User -->


<!-- Script to delete user -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.delete-user').forEach(function (button) {
        button.addEventListener('click', function (e) {
            e.preventDefault();
            if (confirm('Are you sure you want to delete this user?')) {
                document.getElementById('delete-form-' + this.dataset.id).submit();
            }
        });
    });
});
</script>


<!-- View User Modal -->
<div class="modal fade" id="viewUserModal" tabindex="-1" aria-labelledby="viewUserLabel" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content shadow-lg rounded-3 border-0">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title fw-bold" id="viewUserLabel">
          <i class="fa fa-user-circle me-2"></i> User Details
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="printable-user-details">
        <div id="user-details" class="p-3 text-start text-muted">Loading...</div>
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          <i class="fa fa-times me-1"></i> Close
        </button>
        <button type="button" class="btn btn-success" id="printUserBtn">
          <i class="fa fa-print me-1"></i> Print
        </button>
      </div>
    </div>
  </div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function () {
    // View user details
    document.querySelectorAll('.view-user').forEach(function (button) {
        button.addEventListener('click', function (e) {
            e.preventDefault();
            const userId = this.dataset.id;
            const detailsDiv = document.getElementById('user-details');
            detailsDiv.innerHTML = '<p class="text-center text-muted">Loading...</p>';

            fetch(`/users/${userId}/details`)
                .then(response => response.json())
                .then(user => {
                    detailsDiv.innerHTML = `
                        <h5 class="text-center mb-3">${user.full_name}</h5>
                        <ul class="list-group list-group-flush text-start">
                            <li class="list-group-item"><strong>Phone:</strong> ${user.phone_number}</li>
                            <li class="list-group-item"><strong>Email:</strong> ${user.email}</li>
                            <li class="list-group-item"><strong>Role:</strong> ${user.role}</li>
                            <li class="list-group-item"><strong>Status:</strong> ${user.status}</li>
                            <li class="list-group-item"><strong>Address:</strong> ${user.address}</li>
                        </ul>
                    `;
                })
                .catch(() => {
                    detailsDiv.innerHTML = '<p class="text-danger text-center">Failed to load user details.</p>';
                });

            const modal = new bootstrap.Modal(document.getElementById('viewUserModal'));
            modal.show();
        });
    });

    // Print user details
    document.getElementById('printUserBtn').addEventListener('click', function () {
        const printContents = document.getElementById('printable-user-details').innerHTML;
        const printWindow = window.open('', '', 'height=600,width=800');
        printWindow.document.write('<html><head><title>User Details</title></head><body>');
        printWindow.document.write(printContents);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.print();
    });
});
</script>



<!-- View User popup script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.view-user').forEach(function (button) {
        button.addEventListener('click', function (e) {
            e.preventDefault();
            const userId = this.dataset.id;
            const detailsDiv = document.getElementById('user-details');
            detailsDiv.innerHTML = '<p class="text-center text-muted">Loading...</p>';

            fetch(`/users/${userId}/details`)
                .then(response => response.json())
                .then(user => {
                    detailsDiv.innerHTML = `
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><strong>Name:</strong> ${user.full_name}</li>
                            <li class="list-group-item"><strong>Phone:</strong> ${user.phone_number}</li>
                            <li class="list-group-item"><strong>Email:</strong> ${user.email}</li>
                            <li class="list-group-item"><strong>Role:</strong> ${user.role}</li>
                            <li class="list-group-item"><strong>Status:</strong> ${user.status}</li>
                            <li class="list-group-item"><strong>Address:</strong> ${user.address}</li>
                        </ul>
                    `;
                })
                .catch(() => {
                    detailsDiv.innerHTML = '<p class="text-danger text-center">Failed to load user details.</p>';
                });

            const modal = new bootstrap.Modal(document.getElementById('viewUserModal'));
            modal.show();
        });
    });
});
</script>



<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow-lg rounded-3">
      <div class="modal-header bg-warning text-white">
        <h5 class="modal-title" id="editUserLabel">Edit User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editUserForm" method="POST">
        @csrf
        @method('PUT')
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Full Name</label>
            <input type="text" name="full_name" id="edit_full_name" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Phone</label>
            <input type="text" name="phone_number" id="edit_phone_number" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" name="email" id="edit_email" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Role</label>
            <select name="role" id="edit_role" class="form-select" required>
              <option value="admin">Admin</option>
              <option value="user">User</option>
              <option value="hr">Hr</option>
              <option value="director">Executive Director</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-warning text-white">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.edit-user').forEach(function (button) {
        button.addEventListener('click', function (e) {
            e.preventDefault();
            const userId = this.dataset.id;

            fetch(`/users/${userId}/details`)
                .then(response => response.json())
                .then(user => {
                    document.getElementById('edit_full_name').value = user.full_name;
                    document.getElementById('edit_phone_number').value = user.phone_number;
                    document.getElementById('edit_email').value = user.email;
                    document.getElementById('edit_role').value = user.role;
                    document.getElementById('editUserForm').action = `/users/${userId}`;
                });

            const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
            modal.show();
        });
    });
});
</script>


@endsection