@extends('home_layout.master_sidebar')

@section('page_styles')
    <style>
        /* Container and header styles */
        .users-container {
            max-width: 1000px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .users-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .users-header h3 {
            font-weight: bold;
            margin: 0;
        }
        .btn-add-user {
            background-color: #007bff;
            color: #fff;
            padding: 10px 15px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            border: none;
        }
        .btn-add-user:hover {
            background-color: #0056b3;
        }
        /* Table styles */
        .user-table {
            width: 100%;
            border-collapse: collapse;
        }
        .user-table th, .user-table td {
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            text-align: left;
            font-size: 0.9em;
        }
        .user-table th {
            color: #6c757d;
            font-weight: bold;
        }
        .user-info {
            display: flex;
            align-items: center;
        }
        .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }
        .profile-placeholder {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ccc;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Users',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => '#'],
           ['title' => 'Users', 'link' => '#']
       ]
    ])
@stop

@section('content')
    <div class="container-fluid users-container">
        <div class="users-header">
            <h3>Users</h3>
            <button class="btn-add-user" data-bs-toggle="modal" data-bs-target="#addUserModal">Add User</button>
        </div>

        <!-- Tabs (Active Tab) -->
        <div class="tabs">
            <div class="tab active">Active</div>
        </div>

        <!-- Search Bar -->
        <div class="search-bar">
            <input type="text" id="userSearch" placeholder="Search Users..." />
        </div>

        <!-- User Table -->
        <table class="user-table" id="usersTable">
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Events</th>
                <th>Bookings</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            @foreach($users as $user)
                <tr data-user='@json($user)'>
                    <td>
                        <div class="user-info">
                            @if($user->profile_picture && file_exists(public_path('uploads/profile_pictures/' . $user->profile_picture)))
                                <img src="{{ asset('uploads/profile_pictures/' . $user->profile_picture) }}" alt="User Picture">
                            @else
                                <div class="profile-placeholder">
                                    {{ strtoupper(substr($user->name, 0, 2)) }}
                                </div>
                            @endif
                            <span>{{ $user->name }}</span>
                        </div>
                    </td>
                    <td>{{ $user->email }}</td>
                    <td>{{ $user->created_at->format('Y-m-d') }}</td>
                    <td>{{ $user->events_count ?? 0 }}</td>
                    <td>{{ $user->bookings_count ?? 0 }}</td>
                    <td>
                        <button class="btn btn-primary btn-sm edit-user-btn" data-user-id="{{ $user->id }}" data-bs-toggle="modal" data-bs-target="#editUserModal">Edit</button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@stop

