@extends('layouts.app')

@section('title', 'User Management - Tiqkets')
@section('page-title', 'User Management')

@section('header-action')
    <div class="d-flex gap-3 align-items-center">
        <select class="form-select" id="outletFilter" style="width: 200px;">
            <option value="">All Outlets</option>
            @foreach($outlets ?? [] as $outlet)
                <option value="{{ $outlet->id }}">{{ $outlet->name ?? $outlet->outlet_name }}</option>
            @endforeach
        </select>

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
            Add User
        </button>
    </div>
@endsection

@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Users Table -->
    <div class="users-table-card">
        @if($users->count() > 0)
            <div class="table-wrapper">
                <table class="users-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th>Outlet</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr>
                                <td>
                                    <div class="user-name">{{ $user->name }}</div>
                                </td>
                                <td>
                                    <div class="user-email">{{ $user->email }}</div>
                                </td>
                                <td>
                                    <div class="user-phone">{{ $user->phone }}</div>
                                </td>
                                <td>
                                    <div class="user-role">{{ $user->getRoleName() }}</div>
                                </td>
                                <td>
                                    <div class="outlet-name">{{ $user->outlet->name ?? $user->outlet->outlet_name ?? 'N/A' }}</div>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="btn-icon" title="Edit"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editUserModal"
                                                data-user-id="{{ $user->id }}"
                                                data-user-name="{{ $user->name }}"
                                                data-user-email="{{ $user->email }}"
                                                data-user-phone="{{ $user->phone }}"
                                                data-user-outlet="{{ $user->bid }}"
                                                data-user-status="{{ $user->status }}">
                                            <i class="fas fa-pen"></i>
                                        </button>
                                        <button class="btn-icon text-danger" title="Delete"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteUserModal"
                                                data-user-id="{{ $user->id }}"
                                                data-user-name="{{ $user->name }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($users->hasPages())
                <div class="pagination-wrapper">
                    {{ $users->links('pagination::bootstrap-5') }}
                </div>
            @endif
        @else
            <div class="empty-state">
                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No Users Found</h5>
                <p class="text-muted">No users have been created yet.</p>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
                    <i class="fas fa-plus-circle me-2"></i> Add First User
                </button>
            </div>
        @endif
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('food-court.users.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Outlet <span class="text-danger">*</span></label>
                            <select name="outlet_id" class="form-select" required>
                                <option value="">Select Outlet</option>
                                @foreach($outlets ?? [] as $outlet)
                                    <option value="{{ $outlet->id }}">{{ $outlet->name ?? $outlet->outlet_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Phone <span class="text-danger">*</span></label>
                            <input type="tel" name="phone" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Password <span class="text-danger">*</span></label>
                            <input type="password" name="password" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                            <input type="password" name="password_confirmation" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</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-primary">Add User</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editUserForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Outlet <span class="text-danger">*</span></label>
                            <select name="outlet_id" id="edit_outlet_id" class="form-select" required>
                                <option value="">Select Outlet</option>
                                @foreach($outlets ?? [] as $outlet)
                                    <option value="{{ $outlet->id }}">{{ $outlet->name ?? $outlet->outlet_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="edit_name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" id="edit_email" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Phone <span class="text-danger">*</span></label>
                            <input type="tel" name="phone" id="edit_phone" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Password (Leave blank to keep current)</label>
                            <input type="password" name="password" id="edit_password" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" name="password_confirmation" id="edit_password_confirmation" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" id="edit_status" class="form-select" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</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-primary">Update User</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete User Modal -->
    <div class="modal fade" id="deleteUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete user <strong id="deleteUserName"></strong>?</p>
                    <p class="text-danger mb-0">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        This action cannot be undone.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteUserForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete User</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    /* Table Card */
    .users-table-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .users-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }

    .users-table thead {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .users-table thead th {
        padding: 16px 20px;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        border: none;
    }

    .users-table tbody tr {
        border-bottom: 1px solid #f3f4f6;
        transition: background-color 0.2s;
    }

    .users-table tbody tr:hover {
        background-color: #f9fafb;
    }

    .users-table tbody tr:last-child {
        border-bottom: none;
    }

    .users-table tbody td {
        padding: 16px 20px;
        font-size: 14px;
        color: #111827;
        vertical-align: middle;
    }

    .user-name {
        font-weight: 500;
        color: #111827;
    }

    .user-email {
        font-size: 13px;
        color: #6b7280;
    }

    .user-phone {
        font-size: 13px;
        color: #6b7280;
    }

    .user-role {
        font-size: 13px;
        color: #6b7280;
    }

    .outlet-name {
        font-size: 13px;
        color: #6b7280;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

    .btn-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        color: #6b7280;
        padding: 0;
        border: none;
    }

    .btn-icon:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #374151;
    }

    .btn-icon.text-danger {
        color: #dc2626;
    }

    .btn-icon.text-danger:hover {
        background: #fee2e2;
        border-color: #fecaca;
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 20px;
        text-align: center;
    }

    .empty-state i {
        opacity: 0.3;
    }

    .pagination-wrapper {
        padding: 16px 20px;
        border-top: 1px solid #e5e7eb;
    }

    /* Modal Styling */
    .modal-header {
        border-bottom: 1px solid #e5e7eb;
        padding: 20px 24px;
    }

    .modal-body {
        padding: 24px;
    }

    .modal-footer {
        border-top: 1px solid #e5e7eb;
        padding: 16px 24px;
    }

    .form-label {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 8px;
    }

    .form-control,
    .form-select {
        font-size: 14px;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .users-table {
            font-size: 13px;
        }

        .users-table thead th,
        .users-table tbody td {
            padding: 12px 10px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Edit user modal
        const editButtons = document.querySelectorAll('[data-bs-target="#editUserModal"]');

        editButtons.forEach(button => {
            button.addEventListener('click', function() {
                const userId = this.dataset.userId;
                const userName = this.dataset.userName;
                const userEmail = this.dataset.userEmail;
                const userPhone = this.dataset.userPhone;
                const userOutlet = this.dataset.userOutlet;
                const userStatus = this.dataset.userStatus;

                // Set form action
                document.getElementById('editUserForm').action = `/food-court/users/${userId}`;

                // Fill form fields
                document.getElementById('edit_name').value = userName;
                document.getElementById('edit_email').value = userEmail;
                document.getElementById('edit_phone').value = userPhone;
                document.getElementById('edit_outlet_id').value = userOutlet;
                document.getElementById('edit_status').value = userStatus;
            });
        });

        // Delete user modal
        const deleteButtons = document.querySelectorAll('[data-bs-target="#deleteUserModal"]');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const userId = this.dataset.userId;
                const userName = this.dataset.userName;

                document.getElementById('deleteUserName').textContent = userName;
                document.getElementById('deleteUserForm').action = `/food-court/users/${userId}`;
            });
        });

        // Auto-dismiss alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
</script>
@endpush