@extends('layouts.master')

@section('title', 'Register as Seller')

@section('content')
<style>
    /* Multi-Step Form Styles */
    .registration-wizard {
        max-width: 600px;
        margin: 40px auto;
    }
    
    /* Progress Steps */
    .step-progress {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        position: relative;
    }
    .step-progress::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 50px;
        right: 50px;
        height: 3px;
        background: #e0e0e0;
        z-index: 0;
    }
    .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
        flex: 1;
    }
    .step-circle {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #e0e0e0;
        color: #888;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        border: 3px solid #e0e0e0;
    }
    .step-item.active .step-circle {
        background: #f97316;
        color: white;
        border-color: #f97316;
        box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    }
    .step-item.completed .step-circle {
        background: #22c55e;
        color: white;
        border-color: #22c55e;
    }
    .step-label {
        margin-top: 10px;
        font-size: 0.85rem;
        color: #888;
        font-weight: 600;
        text-align: center;
    }
    .step-item.active .step-label,
    .step-item.completed .step-label {
        color: #333;
    }

    /* Form Card */
    .wizard-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
        padding: 40px;
        border: 1px solid #f0f0f0;
    }
    .wizard-card .step-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 8px;
    }
    .wizard-card .step-subtitle {
        color: #666;
        margin-bottom: 30px;
    }

    /* Form Fields */
    .form-floating > .form-control {
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        padding: 1rem 0.75rem;
    }
    .form-floating > .form-control:focus {
        border-color: #f97316;
        box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
    }
    .form-floating > label {
        padding: 1rem 0.75rem;
    }

    /* Buttons */
    .wizard-btn {
        padding: 12px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    .wizard-btn-primary {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        border: none;
        color: white;
    }
    .wizard-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
        color: white;
    }
    .wizard-btn-outline {
        background: transparent;
        border: 2px solid #e0e0e0;
        color: #666;
    }
    .wizard-btn-outline:hover {
        border-color: #f97316;
        color: #f97316;
    }

    /* Step Content */
    .step-content {
        display: none;
    }
    .step-content.active {
        display: block;
        animation: fadeIn 0.4s ease;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* Review Section */
    .review-item {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .review-item:last-child {
        border-bottom: none;
    }
    .review-label {
        color: #888;
        font-size: 0.9rem;
    }
    .review-value {
        font-weight: 600;
        color: #333;
    }
</style>

<div class="container py-5">
    <div class="registration-wizard">
        <!-- Header Tagline -->
        <div class="text-center mb-5">
            <h2 class="fw-bold mb-2">Become a Seller on MiniPort</h2>
            <p class="text-muted fs-5">
                🚀 Start your selling journey — it takes only 2 minutes!
            </p>
        </div>

        <!-- Progress Steps -->
        <div class="step-progress">
            <div class="step-item active" data-step="1">
                <div class="step-circle">1</div>
                <div class="step-label">Personal Info</div>
            </div>
            <div class="step-item" data-step="2">
                <div class="step-circle">2</div>
                <div class="step-label">Business Details</div>
            </div>
            <div class="step-item" data-step="3">
                <div class="step-circle">3</div>
                <div class="step-label">Review & Submit</div>
            </div>
        </div>

        <!-- Wizard Card -->
        <div class="wizard-card">
            <form method="POST" action="{{ route('register.seller') }}" id="sellerRegistrationForm">
                @csrf

                <!-- Step 1: Personal Info -->
                <div class="step-content active" id="step1">
                    <h4 class="step-title">Personal Information</h4>
                    <p class="step-subtitle">Enter your account details</p>

                    <div class="form-floating mb-3">
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" placeholder="Full Name" value="{{ old('name') }}" required>
                        <label for="name"><i class="bi bi-person me-2"></i>Full Name</label>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-floating mb-3">
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="Email" value="{{ old('email') }}" required>
                        <label for="email"><i class="bi bi-envelope me-2"></i>Email Address</label>
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-floating mb-3">
                        <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="Password" required>
                        <label for="password"><i class="bi bi-lock me-2"></i>Password</label>
                        @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-floating mb-4">
                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password" required>
                        <label for="password_confirmation"><i class="bi bi-lock-fill me-2"></i>Confirm Password</label>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="button" class="wizard-btn wizard-btn-primary" onclick="nextStep(1)">
                            Next Step <i class="bi bi-arrow-right ms-2"></i>
                        </button>
                    </div>
                </div>

                <!-- Step 2: Business Details -->
                <div class="step-content" id="step2">
                    <h4 class="step-title">Business Details</h4>
                    <p class="step-subtitle">Tell us about your company</p>

                    <div class="form-floating mb-3">
                        <input type="text" class="form-control @error('company_name') is-invalid @enderror" id="company_name" name="company_name" placeholder="Company Name" value="{{ old('company_name') }}" required>
                        <label for="company_name"><i class="bi bi-building me-2"></i>Company Name</label>
                        @error('company_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-floating mb-3">
                        <input type="text" class="form-control @error('gst') is-invalid @enderror" id="gst" name="gst" placeholder="GST Number" value="{{ old('gst') }}">
                        <label for="gst"><i class="bi bi-receipt me-2"></i>GST Number</label>
                        @error('gst')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-floating mb-4">
                        <input type="text" class="form-control @error('iec') is-invalid @enderror" id="iec" name="iec" placeholder="IEC Code" value="{{ old('iec') }}">
                        <label for="iec"><i class="bi bi-globe me-2"></i>IEC Code</label>
                        @error('iec')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="d-flex justify-content-between">
                        <button type="button" class="wizard-btn wizard-btn-outline" onclick="prevStep(2)">
                            <i class="bi bi-arrow-left me-2"></i> Back
                        </button>
                        <button type="button" class="wizard-btn wizard-btn-primary" onclick="nextStep(2)">
                            Next Step <i class="bi bi-arrow-right ms-2"></i>
                        </button>
                    </div>
                </div>

                <!-- Step 3: Review & Submit -->
                <div class="step-content" id="step3">
                    <h4 class="step-title">Review & Submit</h4>
                    <p class="step-subtitle">Please verify your information</p>

                    <div class="bg-light rounded-3 p-4 mb-4">
                        <h6 class="fw-bold text-muted mb-3"><i class="bi bi-person-circle me-2"></i>Personal Info</h6>
                        <div class="review-item">
                            <span class="review-label">Full Name</span>
                            <span class="review-value" id="review-name">-</span>
                        </div>
                        <div class="review-item">
                            <span class="review-label">Email</span>
                            <span class="review-value" id="review-email">-</span>
                        </div>
                    </div>

                    <div class="bg-light rounded-3 p-4 mb-4">
                        <h6 class="fw-bold text-muted mb-3"><i class="bi bi-building me-2"></i>Business Info</h6>
                        <div class="review-item">
                            <span class="review-label">Company Name</span>
                            <span class="review-value" id="review-company">-</span>
                        </div>
                        <div class="review-item">
                            <span class="review-label">GST Number</span>
                            <span class="review-value" id="review-gst">-</span>
                        </div>
                        <div class="review-item">
                            <span class="review-label">IEC Code</span>
                            <span class="review-value" id="review-iec">-</span>
                        </div>
                    </div>

                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="terms" required>
                        <label class="form-check-label small" for="terms">
                            I agree to the <a href="#" class="text-primary">Terms of Service</a> and <a href="#" class="text-primary">Privacy Policy</a>
                        </label>
                    </div>

                    <div class="d-flex justify-content-between">
                        <button type="button" class="wizard-btn wizard-btn-outline" onclick="prevStep(3)">
                            <i class="bi bi-arrow-left me-2"></i> Back
                        </button>
                        <button type="submit" class="wizard-btn wizard-btn-primary">
                            <i class="bi bi-check-circle me-2"></i> Create Account
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Login Link -->
        <div class="text-center mt-4">
            <p class="text-muted">Already have an account? <a href="{{ route('login') }}" class="text-primary fw-bold">Login here</a></p>
        </div>
    </div>
</div>

<script>
let currentStep = 1;

function nextStep(step) {
    // Validation for Step 1
    if (step === 1) {
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('password_confirmation').value;

        if (!name || !email || !password || !confirmPassword) {
            alert('Please fill in all required fields');
            return;
        }
        if (password !== confirmPassword) {
            alert('Passwords do not match');
            return;
        }
        if (password.length < 8) {
            alert('Password must be at least 8 characters');
            return;
        }
    }

    // Validation for Step 2
    if (step === 2) {
        const companyName = document.getElementById('company_name').value.trim();
        if (!companyName) {
            alert('Please enter your company name');
            return;
        }

        // Update review values
        document.getElementById('review-name').textContent = document.getElementById('name').value;
        document.getElementById('review-email').textContent = document.getElementById('email').value;
        document.getElementById('review-company').textContent = document.getElementById('company_name').value;
        document.getElementById('review-gst').textContent = document.getElementById('gst').value || 'Not provided';
        document.getElementById('review-iec').textContent = document.getElementById('iec').value || 'Not provided';
    }

    // Move to next step
    currentStep = step + 1;
    updateSteps();
}

function prevStep(step) {
    currentStep = step - 1;
    updateSteps();
}

function updateSteps() {
    // Update step content visibility
    document.querySelectorAll('.step-content').forEach(content => {
        content.classList.remove('active');
    });
    document.getElementById('step' + currentStep).classList.add('active');

    // Update progress indicators
    document.querySelectorAll('.step-item').forEach((item, index) => {
        const stepNum = index + 1;
        item.classList.remove('active', 'completed');
        
        if (stepNum < currentStep) {
            item.classList.add('completed');
        } else if (stepNum === currentStep) {
            item.classList.add('active');
        }
    });
}
</script>
@endsection