@extends('admin.master')

@section('title', 'Admin Profile')

@section('content')

<div class="admin_profile_page">
    <div class="container-fluid py-4">

        {{-- Page Header --}}
        <div class="admin_profile_page_header">
            <div>
                <h3 class="admin_profile_page_title">
                    Admin Profile
                </h3>

                <p class="admin_profile_page_description">
                    Manage your account information and password.
                </p>
            </div>
        </div>

        <div class="row g-4">

            {{-- Profile Summary --}}
            <div class="col-xl-4 col-lg-5">

                <div class="admin_profile_card admin_profile_summary_card">

                    <div class="admin_profile_summary_cover"></div>

                    <div class="admin_profile_summary_body">

                        <div class="admin_profile_avatar">
                            {{ strtoupper(
                                substr(
                                    trim($admin->name ?: 'A'),
                                    0,
                                    1
                                )
                            ) }}
                        </div>

                        <h4 class="admin_profile_summary_name">
                            {{ $admin->name }}
                        </h4>

                        <p class="admin_profile_summary_email">
                            {{ $admin->email }}
                        </p>

                        <span class="admin_profile_role_badge">
                            <i class="fa-solid fa-shield-halved"></i>
                            Administrator
                        </span>

                        <div class="admin_profile_information">

                            <div class="admin_profile_information_item">
                                <span class="admin_profile_information_icon">
                                    <i class="fa-solid fa-user"></i>
                                </span>

                                <span class="admin_profile_information_content">
                                    <small>Name</small>
                                    <strong>{{ $admin->name }}</strong>
                                </span>
                            </div>

                            <div class="admin_profile_information_item">
                                <span class="admin_profile_information_icon">
                                    <i class="fa-solid fa-envelope"></i>
                                </span>

                                <span class="admin_profile_information_content">
                                    <small>Email Address</small>
                                    <strong>{{ $admin->email }}</strong>
                                </span>
                            </div>

                            <div class="admin_profile_information_item">
                                <span class="admin_profile_information_icon">
                                    <i class="fa-solid fa-calendar-days"></i>
                                </span>

                                <span class="admin_profile_information_content">
                                    <small>Account Created</small>
                                    <strong>
                                        {{ optional($admin->created_at)->format('d M, Y') }}
                                    </strong>
                                </span>
                            </div>

                        </div>

                    </div>
                </div>

            </div>

            {{-- Forms Column --}}
            <div class="col-xl-8 col-lg-7">

                <div class="row g-4">

                    {{-- Profile Information Card --}}
                    <div class="col-12">

                        <div class="admin_profile_card">

                            <div class="admin_profile_card_header">
                                <div class="admin_profile_card_header_icon">
                                    <i class="fa-solid fa-user-pen"></i>
                                </div>

                                <div>
                                    <h4>Profile Information</h4>

                                    <p>
                                        Change your admin name and email address.
                                    </p>
                                </div>
                            </div>

                            <div class="admin_profile_card_body">

                                @if(session('profile_success'))
                                    <div class="alert alert-success alert-dismissible fade show">
                                        <i class="fa-solid fa-circle-check me-1"></i>

                                        {{ session('profile_success') }}

                                        <button
                                            type="button"
                                            class="btn-close"
                                            data-bs-dismiss="alert"
                                            aria-label="Close"
                                        ></button>
                                    </div>
                                @endif

                                @if($errors->profileUpdate->any())
                                    <div class="alert alert-danger">
                                        <div class="fw-semibold mb-2">
                                            Please fix the following errors:
                                        </div>

                                        <ul class="mb-0 ps-3">
                                            @foreach($errors->profileUpdate->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <form
                                    action="{{ route('admin.profile.update') }}"
                                    method="POST"
                                >
                                    @csrf
                                    @method('PUT')

                                    <div class="row g-4">

                                        <div class="col-md-6">
                                            <label
                                                for="admin_profile_name"
                                                class="form-label admin_profile_form_label"
                                            >
                                                Admin Name
                                                <span class="text-danger">*</span>
                                            </label>

                                            <div class="admin_profile_input_group">
                                                <span class="admin_profile_input_icon">
                                                    <i class="fa-solid fa-user"></i>
                                                </span>

                                                <input
                                                    type="text"
                                                    id="admin_profile_name"
                                                    name="name"
                                                    value="{{ old('name', $admin->name) }}"
                                                    class="form-control admin_profile_form_control
                                                        @if($errors->profileUpdate->has('name')) is-invalid @endif"
                                                    placeholder="Enter admin name"
                                                    required
                                                >
                                            </div>

                                            @if($errors->profileUpdate->has('name'))
                                                <div class="admin_profile_invalid_feedback">
                                                    {{ $errors->profileUpdate->first('name') }}
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-md-6">
                                            <label
                                                for="admin_profile_email"
                                                class="form-label admin_profile_form_label"
                                            >
                                                Email Address
                                                <span class="text-danger">*</span>
                                            </label>

                                            <div class="admin_profile_input_group">
                                                <span class="admin_profile_input_icon">
                                                    <i class="fa-solid fa-envelope"></i>
                                                </span>

                                                <input
                                                    type="email"
                                                    id="admin_profile_email"
                                                    name="email"
                                                    value="{{ old('email', $admin->email) }}"
                                                    class="form-control admin_profile_form_control
                                                        @if($errors->profileUpdate->has('email')) is-invalid @endif"
                                                    placeholder="Enter email address"
                                                    required
                                                >
                                            </div>

                                            @if($errors->profileUpdate->has('email'))
                                                <div class="admin_profile_invalid_feedback">
                                                    {{ $errors->profileUpdate->first('email') }}
                                                </div>
                                            @endif
                                        </div>

                                    </div>

                                    <div class="admin_profile_form_footer">
                                        <button
                                            type="submit"
                                            class="btn admin_profile_primary_button"
                                        >
                                            <i class="fa-solid fa-floppy-disk"></i>
                                            Update Profile
                                        </button>
                                    </div>

                                </form>

                            </div>
                        </div>

                    </div>

                    {{-- Password Card --}}
                    <div class="col-12">

                        <div class="admin_profile_card">

                            <div class="admin_profile_card_header">
                                <div class="admin_profile_card_header_icon admin_profile_password_icon">
                                    <i class="fa-solid fa-lock"></i>
                                </div>

                                <div>
                                    <h4>Change Password</h4>

                                    <p>
                                        Enter and confirm your new admin password.
                                    </p>
                                </div>
                            </div>

                            <div class="admin_profile_card_body">

                                @if(session('password_success'))
                                    <div class="alert alert-success alert-dismissible fade show">
                                        <i class="fa-solid fa-circle-check me-1"></i>

                                        {{ session('password_success') }}

                                        <button
                                            type="button"
                                            class="btn-close"
                                            data-bs-dismiss="alert"
                                            aria-label="Close"
                                        ></button>
                                    </div>
                                @endif

                                @if($errors->passwordUpdate->any())
                                    <div class="alert alert-danger">
                                        <div class="fw-semibold mb-2">
                                            Please fix the following errors:
                                        </div>

                                        <ul class="mb-0 ps-3">
                                            @foreach($errors->passwordUpdate->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <form
                                    action="{{ route('admin.profile.password.update') }}"
                                    method="POST"
                                    id="admin_profile_password_form"
                                >
                                    @csrf
                                    @method('PUT')

                                    <div class="row g-4">

                                        {{-- New Password --}}
                                        <div class="col-md-6">

                                            <label
                                                for="admin_profile_password"
                                                class="form-label admin_profile_form_label"
                                            >
                                                New Password
                                                <span class="text-danger">*</span>
                                            </label>

                                            <div class="admin_profile_input_group">
                                                <span class="admin_profile_input_icon">
                                                    <i class="fa-solid fa-key"></i>
                                                </span>

                                                <input
                                                    type="password"
                                                    id="admin_profile_password"
                                                    name="password"
                                                    class="form-control admin_profile_form_control admin_profile_password_input
                                                        @if($errors->passwordUpdate->has('password')) is-invalid @endif"
                                                    placeholder="Enter new password"
                                                    autocomplete="new-password"
                                                    required
                                                >

                                                <button
                                                    type="button"
                                                    class="admin_profile_password_toggle"
                                                    data-password-target="admin_profile_password"
                                                    aria-label="Show or hide password"
                                                >
                                                    <i class="fa-solid fa-eye"></i>
                                                </button>
                                            </div>

                                            @if($errors->passwordUpdate->has('password'))
                                                <div class="admin_profile_invalid_feedback">
                                                    {{ $errors->passwordUpdate->first('password') }}
                                                </div>
                                            @endif

                                            <div class="form-text">
                                                Password must be at least 8 characters.
                                            </div>

                                        </div>

                                        {{-- Confirm Password --}}
                                        <div class="col-md-6">

                                            <label
                                                for="admin_profile_password_confirmation"
                                                class="form-label admin_profile_form_label"
                                            >
                                                Confirm Password
                                                <span class="text-danger">*</span>
                                            </label>

                                            <div class="admin_profile_input_group">
                                                <span class="admin_profile_input_icon">
                                                    <i class="fa-solid fa-lock"></i>
                                                </span>

                                                <input
                                                    type="password"
                                                    id="admin_profile_password_confirmation"
                                                    name="password_confirmation"
                                                    class="form-control admin_profile_form_control admin_profile_password_input"
                                                    placeholder="Confirm new password"
                                                    autocomplete="new-password"
                                                    required
                                                >

                                                <button
                                                    type="button"
                                                    class="admin_profile_password_toggle"
                                                    data-password-target="admin_profile_password_confirmation"
                                                    aria-label="Show or hide password"
                                                >
                                                    <i class="fa-solid fa-eye"></i>
                                                </button>
                                            </div>

                                        </div>

                                    </div>

                                    <div class="admin_profile_password_notice">
                                        <i class="fa-solid fa-circle-info"></i>

                                        <span>
                                            After changing your password, use the new password during your next login.
                                        </span>
                                    </div>

                                    <div class="admin_profile_form_footer">
                                        <button
                                            type="submit"
                                            class="btn admin_profile_password_button"
                                        >
                                            <i class="fa-solid fa-lock"></i>
                                            Change Password
                                        </button>
                                    </div>

                                </form>

                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
</div>

@endsection

 
<style>
    .admin_profile_page,
    .admin_profile_page * {
        box-sizing: border-box;
    }

    .admin_profile_page {
        min-height: 100%;
        background: #f5f7fa;
    }

    .admin_profile_page_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28px;
    }

    .admin_profile_page_title {
        margin: 0 0 6px;
        color: #17202a;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.3;
    }

    .admin_profile_page_description {
        margin: 0;
        color: #7a8593;
        font-size: 15px;
    }

    .admin_profile_card {
        width: 100%;
        overflow: hidden;
        border: 1px solid #e8ebef;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 8px 28px rgba(25, 42, 70, 0.06);
    }

    /*
    |--------------------------------------------------------------------------
    | Profile Summary Card
    |--------------------------------------------------------------------------
    */

    .admin_profile_summary_card {
        position: sticky;
        top: 20px;
    }

    .admin_profile_summary_cover {
        width: 100%;
        height: 120px;
        background:
            linear-gradient(
                135deg,
                #003f45 0%,
                #006b70 100%
            );
    }

    .admin_profile_summary_body {
        position: relative;
        padding: 70px 28px 30px;
        text-align: center;
    }

    .admin_profile_avatar {
        position: absolute;
        top: -55px;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 110px;
        border: 6px solid #ffffff;
        border-radius: 50%;
        background: #ff5722;
        box-shadow: 0 8px 24px rgba(19, 39, 66, 0.16);
        color: #ffffff;
        font-size: 42px;
        font-weight: 800;
        transform: translateX(-50%);
    }

    .admin_profile_summary_name {
        margin: 0 0 6px;
        color: #17202a;
        font-size: 22px;
        font-weight: 700;
    }

    .admin_profile_summary_email {
        margin: 0 0 15px;
        color: #7a8593;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .admin_profile_role_badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 30px;
        background: rgba(255, 87, 34, 0.1);
        color: #ff5722;
        font-size: 12px;
        font-weight: 700;
    }

    .admin_profile_information {
        margin-top: 28px;
        padding-top: 8px;
        border-top: 1px solid #edf0f3;
        text-align: left;
    }

    .admin_profile_information_item {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 14px 0;
        border-bottom: 1px solid #edf0f3;
    }

    .admin_profile_information_item:last-child {
        border-bottom: 0;
    }

    .admin_profile_information_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 10px;
        background: #eef5f5;
        color: #003f45;
        font-size: 14px;
    }

    .admin_profile_information_content {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .admin_profile_information_content small {
        margin-bottom: 3px;
        color: #8a949f;
        font-size: 11px;
    }

    .admin_profile_information_content strong {
        color: #29313a;
        font-size: 13px;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    /*
    |--------------------------------------------------------------------------
    | Form Card
    |--------------------------------------------------------------------------
    */

    .admin_profile_card_header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 22px 25px;
        border-bottom: 1px solid #edf0f3;
    }

    .admin_profile_card_header_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-radius: 12px;
        background: rgba(0, 63, 69, 0.1);
        color: #003f45;
        font-size: 18px;
    }

    .admin_profile_password_icon {
        background: rgba(255, 87, 34, 0.1);
        color: #ff5722;
    }

    .admin_profile_card_header h4 {
        margin: 0 0 4px;
        color: #17202a;
        font-size: 18px;
        font-weight: 700;
    }

    .admin_profile_card_header p {
        margin: 0;
        color: #8a949f;
        font-size: 13px;
    }

    .admin_profile_card_body {
        padding: 25px;
    }

    .admin_profile_form_label {
        margin-bottom: 8px;
        color: #34404c;
        font-size: 13px;
        font-weight: 600;
    }

    .admin_profile_input_group {
        position: relative;
    }

    .admin_profile_input_icon {
        position: absolute;
        top: 50%;
        left: 15px;
        z-index: 3;
        color: #9aa3ad;
        font-size: 14px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .admin_profile_form_control {
        width: 100%;
        min-height: 48px;
        padding: 10px 45px 10px 43px;
        border: 1px solid #dfe4e9;
        border-radius: 9px;
        background: #ffffff;
        color: #28323d;
        font-size: 14px;
        box-shadow: none;
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .admin_profile_form_control:focus {
        border-color: #003f45;
        box-shadow: 0 0 0 3px rgba(0, 63, 69, 0.1);
    }

    .admin_profile_form_control.is-invalid {
        border-color: #dc3545;
    }

    .admin_profile_invalid_feedback {
        margin-top: 6px;
        color: #dc3545;
        font-size: 12px;
    }

    .admin_profile_password_toggle {
        position: absolute;
        top: 50%;
        right: 12px;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #8d97a1;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .admin_profile_password_toggle:hover {
        color: #003f45;
    }

    .admin_profile_password_notice {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-top: 22px;
        padding: 13px 15px;
        border: 1px solid #dbeaea;
        border-radius: 9px;
        background: #f4fafa;
        color: #577174;
        font-size: 12px;
        line-height: 1.6;
    }

    .admin_profile_password_notice i {
        margin-top: 3px;
        color: #006b70;
    }

    .admin_profile_form_footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 25px;
        padding-top: 22px;
        border-top: 1px solid #edf0f3;
    }

    .admin_profile_primary_button,
    .admin_profile_password_button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 9px 20px;
        border: 0;
        border-radius: 8px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        transition:
            box-shadow 0.2s ease,
            transform 0.2s ease;
    }

    .admin_profile_primary_button {
        background: #003f45;
    }

    .admin_profile_password_button {
        background: #ff5722;
    }

    .admin_profile_primary_button:hover,
    .admin_profile_password_button:hover {
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(30, 45, 65, 0.16);
        transform: translateY(-2px);
    }

    @media (max-width: 1199px) {
        .admin_profile_summary_card {
            position: relative;
            top: auto;
        }
    }

    @media (max-width: 575px) {
        .admin_profile_page_title {
            font-size: 24px;
        }

        .admin_profile_card_header,
        .admin_profile_card_body {
            padding-right: 18px;
            padding-left: 18px;
        }

        .admin_profile_card_header {
            align-items: flex-start;
        }

        .admin_profile_summary_body {
            padding-right: 20px;
            padding-left: 20px;
        }

        .admin_profile_form_footer {
            justify-content: stretch;
        }

        .admin_profile_primary_button,
        .admin_profile_password_button {
            width: 100%;
        }
    }
</style>
 
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const passwordToggleButtons = document.querySelectorAll(
            '.admin_profile_password_toggle'
        );

        passwordToggleButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                const targetId = button.getAttribute(
                    'data-password-target'
                );

                const input = document.getElementById(targetId);
                const icon = button.querySelector('i');

                if (!input || !icon) {
                    return;
                }

                if (input.type === 'password') {
                    input.type = 'text';

                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    input.type = 'password';

                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
        });
    });
</script>