@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="page-content">

        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Admin Management</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}">
                                <i class="bx bx-home-alt"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Profile</li>
                    </ol>
                </nav>
            </div>
        </div>

      

        {{-- @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif --}}

        <div class="container">
            <div class="main-body">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                @php
                                    $profileImage = null;
                                    if (!empty($user->profile_image)) {
                                        $profileImage = \Illuminate\Support\Str::startsWith($user->profile_image, ['http://', 'https://'])
                                            ? $user->profile_image
                                            : asset('storage/' . ltrim($user->profile_image, '/'));
                                    }
                                @endphp
                                <div class="d-flex flex-column align-items-center text-center">
                                    @php
                                        $mediaProfile = $user->getFirstMediaUrl('profile', 'thumb') ?: $user->getFirstMediaUrl('profile');
                                        $profileImage = $mediaProfile ?: $profileImage;
                                    @endphp
                                    @if ($profileImage)
                                        <img id="profilePreview" src="{{ $profileImage }}" alt="Profile" class="rounded-circle p-1 bg-primary" width="110">
                                    @else
                                        <div id="profilePreview" class="rounded-circle bg-light d-flex align-items-center justify-content-center" style="width:110px;height:110px;border:2px dashed #ccc;">
                                            <span class="text-muted small">No Image</span>
                                        </div>
                                    @endif
                                    <div class="user-info">
                                        <p class="user-name mb-0">{{ $user->name ?? 'Admin' }}</p>
                                        <p class="designation mb-0">{{ $user ? ucwords(str_replace('_', ' ', $user->account_type)) : 'User' }}</p>
                                    </div>
                                </div>
                                <hr class="my-4" />
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-body">

                                <h5 class="mb-4">Edit Profile</h5>

                                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Full Name</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <input
                                                type="text"
                                                name="name"
                                                class="form-control @error('name') is-invalid @enderror"
                                                value="{{ old('name', $user->name) }}"
                                                required>
                                            @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Email</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <input type="email" class="form-control" value="{{ $user->email }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">New Password</h6>
                                        </div>

                                        <div class="col-sm-9 text-secondary">
                                            <div class="input-group show_hide_password">
                                                <input type="password" name="password" class="form-control border-end-0" placeholder="Enter Password">
                                                <a href="javascript:;" class="input-group-text bg-transparent">
                                                    <i class="bx bx-hide"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Confirm Password</h6>
                                        </div>

                                        <div class="col-sm-9 text-secondary">
                                            <div class="input-group show_hide_password">
                                                <input type="password" name="password_confirmation" class="form-control border-end-0">
                                                <a href="javascript:;" class="input-group-text bg-transparent">
                                                    <i class="bx bx-hide"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Profile Image</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <input
                                                type="file"
                                                name="profile_image"
                                                id="profile_image_input"
                                                accept=".jpg,.jpeg,.png,.webp"
                                                class="form-control @error('profile_image') is-invalid @enderror">
                                            <div class="form-text">JPG, PNG, or WebP up to 5 MB.</div>
                                            @error('profile_image')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Online Status</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="profile_online_status" name="admin_online_status" value="active" {{ old('admin_online_status', $user->admin_online_status) === 'active' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="profile_online_status" id="profile_online_status_label">
                                                    {{ old('admin_online_status', $user->admin_online_status) === 'active' ? 'Online' : 'Offline' }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Roles</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            @php
                                                $selectedRoleId = (int) old('role_id', $user->roles->pluck('id')->first());
                                            @endphp

                                            @if ($roles->count())
                                                <div class="row">
                                                    @foreach ($roles as $role)
                                                        <div class="col-md-6">
                                                            <div class="form-check">
                                                                <input
                                                                    class="form-check-input"
                                                                    type="radio"
                                                                    name="role_id"
                                                                    id="profile_role_{{ $role->id }}"
                                                                    value="{{ $role->id }}"
                                                                    {{ $canEditOwnAssignedRole ? '' : 'disabled' }}
                                                                    {{ $selectedRoleId === (int) $role->id ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="profile_role_{{ $role->id }}">
                                                                    {{ $role->name }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                @if (!$canEditOwnAssignedRole)
                                                    <div class="form-text text-danger mt-2">
                                                        You do not have permission to change your own assigned role.
                                                    </div>
                                                @endif
                                            @else
                                                <div class="text-muted">No roles available.</div>
                                            @endif

                                            @error('role_id')
                                                <div class="text-danger mt-2">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-3"></div>
                                        <div class="col-sm-9 text-secondary">
                                            <button type="submit" class="btn btn-primary px-4">
                                                Save Changes
                                            </button>
                                        </div>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(".show_hide_password a").on('click', function(event) {
    event.preventDefault();

    var input = $(this).parent().find("input");
    var icon = $(this).find("i");

    if (input.attr("type") == "text") {
        input.attr('type', 'password');
        icon.removeClass("bx-show");
        icon.addClass("bx-hide");
    } else if (input.attr("type") == "password") {
        input.attr('type', 'text');
        icon.removeClass("bx-hide");
        icon.addClass("bx-show");
    }
});

// Preview profile image before upload
$('#profile_image_input').on('change', function (e) {
    const [file] = e.target.files || [];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function (event) {
        let $preview = $('#profilePreview');

        if (!$preview.is('img')) {
            $preview = $('<img>', {
                id: 'profilePreview',
                class: 'rounded-circle p-1 bg-primary',
                width: 110,
                alt: 'Profile'
            });
            $('#profilePreview').replaceWith($preview);
        }

        $preview.attr('src', event.target.result);
    };
    reader.readAsDataURL(file);
});

$('#profile_online_status').on('change', function () {
    if ($(this).is(':checked')) {
        $('#profile_online_status_label').text('Online');
    } else {
        $('#profile_online_status_label').text('Offline');
    }
});
</script>
@endsection