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

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="container">
            <div class="main-body">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-column align-items-center text-center">
                                    <img id="profilePreview" src="" alt="Admin" class="rounded-circle p-1 bg-primary" width="110">
                                    <div class="user-info">
                                        <p class="user-name mb-0">New Admin</p>
                                        <p class="designation mb-0">Admin</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">Create Admin</h5>

                                <form action="{{ route('admin.admins.store') }}" method="POST" enctype="multipart/form-data">
                                    @csrf

                                    <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') }}"
                                                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"
                                                name="email"
                                                class="form-control @error('email') is-invalid @enderror"
                                                value="{{ old('email') }}"
                                                required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">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 @error('password') is-invalid @enderror"
                                                    placeholder="Enter Password"
                                                    required>
                                                <a href="javascript:;" class="input-group-text bg-transparent">
                                                    <i class="bx bx-hide"></i>
                                                </a>
                                            </div>
                                            @error('password')
                                                <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">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 @error('password_confirmation') is-invalid @enderror">
                                                <a href="javascript:;" class="input-group-text bg-transparent">
                                                    <i class="bx bx-hide"></i>
                                                </a>
                                            </div>
                                            @error('password_confirmation')
                                                <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">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';
                                                });
                                            @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 }}"
                                                                    {{ is_array(old('role_ids')) && in_array($role->id, old('role_ids')) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="role_{{ $role->id }}">
                                                                    {{ $role->name }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @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">
                                                Create Admin
                                            </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) {
        $('#profilePreview').attr('src', event.target.result);
    };
    reader.readAsDataURL(file);
});
</script>
@endsection