@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 Admin</li>
                    </ol>
                </nav>
            </div>
        </div>

    

        <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)) {
                                        // If stored path is relative, build a public URL; if already absolute, use as-is
                                        $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="Admin" 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>

                    @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="col-lg-8">
                        <div class="card">
                            <div class="card-body">

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

                                <form action="{{ route('admin.admins.update', $user->id) }}" 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"
                                                value="{{ old('name', $user->name) }}"
                                                required>
                                        </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">Roles</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            @php
                                                // Hide Super Admin regardless of spacing/casing (e.g., "Super Admin", "superadmin", "super-admin")
                                                $assignableRoles = $roles->reject(function ($role) {
                                                    $normalizedName = preg_replace('/[^a-z0-9]/i', '', strtolower($role->name ?? ''));
                                                    $normalizedSlug = preg_replace('/[^a-z0-9]/i', '', strtolower($role->slug ?? ''));
                                                    return $normalizedName === 'superadmin' || $normalizedSlug === 'superadmin';
                                                });
                                                $selectedRoles = old('role_ids', $user->roles->pluck('id')->toArray());
                                            @endphp

                                            @if ($assignableRoles->count())
                                                <div class="row">
                                                    @foreach ($assignableRoles as $role)
                                                        <div class="col-md-6">
                                                            <div class="form-check">
                                                                <input
                                                                    class="form-check-input"
                                                                    type="checkbox"
                                                                    name="role_ids[]"
                                                                    id="role_{{ $role->id }}"
                                                                    value="{{ $role->id }}"
                                                                    {{ $canEditOwnAssignedRole ? '' : 'disabled' }}
                                                                    {{ in_array($role->id, $selectedRoles) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="role_{{ $role->id }}">
                                                                    {{ $role->name }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                @if($isSelfEdit && !$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_ids')
                                                <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: 'Admin'
            });
            $('#profilePreview').replaceWith($preview);
        }

        $preview.attr('src', event.target.result);
    };
    reader.readAsDataURL(file);
});
</script>
@endsection