@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-start">
        @include('layouts.left-menu')
        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-10 col-xl-10 col-xxl-10">
            <div class="row pt-2">
                <div class="col ps-4">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="display-6 mb-0">
                        <i class="bi bi-key-fill"></i> Change Password
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{route('subadmin.list.show')}}">Sub-Admin List</a></li>
                            <li class="breadcrumb-item active">Change Password</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{{route('subadmin.list.show')}}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    @include('session-messages')

    <!-- Validation Errors -->
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h5 class="alert-heading"><i class="bi bi-exclamation-triangle-fill"></i> Validation Errors</h5>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            
            <!-- Sub-Admin Info Card -->
            <div class="card shadow-sm border-info mb-4">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="bi bi-person-circle"></i> Sub-Admin Information</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-1"><strong>Name:</strong></p>
                            <p class="text-muted">{{$subadmin->first_name}} {{$subadmin->last_name}}</p>
                        </div>
                        <div class="col-md-6">
                            <p class="mb-1"><strong>Email:</strong></p>
                            <p class="text-muted">{{$subadmin->email}}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Change Password Form -->
            <form action="{{route('subadmin.password.update')}}" method="POST">
                @csrf
                <input type="hidden" name="subadmin_id" value="{{$subadmin->id}}">

                <div class="card shadow-sm border-danger">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0"><i class="bi bi-shield-lock-fill"></i> New Password</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <div class="alert alert-warning">
                                    <i class="bi bi-exclamation-triangle-fill"></i> <strong>Security Note:</strong><br>
                                    The sub-admin will need to use this new password for their next login. 
                                    Make sure to communicate the new password securely.
                                </div>
                            </div>
                            <div class="col-md-12">
                                <label for="inputPassword" class="form-label fw-bold">
                                    <i class="bi bi-key"></i> New Password 
                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                </label>
                                <div class="input-group">
                                    <input type="password" class="form-control form-control-lg" 
                                           id="inputPassword" name="password" 
                                           placeholder="Enter new password" required>
                                    <button class="btn btn-outline-secondary" type="button" 
                                            onclick="togglePasswordVisibility('inputPassword', this)">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Minimum 8 characters, include letters and numbers</small>
                            </div>
                            <div class="col-md-12">
                                <label for="inputPasswordConfirmation" class="form-label fw-bold">
                                    <i class="bi bi-key-fill"></i> Confirm New Password 
                                    <sup><i class="bi bi-asterisk text-danger"></i></sup>
                                </label>
                                <div class="input-group">
                                    <input type="password" class="form-control form-control-lg" 
                                           id="inputPasswordConfirmation" name="password_confirmation" 
                                           placeholder="Confirm new password" required>
                                    <button class="btn btn-outline-secondary" type="button" 
                                            onclick="togglePasswordVisibility('inputPasswordConfirmation', this)">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-light">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">
                                    <i class="bi bi-info-circle"></i> Passwords must match
                                </small>
                            </div>
                            <div>
                                <a href="{{route('subadmin.list.show')}}" class="btn btn-secondary me-2">
                                    <i class="bi bi-x-circle"></i> Cancel
                                </a>
                                <button type="submit" class="btn btn-danger px-4">
                                    <i class="bi bi-key-fill"></i> Change Password
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
                </div>
            </div>
            @include('layouts.footer')
        </div>
    </div>
</div>

<script>
function togglePasswordVisibility(inputId, button) {
    const input = document.getElementById(inputId);
    const icon = button.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    }
}
</script>
@endsection