@extends('install.layout')

@section('content')
<div class="card">
    <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-person-badge fs-5 text-primary"></i>
        <div>
            <h5 class="mb-0">Administrator Account</h5>
            <small class="text-muted">Create your Super Admin account and set the company name.</small>
        </div>
    </div>
    <div class="card-body">

        <form id="admin-account-form" method="POST" action="{{ route('install.admin.store') }}" autocomplete="off">
            @csrf

            <div class="mb-3">
                <label class="form-label fw-semibold">Company Name <span class="text-danger">*</span></label>
                <input type="text" name="company_name"
                       class="form-control @error('company_name') is-invalid @enderror"
                       value="{{ old('company_name') }}"
                       placeholder="Acme Corporation"
                       autocomplete="organization">
                @error('company_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <hr class="my-4">

            <div class="mb-3">
                <label class="form-label fw-semibold">Full Name <span class="text-danger">*</span></label>
                <input type="text" name="admin_name"
                       class="form-control @error('admin_name') is-invalid @enderror"
                       value="{{ old('admin_name') }}"
                       placeholder="John Doe"
                       autocomplete="name">
                @error('admin_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold">Email Address <span class="text-danger">*</span></label>
                <input type="email" name="admin_email"
                       class="form-control @error('admin_email') is-invalid @enderror"
                       value="{{ old('admin_email') }}"
                       placeholder="admin@example.com"
                       autocomplete="email">
                @error('admin_email') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold">Password <span class="text-danger">*</span></label>
                <input type="password" name="admin_password" id="pwd"
                       class="form-control @error('admin_password') is-invalid @enderror"
                       placeholder="Minimum 8 characters"
                       autocomplete="new-password">
                @error('admin_password') <div class="invalid-feedback">{{ $message }}</div> @enderror

                {{-- Strength meter --}}
                <div class="mt-2">
                    <div class="d-flex justify-content-between mb-1">
                        <small class="text-muted">Password strength</small>
                        <small id="strength-label" class="text-muted">—</small>
                    </div>
                    <div class="progress" style="height:6px">
                        <div id="strength-bar" class="progress-bar strength-bar" style="width:0%"></div>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold">Confirm Password <span class="text-danger">*</span></label>
                <input type="password" name="admin_password_confirmation" id="pwd-confirm"
                       class="form-control @error('admin_password_confirmation') is-invalid @enderror"
                       autocomplete="new-password">
                @error('admin_password_confirmation') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="d-flex gap-2">
                <a href="{{ route('install.migrate') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back
                </a>
                <button type="submit" class="btn btn-primary px-4">
                    Complete Installation <i class="bi bi-check2 ms-1"></i>
                </button>
            </div>
        </form>

    </div>
</div>
@endsection

@push('scripts')
@include('partials.jsvalidation', ['request' => 'App\Http\Requests\Install\AdminAccountRequest', 'selector' => '#admin-account-form', 'includeJquery' => true])
<script>
const pwdInput = document.getElementById('pwd');
const bar      = document.getElementById('strength-bar');
const label    = document.getElementById('strength-label');

const levels = [
    { min: 0,  label: '—',        cls: '',        width: '0%'   },
    { min: 1,  label: 'Weak',     cls: 'bg-danger',   width: '25%'  },
    { min: 3,  label: 'Fair',     cls: 'bg-warning',  width: '50%'  },
    { min: 5,  label: 'Good',     cls: 'bg-info',     width: '75%'  },
    { min: 7,  label: 'Strong',   cls: 'bg-success',  width: '100%' },
];

pwdInput.addEventListener('input', () => {
    const v = pwdInput.value;
    let score = 0;
    if (v.length >= 8)  score++;
    if (v.length >= 12) score++;
    if (/[A-Z]/.test(v)) score++;
    if (/[a-z]/.test(v)) score++;
    if (/[0-9]/.test(v)) score++;
    if (/[^A-Za-z0-9]/.test(v)) score += 2;

    const level = [...levels].reverse().find(l => score >= l.min) || levels[0];
    bar.style.width = level.width;
    bar.className   = 'progress-bar strength-bar ' + level.cls;
    label.textContent = level.label;
});
</script>
@endpush