@extends('layouts.main')

@section('otherCss')
<style>
.profile-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    color: white;
    padding: 2rem;
    margin-bottom: 2rem;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    font-size: 2.5rem;
    margin: 0 auto 1rem;
}

.admin-card {
    transition: transform 0.2s;
}

.admin-card:hover {
    transform: translateY(-2px);
}

.user-type-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.password-strength {
    height: 4px;
    border-radius: 2px;
    margin-top: 0.5rem;
    background: #e9ecef;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    transition: all 0.3s ease;
}

.strength-weak { background: #dc3545; width: 25%; }
.strength-fair { background: #ffc107; width: 50%; }
.strength-good { background: #28a745; width: 75%; }
.strength-strong { background: #007bff; width: 100%; }
</style>
@endsection

@section('contents')
    <div class="container-fluid">
        <!-- Page-Title -->
        <x-bread-crumbs>
            <div class="float-right">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active">Admin Profile</li>
                </ol>
            </div>
            <h4 class="page-title">MSPDCL Surya Ghar</h4>
        </x-bread-crumbs>

        <div class="row">
            <!-- Current Admin Profile -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="profile-card">
                        <div class="row align-items-center">
                            <div class="col-md-3 text-center">
                                <div class="profile-avatar">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                            </div>
                            <div class="col-md-9">
                                <h3 class="mb-1">{{ $user->name }}</h3>
                                <p class="mb-2 opacity-75">{{ $user->email }}</p>
                                <span class="badge badge-light user-type-badge">
                                    {{ $user->user_type == 1 ? 'Super Admin' : 'Admin' }}
                                </span>
                                <p class="mt-3 mb-0 opacity-75">
                                    <i class="mdi mdi-calendar-clock mr-2"></i>
                                    Member since {{ $user->created_at->format('F Y') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-body">
                        <h4 class="header-title">Update Profile Information</h4>
                        <p class="text-muted mb-4">Update your account's profile information and password.</p>
                        
                        <form id="admin-profile-form" action="{{ route('admin.profile.update') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">Full Name</label>
                                        <input type="text" class="form-control" id="name" name="name" value="{{ $user->name }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">Email Address</label>
                                        <input type="email" class="form-control" id="email" name="email" value="{{ $user->email }}" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone">Phone Number</label>
                                        <input type="tel" class="form-control" id="phone" name="phone" value="{{ $user->phone }}" placeholder="Enter phone number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="user_type_display">Account Type</label>
                                        <input type="text" class="form-control" id="user_type_display" 
                                               value="{{ $user->user_type == 1 ? 'Super Admin' : 'Admin' }}" disabled>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4">
                            
                            <h5 class="mb-3">Change Password</h5>
                            <p class="text-muted mb-3">Leave blank if you don't want to change your password.</p>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="current_password">Current Password</label>
                                        <input type="password" class="form-control" id="current_password" name="current_password" placeholder="Enter current password">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="new_password">New Password</label>
                                        <input type="password" class="form-control" id="new_password" name="new_password" placeholder="Enter new password">
                                        <div class="password-strength">
                                            <div class="password-strength-bar" id="password-strength-bar"></div>
                                        </div>
                                        <small class="text-muted" id="password-strength-text"></small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="new_password_confirmation">Confirm New Password</label>
                                        <input type="password" class="form-control" id="new_password_confirmation" name="new_password_confirmation" placeholder="Confirm new password">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-gradient-primary">
                                    <i class="mdi mdi-content-save mr-2"></i>Update Profile
                                </button>
                                <button type="button" class="btn btn-light" onclick="resetForm()">
                                    <i class="mdi mdi-refresh mr-2"></i>Reset
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Admin Management -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title">Admin Management</h4>
                        <p class="text-muted mb-4">Manage other admin users in the system.</p>
                        
                        <button type="button" class="btn btn-gradient-success btn-sm mb-3" data-toggle="modal" data-target="#createAdminModal">
                            <i class="mdi mdi-plus mr-2"></i>Create New Admin
                        </button>
                        
                        <div class="admin-list">
                            @forelse($admins as $admin)
                            <div class="admin-card card bg-light mb-2">
                                <div class="card-body py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1">{{ $admin->name }}</h6>
                                            <small class="text-muted">{{ $admin->email }}</small>
                                        </div>
                                        <div class="d-flex align-items-end flex-column">
                                            <span class="badge badge-{{ $admin->user_type == 1 ? 'primary' : 'secondary' }} user-type-badge mr-2">
                                                {{ $admin->user_type == 1 ? 'Super Admin' : 'Admin' }}
                                            </span>
                                            <button type="button" class="btn btn-danger btn-xs mt-2" onclick="deleteAdmin({{ $admin->id }}, '{{ $admin->name }}')">
                                                <i class="mdi mdi-delete"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <small class="text-muted">
                                        <i class="mdi mdi-calendar-clock mr-1"></i>
                                        Created {{ $admin->created_at->diffForHumans() }}
                                    </small>
                                </div>
                            </div>
                            @empty
                            <div class="text-center text-muted py-4">
                                <i class="mdi mdi-account-multiple-outline display-4"></i>
                                <p class="mt-2">No other admin users found.</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Admin Modal -->
    <div class="modal fade" id="createAdminModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Admin User</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="create-admin-form" action="{{ route('admin.create-user') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="admin_name">Full Name</label>
                                    <input type="text" class="form-control" id="admin_name" name="name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="admin_email">Email Address</label>
                                    <input type="email" class="form-control" id="admin_email" name="email" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="admin_phone">Phone Number</label>
                                    <input type="tel" class="form-control" id="admin_phone" name="phone">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="admin_user_type">User Type</label>
                                    <select class="form-control" id="admin_user_type" name="user_type" required>
                                        <option value="">Select user type</option>
                                        <option value="1">Super Admin</option>
                                        <option value="2">Admin</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="admin_password">Password</label>
                                    <input type="password" class="form-control" id="admin_password" name="password" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="admin_password_confirmation">Confirm Password</label>
                                    <input type="password" class="form-control" id="admin_password_confirmation" name="password_confirmation" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-gradient-primary">
                            <i class="mdi mdi-account-plus mr-2"></i>Create Admin
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('otherJs')
<script>

function resetForm() {
    document.getElementById('admin-profile-form').reset();
    $('#password-strength-bar').removeClass().addClass('password-strength-bar');
    $('#password-strength-text').text('');
}

function deleteAdmin(id, name) {
    console.log(`Deleting admin user: ${name} (ID: ${id})`);
}
</script>

{{-- Swal.fire({
        title: 'Delete Admin User?',
        text: `Are you sure you want to delete ${name}? This action cannot be undone.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            loader.showBodyLoader();
            
            $.ajax({
                url: `{{ route('admin.delete-user', '${id}') }}/`,
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    loader.hideBodyLoader();
                    if (response.status === 1) {
                        Swal.fire('Deleted!', response.message, 'success').then(() => {
                            location.reload();
                        });
                    }
                },
                error: function(xhr) {
                    loader.hideBodyLoader();
                    const response = xhr.responseJSON;
                    Swal.fire('Error!', response.message || 'Something went wrong!', 'error');
                }
            });
        }
    }); --}}
@endsection