@extends('layouts.master')
@section('title') Edit User - {{ $user->name }} @endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <form action="{{ route('outlet.update-user', ['outlet' => $outlet->id, 'user' => $user->id]) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">
                            <i class="fas fa-user-edit me-2"></i>Edit User - {{ $user->name }}
                            <small class="text-muted">({{ $outlet->outlet_name }})</small>
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- User Information --}}
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                        id="name" name="name"
                                        value="{{ old('name', $user->name) }}"
                                        placeholder="Enter full name" required>
                                    <label for="name"><i class="fas fa-user me-1"></i>Full Name *</label>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                                        id="email" name="email"
                                        value="{{ old('email', $user->email) }}"
                                        placeholder="Enter email address" required>
                                    <label for="email"><i class="fas fa-envelope me-1"></i>Email Address *</label>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror"
                                        id="phone" name="phone"
                                        value="{{ old('phone', $user->phone) }}"
                                        placeholder="Enter phone number" pattern="[0-9]{10}" maxlength="10" required>
                                    <label for="phone"><i class="fas fa-phone me-1"></i>Phone Number *</label>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- User Role --}}
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <select class="form-select @error('user_role') is-invalid @enderror" id="user_role" name="user_role" required>
                                        <option value="">Select Role</option>
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}"
                                                {{ old('user_role', $user->role) == $role->id ? 'selected' : '' }}>
                                                {{ $role->role_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label for="user_role"><i class="fas fa-user-tag me-1"></i>User Role *</label>
                                    @error('user_role')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Password Section --}}
                            <div class="col-12 mb-3">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Leave password fields blank if you don't want to change the password.
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="password" class="form-control @error('password') is-invalid @enderror"
                                        id="password" name="password"
                                        placeholder="Enter new password">
                                    <label for="password"><i class="fas fa-lock me-1"></i>New Password</label>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Minimum 8 characters</div>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                                        id="password_confirmation" name="password_confirmation"
                                        placeholder="Confirm new password">
                                    <label for="password_confirmation"><i class="fas fa-lock me-1"></i>Confirm Password</label>
                                    @error('password_confirmation')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Status --}}
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                        <option value="active" {{ old('status', $user->status) == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status', $user->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                    <label for="status"><i class="fas fa-status me-1"></i>Status *</label>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- User Info --}}
                            <div class="col-12">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title"><i class="fas fa-info-circle me-2"></i>User Information</h6>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <small class="text-muted">Created:</small>
                                                <p class="mb-1">{{ $user->created_at->format('M d, Y H:i') }}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <small class="text-muted">Last Updated:</small>
                                                <p class="mb-1">{{ $user->updated_at->format('M d, Y H:i') }}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <small class="text-muted">Outlet:</small>
                                                <p class="mb-1">{{ $outlet->outlet_name }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('outlet.users', $outlet->id) }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Back to Users
                            </a>
                            <div>
                                <button type="button" class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#deleteUserModal">
                                    <i class="fas fa-trash me-1"></i>Delete User
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>Update User
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete User Modal -->
    <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteUserModalLabel">
                        <i class="fas fa-exclamation-triangle me-2 text-danger"></i>Delete User
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete user <strong>{{ $user->name }}</strong>?</p>
                    <p class="text-muted">This action cannot be undone. The user will be permanently removed from the system.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form action="{{ route('outlet.destroy-user', ['outlet' => $outlet->id, 'user' => $user->id]) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-1"></i>Delete User
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Password strength indicator
            $('#password').on('input', function() {
                const password = $(this).val();
                const strength = checkPasswordStrength(password);
                updatePasswordStrength(strength);
            });

            function checkPasswordStrength(password) {
                let strength = 0;

                if (password.length >= 8) strength++;
                if (/[a-z]/.test(password)) strength++;
                if (/[A-Z]/.test(password)) strength++;
                if (/[0-9]/.test(password)) strength++;
                if (/[^A-Za-z0-9]/.test(password)) strength++;

                return strength;
            }

            function updatePasswordStrength(strength) {
                const meter = $('#password-strength-meter');
                const text = $('#password-strength-text');

                if (!meter.length) {
                    $('<div class="mt-2"><div class="progress" style="height: 5px;"><div id="password-strength-meter" class="progress-bar" role="progressbar"></div></div><small id="password-strength-text" class="form-text"></small></div>').insertAfter('#password');
                }

                const meterElement = $('#password-strength-meter');
                const textElement = $('#password-strength-text');

                let width = 0;
                let color = '';
                let message = '';

                switch(strength) {
                    case 0:
                        width = 0;
                        color = 'bg-danger';
                        message = 'Very weak';
                        break;
                    case 1:
                        width = 25;
                        color = 'bg-danger';
                        message = 'Weak';
                        break;
                    case 2:
                        width = 50;
                        color = 'bg-warning';
                        message = 'Fair';
                        break;
                    case 3:
                        width = 75;
                        color = 'bg-info';
                        message = 'Good';
                        break;
                    case 4:
                    case 5:
                        width = 100;
                        color = 'bg-success';
                        message = 'Strong';
                        break;
                }

                meterElement.css('width', width + '%').removeClass('bg-danger bg-warning bg-info bg-success').addClass(color);
                textElement.text(message).removeClass('text-danger text-warning text-info text-success').addClass(color.replace('bg-', 'text-'));
            }

            // Confirm password match
            $('#password_confirmation').on('input', function() {
                const password = $('#password').val();
                const confirmPassword = $(this).val();

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

            // Real-time validation
            $('input, select').on('blur', function() {
                const value = $(this).val();
                if ($(this).prop('required') && !value) {
                    $(this).addClass('is-invalid');
                } else {
                    $(this).removeClass('is-invalid');
                }
            });
        });
    </script>
@endsection