@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'User')
@endsection

@section('content')
    <style>
        .user-shell .user-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .user-shell .user-toolbar .lead {
            color: var(--salon-muted);
            font-size: 0.95rem;
            margin: 0;
        }

        .user-layout {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            min-height: 0;
        }

        @media (min-width: 992px) {
            .user-layout {
                flex-direction: row;
                align-items: stretch;
            }

            .user-sidebar {
                flex: 0 0 340px;
                max-width: 380px;
                min-height: 0;
            }

            .user-detail-wrap {
                flex: 1 1 auto;
                min-width: 0;
                min-height: 0;
            }
        }

        .user-sidebar .card,
        .user-detail-wrap .card {
            height: 100%;
            min-height: 0;
        }

        .user-sidebar > .card {
            display: flex;
            flex-direction: column;
        }

        .user-sidebar > .card > .card-body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .user-search {
            position: relative;
        }

        .user-search .form-control {
            border-radius: var(--salon-radius-sm);
            padding-left: 2.5rem;
            border-color: var(--salon-input-border);
        }

        .user-search .fa-search {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--salon-muted);
            pointer-events: none;
        }

        .user-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            margin: 0 -0.25rem;
            padding: 0 0.25rem;
            -webkit-overflow-scrolling: touch;
        }

        @media (max-width: 991.98px) {
            .user-list {
                max-height: min(55vh, 480px);
            }
        }

        .user-list-item {
            width: 100%;
            text-align: left;
            border: 1px solid var(--salon-border);
            background: #fff;
            border-radius: var(--salon-radius-sm);
            padding: 0.75rem 0.9rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .user-list-item:hover {
            border-color: var(--salon-primary-soft);
            box-shadow: 0 4px 14px rgba(76, 111, 255, 0.12);
        }

        .user-list-item.active {
            border-color: var(--salon-primary);
            background: linear-gradient(90deg, rgba(76, 111, 255, 0.08), #fff);
            box-shadow: 0 4px 18px rgba(76, 111, 255, 0.15);
        }

        .user-list-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            color: #fff;
            background: linear-gradient(135deg, var(--salon-primary), var(--salon-primary-soft));
            border: 2px solid var(--salon-border);
        }

        .user-list-meta {
            min-width: 0;
            flex: 1;
        }

        .user-list-name {
            font-weight: 600;
            color: var(--salon-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-list-sub {
            font-size: 0.82rem;
            color: var(--salon-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-badge {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.2rem 0.45rem;
            border-radius: 999px;
        }

        .user-detail-empty {
            text-align: center;
            padding: 3rem 1.5rem;
            color: var(--salon-muted);
        }

        .user-detail-empty i {
            font-size: 2.5rem;
            opacity: 0.35;
            margin-bottom: 0.75rem;
        }

        .user-detail-body {
            display: none;
        }

        .user-detail-body.is-visible {
            display: block;
        }

        .user-detail-header {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: flex-start;
            margin-bottom: 1.25rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--salon-border);
        }

        .user-detail-initial {
            width: 96px;
            height: 96px;
            border-radius: var(--salon-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, var(--salon-primary), var(--salon-accent));
            border: 2px solid var(--salon-border);
            box-shadow: var(--salon-card-shadow);
            flex-shrink: 0;
        }

        .user-detail-actions {
            margin-left: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        .user-sidebar-filters {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            flex-shrink: 0;
        }

        .user-sidebar-filters label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--salon-muted);
            margin-bottom: 0.25rem;
        }

        .user-list-wrap {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .modal-add-user .modal-content {
            border-radius: var(--salon-radius);
            border: 1px solid var(--salon-border);
            box-shadow: 0 18px 50px rgba(28, 38, 74, 0.18);
        }

        .modal-add-user .modal-header,
        .modal-add-user .modal-footer {
            border-color: var(--salon-border);
        }
    </style>

    @php
        $usersPageJson = $userData->map(function ($row) {
            return [
                'idUser' => $row->idUser,
                'Name' => $row->Name,
                'email' => $row->email,
                'TP' => $row->TP,
                'Status' => $row->Status == '1' || $row->Status === 1,
                'require_otp' => (int) ($row->require_otp ?? 1),
            ];
        })->values();
    @endphp

    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Users</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Users</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content user-shell">
            <div class="container-fluid">
                @if (session()->has('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
                @if (session()->has('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <div class="user-toolbar">
                    <p class="lead mb-0">Select an admin user on the left to edit details, or add a new user.</p>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_user_modal">
                        <i class="fas fa-user-plus mr-1"></i> Add user
                    </button>
                </div>

                <div class="user-layout">
                    <div class="user-sidebar">
                        <div class="card card-outline card-primary">
                            <div class="card-header border-0 pb-0">
                                <h3 class="card-title">Admin users</h3>
                            </div>
                            <div class="card-body pt-2">
                                <div class="user-sidebar-filters">
                                    <div>
                                        <label for="user_status_filter">Status</label>
                                        <select id="user_status_filter" class="form-control form-control-sm">
                                            <option value="all" selected>All users</option>
                                            <option value="active">Active only</option>
                                            <option value="inactive">Inactive only</option>
                                        </select>
                                    </div>
                                    <div class="user-search mb-0">
                                        <i class="fas fa-search"></i>
                                        {{-- type="text" + unique name + readonly-until-focus: stops browsers putting login email into this filter --}}
                                        <input type="text"
                                            id="user_list_filter"
                                            name="admin_user_list_filter"
                                            class="form-control"
                                            placeholder="Search name or email…"
                                            autocomplete="off"
                                            autocorrect="off"
                                            autocapitalize="off"
                                            spellcheck="false"
                                            data-lpignore="true"
                                            data-1p-ignore="true"
                                            inputmode="search"
                                            readonly>
                                    </div>
                                </div>
                                <script type="application/json" id="users-page-json">@json($usersPageJson)</script>
                                <div class="user-list-wrap" id="user_list_wrap">
                                    <div class="user-list" id="user_list">
                                        @forelse ($userData as $item)
                                            @php
                                                $initial = \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($item->Name ?: 'U', 0, 1));
                                                $isActive = $item->Status == '1' || $item->Status === 1;
                                            @endphp
                                            <button type="button" class="user-list-item"
                                                data-user-id="{{ $item->idUser }}"
                                                data-status="{{ $isActive ? 'active' : 'inactive' }}">
                                                <span class="user-list-avatar" aria-hidden="true">{{ $initial }}</span>
                                                <div class="user-list-meta">
                                                    <div class="user-list-name">{{ $item->Name }}</div>
                                                    <div class="user-list-sub">{{ $item->email }}</div>
                                                </div>
                                                @if ($isActive)
                                                    <span class="user-badge badge-success">Active</span>
                                                @else
                                                    <span class="user-badge badge-secondary">Inactive</span>
                                                @endif
                                            </button>
                                        @empty
                                            <p class="text-muted text-center mb-0">No users yet. Use <strong>Add user</strong> to create one.</p>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="user-detail-wrap">
                        <div class="card card-outline card-primary">
                            <div class="card-header border-0">
                                <h3 class="card-title mb-0">User details</h3>
                            </div>
                            <div class="card-body">
                                <div id="user_detail_empty" class="user-detail-empty">
                                    <i class="fas fa-hand-pointer d-block"></i>
                                    <p class="mb-0">Select a user from the list to view and update their profile.</p>
                                </div>

                                <div id="user_detail_form" class="user-detail-body">
                                    <div class="user-detail-header">
                                        <div class="user-detail-initial" id="user_header_initial">?</div>
                                        <div class="flex-grow-1 min-w-0">
                                            <h4 class="mb-1 font-weight-bold" id="user_display_name"></h4>
                                            <p class="text-muted mb-0 small" id="user_display_email"></p>
                                        </div>
                                        <div class="user-detail-actions">
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn_toggle_status_user">
                                                <i class="fas fa-exchange-alt mr-1"></i>
                                                <span id="btn_toggle_status_user_label">Change status</span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="u_Full_Name">Full name</label>
                                                <input type="text" name="u_Full_Name" class="form-control" id="u_Full_Name"
                                                    placeholder="Full name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="u_email">Email</label>
                                                <input type="email" name="u_email" class="form-control" id="u_email"
                                                    placeholder="Email address">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="u_password">New password</label>
                                                <input type="password" name="u_password" class="form-control" id="u_password"
                                                    placeholder="Leave blank to keep current password">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="u_contact_number">Contact number</label>
                                                <input type="text" name="u_contact_number" class="form-control"
                                                    id="u_contact_number" placeholder="Contact number">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group mb-0">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input" id="u_require_otp_user" checked>
                                                    <label class="custom-control-label" for="u_require_otp_user">Require email OTP after sign-in</label>
                                                </div>
                                                <small class="form-text text-muted">When off, this user can open the dashboard immediately after password (trusted devices only).</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-right">
                                        <button type="button" class="btn btn-primary" id="btn_update_user">
                                            <i class="fas fa-save mr-1"></i> Save changes
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade modal-add-user" id="add_user_modal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addUserModalLabel">Add user</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('user.signup') }}" method="post" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="add_user_full_name">Full name</label>
                                    <input type="text" name="Full_Name" class="form-control" id="add_user_full_name" placeholder="Full name" required autocomplete="name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="add_user_email">Email</label>
                                    <input type="email" name="email" class="form-control" id="add_user_email" placeholder="Email address" required autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="add_user_password">Password</label>
                                    <input type="password" name="password" class="form-control" id="add_user_password" placeholder="Password" required autocomplete="new-password">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="add_user_tp">Contact number</label>
                                    <input type="text" name="tp" class="form-control" id="add_user_tp" placeholder="Optional" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="add_user_require_otp"
                                            name="require_otp" value="1" checked>
                                        <label class="custom-control-label" for="add_user_require_otp">Require email OTP after sign-in</label>
                                    </div>
                                    <small class="form-text text-muted">When off, this user can open the dashboard right after password (trusted devices only).</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save user</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('dist/js/adminlte.min.js') }}"></script>
    <script src="{{ asset('JS/user.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function() {
            var usersById = {};
            var lastSelectedUserId = null;

            var $filter = $('#user_list_filter');
            $filter.val('');
            $filter.on('mousedown focus', function() {
                $(this).prop('readonly', false);
            });

            (function loadUsersJson() {
                var el = document.getElementById('users-page-json');
                if (!el) return;
                var raw = (el.textContent || '').trim();
                if (!raw) return;
                try {
                    JSON.parse(raw).forEach(function(u) {
                        if (u && u.idUser != null) {
                            usersById[String(u.idUser)] = u;
                        }
                    });
                } catch (e) {
                    console.error('users-page-json', e);
                }
            })();

            function applyUserListFilters() {
                var q = $('#user_list_filter').val().toLowerCase().trim();
                var st = $('#user_status_filter').val() || 'all';
                $('#user_list .user-list-item').each(function() {
                    var $b = $(this);
                    var text = $b.text().toLowerCase();
                    var rowSt = $b.data('status');
                    var okQ = !q || text.indexOf(q) !== -1;
                    var okS = st === 'all' || rowSt === st;
                    $b.toggle(okQ && okS);
                });
            }

            $('#user_list_filter').on('input', applyUserListFilters);
            $('#user_status_filter').on('change', applyUserListFilters);

            $('#user_list').on('click', '.user-list-item', function() {
                var id = $(this).data('user-id');
                lastSelectedUserId = id;
                var data = usersById[String(id)];
                if (!data) return;
                $('#user_list .user-list-item').removeClass('active');
                $(this).addClass('active');
                if (typeof window.populateUserDetail === 'function') {
                    window.populateUserDetail(data);
                }
            });

            $('#btn_update_user').on('click', function(e) {
                e.preventDefault();
                if (typeof window.updateUser === 'function') {
                    window.updateUser();
                }
            });

            $('#btn_toggle_status_user').on('click', function() {
                if (window.selectedUserId) {
                    updateStatusUser(window.selectedUserId);
                }
            });

            var first = $('#user_list .user-list-item').first();
            if (first.length) {
                first.trigger('click');
            }

            var addModal = $('#add_user_modal');
            addModal.on('shown.bs.modal', function() {
                $('#add_user_full_name').trigger('focus');
            });
            addModal.on('hidden.bs.modal', function() {
                addModal.find('form')[0].reset();
                $('#add_user_require_otp').prop('checked', true);
            });
        });
    </script>
@endsection