@push('title')
    Edit User
@endpush

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<x-app-layout>
    @can('update_user_management')
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="card-title mb-0">Edit User</h5>
                </div>

                <form action="{{ route('users.update', $user->id) }}" method="POST" id="userForm">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <!-- Personal Information -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">Full Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" id="name"
                                    value="{{ old('name', $user->name ?? '') }}" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address <span
                                        class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control" id="email"
                                    value="{{ old('email', $user->email ?? '') }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                                <select name="role" class="form-select" id="edit-role-select" required>
                                    <option value="">Select A Role</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->name }}"
                                            data-name="{{ strtolower($role->name) }}"
                                            @if ($user->roles->contains('name', $role->name)) selected @endif>
                                            {{ ucfirst($role->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Cashier warehouse assignment --}}
                        <div class="col-md-12" id="edit-warehouse-field" style="{{ $user->hasRole('cashier') ? '' : 'display:none;' }}">
                            <div class="mb-3">
                                <label class="form-label">Assigned Warehouses <span class="text-danger">*</span></label>
                                <select name="warehouse_ids[]" id="edit-warehouse-select" class="form-control" multiple>
                                    @foreach($warehouses as $wh)
                                        <option value="{{ $wh->id }}"
                                            {{ $user->warehouses->contains($wh->id) ? 'selected' : '' }}>
                                            {{ $wh->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Select one or more warehouses this cashier can operate in.</small>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Update User
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Password Section -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="card-title mb-0">Password Management</h6>
                <small class="text-muted">Leave blank to keep current password</small>
            </div>
            <div class="card-body">
                <form action="{{ route('users.resetpassword', $user->id) }}" method="POST" id="userForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password" class="form-label">New Password</label>
                                <input type="password" name="password" class="form-control" id="password">
                                <small class="form-text text-muted">Minimum 8 characters</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password_confirmation" class="form-label">Confirm New Password</label>
                                <input type="password" name="password_confirmation" class="form-control"
                                    id="password_confirmation">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class='bx bx-key'></i> Reset Password
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endcan

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        // Auto-hide alerts after 5 seconds
        $("#success-alert, #info-alert, #warning-alert, #danger-alert, #validation-alert").fadeTo(5000, 500).slideUp(500,
            function() {
                $(this).slideUp(500);
            });

        // Init Select2 for warehouse multi-select in edit form
        $('#edit-warehouse-select').select2({
            placeholder: 'Select warehouses...',
            width: '100%'
        });

        // Show/hide warehouse field based on role change
        $('#edit-role-select').on('change', function () {
            const selectedName = $(this).find(':selected').data('name') || '';
            if (selectedName === 'cashier') {
                $('#edit-warehouse-field').show();
                $('#edit-warehouse-select').prop('required', true);
            } else {
                $('#edit-warehouse-field').hide();
                $('#edit-warehouse-select').prop('required', false).val(null).trigger('change');
            }
        });

        // Auto-generate username from name
        $('input[name="name"]').on('input', function() {
            if (!$('input[name="username"]').val()) {
                let username = $(this).val()
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9\s]/g, '')
                    .replace(/\s+/g, '_');
                $('input[name="username"]').val(username);
            }
        });

        // Password confirmation validation
        $('input[name="password_confirmation"]').on('input', function() {
            let password = $('input[name="password"]').val();
            let confirmPassword = $(this).val();

            if (password !== confirmPassword && confirmPassword.length > 0) {
                $(this).addClass('is-invalid');
                if (!$(this).next('.invalid-feedback').length) {
                    $(this).after('<div class="invalid-feedback">Passwords do not match</div>');
                }
            } else {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            }
        });
    </script>
</x-app-layout>