@extends('customer.auth.layout')

@section('title','Create Account')
@section('subtitle','Join and track your deliveries in real-time')

@section('content')
<style>
:root {
    --primary:#f97316;
    --primary-soft:rgba(249,115,22,.25);
}

/* BACKGROUND */
body {
    min-height:100vh;
    background:
        radial-gradient(circle at top left, var(--primary-soft), transparent 40%),
        radial-gradient(circle at bottom right, rgba(251,146,60,.25), transparent 40%),
        #0f172a;
    font-family: system-ui, -apple-system;
}

/* AUTH CARD (⬅ BIGGER & PREMIUM) */
.auth-card {
    width: 100%;
    max-width: 1100px;          /* ⬅ increased from 900px */
    background: rgba(255,255,255,.98);
    border-radius: 28px;
    box-shadow: 0 60px 140px rgba(0,0,0,.45);
    padding: 3.5rem 4rem;       /* ⬅ more inner spacing */
    animation: fadeUp .45s ease;
}

@keyframes fadeUp {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:none; }
}

/* BRAND ICON */
.auth-brand-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:linear-gradient(135deg,#f97316,#fb923c);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
    box-shadow:0 18px 45px rgba(249,115,22,.45);
}

/* INPUTS */
.form-control {
    border-radius:14px;
    padding:13px 15px;
}

.form-control:focus {
    border-color:var(--primary);
    box-shadow:0 0 0 .25rem rgba(249,115,22,.2);
}

/* BUTTON */
.btn-primary {
    border-radius:14px;
    padding:13px;
    font-weight:600;
    background:linear-gradient(135deg,#f97316,#fb923c);
    border:none;
}

.btn-primary:hover {
    transform:translateY(-1px);
    opacity:.95;
}

/* LINKS */
a {
    color:var(--primary);
    text-decoration:none;
}
a:hover { text-decoration:underline; }

/* FOOTER */
.auth-footer {
    font-size:14px;
}
</style>


<div class="row align-items-center g-4">

    <!-- ================= LEFT SIDE (INFO) ================= -->
    <div class="col-md-6 d-none d-md-block">
        <div class="h-100 p-4 rounded-4 text-white"
             style="background:linear-gradient(135deg,#f97316,#fb923c);">

            <h3 class="fw-bold mb-3">
                Start Your Journey 🚀
            </h3>

            <p class="opacity-75 mb-4">
                Create your account and experience Sri Lanka’s smartest
                courier tracking platform.
            </p>

            <ul class="list-unstyled small">
                <li class="mb-2">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    Real-time delivery updates
                </li>
                <li class="mb-2">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    Secure payments & history
                </li>
                <li class="mb-2">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    AI-powered tracking insights
                </li>
            </ul>

            <div class="mt-4 opacity-75 small">
                Already trusted by thousands of customers
            </div>
        </div>
    </div>

    <!-- ================= RIGHT SIDE (FORM) ================= -->
    <div class="col-md-6">

        <form method="POST"
              action="{{ route('customer.register.post') }}"
              novalidate>
        @csrf

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

        <div class="row g-3">

            <!-- FULL NAME -->
            <div class="col-md-6">
                <label class="form-label fw-semibold">Full Name</label>
                <input class="form-control"
                       name="name"
                       placeholder="John Doe"
                       value="{{ old('name') }}"
                       required>
            </div>

            <!-- EMAIL -->
            <div class="col-md-6">
                <label class="form-label fw-semibold">Email</label>
                <input type="email"
                       class="form-control"
                       name="email"
                       placeholder="you@email.com"
                       value="{{ old('email') }}"
                       required>
            </div>

            <!-- PHONE -->
            <div class="col-md-6">
                <label class="form-label fw-semibold">Phone</label>
                <input class="form-control"
                       name="phone"
                       placeholder="+94 7X XXX XXXX"
                       value="{{ old('phone') }}">
            </div>

            <!-- ADDRESS -->
            <div class="col-md-6">
                <label class="form-label fw-semibold">Address</label>
                <input class="form-control"
                       name="address"
                       placeholder="Delivery address"
                       value="{{ old('address') }}">
            </div>

            <!-- PASSWORD -->
            <div class="col-md-6 position-relative">
                <label class="form-label fw-semibold">Password</label>

                <input type="password"
                       id="password"
                       class="form-control pe-5"
                       name="password"
                       placeholder="••••••••"
                       onkeyup="checkStrength(this.value)"
                       required>

                <button type="button"
                        class="btn btn-sm btn-link position-absolute top-50 end-0 translate-middle-y me-2"
                        onclick="togglePassword('password', this)">
                    <i class="bi bi-eye"></i>
                </button>

                <small id="strength" class="small"></small>
            </div>

            <!-- CONFIRM PASSWORD -->
            <div class="col-md-6 position-relative">
                <label class="form-label fw-semibold">Confirm Password</label>

                <input type="password"
                       id="password_confirmation"
                       class="form-control pe-5"
                       name="password_confirmation"
                       placeholder="••••••••"
                       required>

                <button type="button"
                        class="btn btn-sm btn-link position-absolute top-50 end-0 translate-middle-y me-2"
                        onclick="togglePassword('password_confirmation', this)">
                    <i class="bi bi-eye"></i>
                </button>
            </div>

            <!-- TERMS -->
            <div class="col-12 mt-2">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" required>
                    <label class="form-check-label small">
                        I agree to the
                        <a href="#" class="fw-semibold">Terms & Conditions</a>
                    </label>
                </div>
            </div>

            <!-- SUBMIT -->
            <div class="col-12 mt-3">
                <button class="btn btn-primary w-100 py-2">
                    <i class="bi bi-person-plus me-1"></i>
                    Create Account
                </button>
            </div>

            <!-- FOOTER -->
            <div class="col-12 text-center auth-footer mt-2">
                <span class="text-muted">Already have an account?</span>
                <a href="{{ route('customer.login') }}" class="fw-semibold">
                    Login
                </a>
            </div>

        </div>
        </form>

    </div>
</div>

{{-- INTERACTION SCRIPTS --}}
<script>
function togglePassword(id, btn) {
    const input = document.getElementById(id);
    const icon = btn.querySelector('i');

    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('bi-eye','bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('bi-eye-slash','bi-eye');
    }
}

function checkStrength(pwd) {
    const el = document.getElementById('strength');

    if (!pwd) {
        el.textContent = '';
        return;
    }

    if (pwd.length < 6) {
        el.textContent = 'Weak password';
        el.className = 'text-danger small';
    } else if (/[A-Z]/.test(pwd) && /[0-9]/.test(pwd)) {
        el.textContent = 'Strong password';
        el.className = 'text-success small';
    } else {
        el.textContent = 'Medium strength';
        el.className = 'text-warning small';
    }
}
</script>

@endsection