@section('page_modals')
    <!-- Add User Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <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" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('users.upsert') }}" enctype="multipart/form-data">
                        @csrf
                        <!-- Basic Fields -->
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <!-- Toggle Additional Fields -->
                        <div class="form-group form-toggle-checkbox">
                            <input type="checkbox" id="toggleAdditionalFields">
                            <label for="toggleAdditionalFields">Add more details</label>
                        </div>
                        <div class="hidden-fields" id="additionalFields" style="display: none;">
                            <!-- Additional fields here (phone, address, country, timezone, language, date_format, time_format, welcome_message, profile_picture) -->
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" name="phone" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>Address</label>
                                <input type="text" name="address" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>Country</label>
                                <select name="country" class="form-control">
                                    @foreach(getCountryList() as $code => $name)
                                        <option value="{{ $code }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Timezone</label>
                                <select name="timezone" class="form-control">
                                    @foreach(getAllowedUSATimezones() as $tzKey => $tzLabel)
                                        <option value="{{ $tzKey }}">{{ $tzLabel }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Language</label>
                                <select name="language" class="form-control">
                                    <option value="en">English</option>
                                    <option value="es">Spanish</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Date Format</label>
                                <select name="date_format" class="form-control">
                                    <option value="Y-m-d">YYYY-MM-DD</option>
                                    <option value="d-m-Y">DD-MM-YYYY</option>
                                    <option value="m/d/Y">MM/DD/YYYY</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Time Format</label>
                                <select name="time_format" class="form-control">
                                    <option value="H:i">24-hour</option>
                                    <option value="h:i A">12-hour</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Welcome Message</label>
                                <textarea name="welcome_message" class="form-control"></textarea>
                            </div>
                            <div class="form-group">
                                <label>Profile Picture</label>
                                <input type="file" name="profile_picture" class="form-control-file">
                            </div>
                        </div>
                        <!-- Password Fields (required on create) -->
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" id="add_password" name="password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" id="add_confirm_password" name="confirm_password" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 mt-3">Save User</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <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" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Same route is used; hidden user_id field signals update -->
                    <form method="POST" action="{{ route('users.upsert') }}" id="editUserForm" enctype="multipart/form-data">
                        @csrf
                        <!-- For update, include user_id -->
                        <input type="hidden" name="user_id" id="edit_user_id">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" name="name" id="edit_name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" id="edit_email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="text" name="phone" id="edit_phone" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Address</label>
                            <input type="text" name="address" id="edit_address" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Country</label>
                            <select name="country" id="edit_country" class="form-control">
                                @foreach(getCountryList() as $code => $name)
                                    <option value="{{ $code }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Timezone</label>
                            <select name="timezone" id="edit_timezone" class="form-control">
                                @foreach(getAllowedUSATimezones() as $tzKey => $tzLabel)
                                    <option value="{{ $tzKey }}">{{ $tzLabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Language</label>
                            <select name="language" id="edit_language" class="form-control">
                                <option value="en">English</option>
                                <option value="es">Spanish</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Date Format</label>
                            <select name="date_format" id="edit_date_format" class="form-control">
                                <option value="Y-m-d">YYYY-MM-DD</option>
                                <option value="d-m-Y">DD-MM-YYYY</option>
                                <option value="m/d/Y">MM/DD/YYYY</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Time Format</label>
                            <select name="time_format" id="edit_time_format" class="form-control">
                                <option value="H:i">24-hour</option>
                                <option value="h:i A">12-hour</option>
                            </select>
                        </div>
                        <!-- Password Fields (optional for edit) -->
                        <div class="form-group">
                            <label>Password <small>(Optional. If one field is filled, both are required and must match.)</small></label>
                            <input type="password" id="edit_password" name="password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" id="edit_confirm_password" name="confirm_password" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-primary w-100 mt-3">Update User</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_scripts')
    <!-- Include pwstrength-bootstrap from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pwstrength-bootstrap/2.1.1/pwstrength-bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            // Toggle additional fields in Add User modal
            $('#toggleAdditionalFields').on('change', function() {
                $('#additionalFields').toggle(this.checked);
            });

            // Filter table rows based on search input
            $('#userSearch').on('keyup', function() {
                var value = $(this).val().toLowerCase();
                $('#usersTable tbody tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });

            // Initialize password strength analyzer on Add User modal field
            $('#add_password').pwstrength({
                common: {
                    userInputs: ['input[name="email"]']
                }
            });

            // When Edit button is clicked, populate the Edit modal with user data
            $('.edit-user-btn').on('click', function() {
                var row = $(this).closest('tr');
                var user = row.data('user');

                $('#edit_user_id').val(user.id);
                $('#edit_name').val(user.name);
                $('#edit_email').val(user.email);
                $('#edit_phone').val(user.phone);
                $('#edit_address').val(user.address);
                $('#edit_country').val(user.country);
                $('#edit_timezone').val(user.timezone);
                $('#edit_language').val(user.language);
                $('#edit_date_format').val(user.date_format);
                $('#edit_time_format').val(user.time_format);

                // Clear previous password entries
                $('#edit_password').val('');
                $('#edit_confirm_password').val('');
            });

            // Initialize password strength analyzer on Edit User modal field
            $('#edit_password').pwstrength({
                common: {
                    userInputs: ['input[name="email"]']
                }
            });
        });
    </script>
@stop