@extends('layouts.master-without-nav')

@section('title')
    @lang('translation.multi-step-form')
@endsection

@section('content')
    <div class="form__top-bar">
        <div class="form__top-bar-left">
            <x-progress-bar :width="$step/$totalSteps * 100 .'%'"/>
            <div class="form__step">
                <span>{{ $step }}/{{ $totalSteps }}</span>
            </div>
        </div>
        <div class="form-navigation">
            @if($step < $totalSteps)
                <x-button type="submit" classes="next-btn-md">
                    @lang('translation.next')
                </x-button>
            @else
                <x-button type="submit" classes="next-btn-md">
                    @lang('translation.submit')
                </x-button>
            @endif
        </div>
    </div>
    <div class="form-layout">
        <div class="left-panel">
            <div class="form__steps">
                <div class="form__step-item {{ $step == 1 ? 'active' : '' }}">
                    <span>1</span>
                    <p>@lang('translation.personal')</p>
                </div>
                <div class="form__step-item {{ $step == 2 ? 'active' : '' }}">
                    <span>2</span>
                    <p>@lang('translation.address')</p>
                </div>
                <div class="form__step-item {{ $step == 3 ? 'active' : '' }}">
                    <span>3</span>
                    <p>@lang('translation.company')</p>
                </div>
                <div class="form__step-item {{ $step == 4 ? 'active' : '' }}">
                    <span>4</span>
                    <p>@lang('translation.social')</p>
                </div>
                <div class="form__step-item {{ $step == 5 ? 'active' : '' }}">
                    <span>5</span>
                    <p>@lang('translation.review')</p>
                </div>
                <div class="form__step-item {{ $step == 6 ? 'active' : '' }}">
                    <span>6</span>
                    <p>@lang('translation.payment')</p>
                </div>
                <div class="form__step-item {{ $step == 7 ? 'active' : '' }}">
                    <span>7</span>
                    <p>@lang('translation.complete')</p>
                </div>
            </div>

            @if($step == 1)
                <div class="left-panel__bottom-card">
                    <img src="https://via.placeholder.com/50" alt="Personal Info"
                         class="left-panel__bottom-card--image">
                    <span class="left-panel__bottom-card--title">@lang('translation.personal-info')</span>
                </div>
            @elseif($step > 1 && $step < 6)
                <div class="left-panel__bottom-card">
                    <div class="order-summary">
                        <div class="order-summary-title">
                            <span>@lang('translation.order-summary')</span>
                        </div>
                        <div class="order-items">
                            <div class="filing-fee">
                                <span class="order-item__filing-fee_title">@lang('translation.filing-fee')</span>
                                <span class="order-item__filing-fee-price" >${{ $filingFee }}</span> <!-- Filing fee -->
                            </div>
                            <div class="order-item" data-number-of-selected-classes="">
                                <span class="order-item__title">@lang('translation.class-fees')  (<span class="number-of-selected-classes">{{ $nrOfClasses }}</span>)</span>
                                <span class="order-item__price">${{ $classFee }}</span> <!-- Class fee total -->
                            </div>
                        </div>
                        <div class="order-total">
                            <span class="order-total__title">@lang('translation.total')</span>
                            <span class="order-total__value">${{ $totalFee }}</span> <!-- Total fee -->
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <div class="form-content">
            <form id="form" action="{{ route('form.post', $step) }}" method="POST">
                @csrf
                <div class="form__step-content">
                    @if($step == 1)
                        <!-- Content for Step 1 -->
                        @include('user.form.steps.first-step')
                    @elseif($step == 2)
                        <!-- Content for Step 2 -->
                        @include('user.form.steps.second-step', ['classes' => $trademarkClasses, 'selectedClasses' => $selectedClasses])
                    @elseif($step == 3)
                        <!-- Content for Step 3 -->
                        @include('user.form.steps.third-step')
                    @elseif($step == 4)
                        <!-- Content for Step 4 -->
                        @include('user.form.steps.fourth-step')
                    @elseif($step == 5)
                        <!-- Content for Step 5 -->
                        @include('user.form.steps.fifth-step')
                    @elseif($step == 6)
                        <!-- Content for Step 6 -->
                        @include('user.form.steps.sixth-step')
                    @elseif($step == 7)
                        <!-- Content for Step 7 -->
                        @include('user.form.steps.seventh-step')
                    @endif
                </div>
            </form>
        </div>
    </div>

@endsection

@section('script')
    <script>
        const form = document.getElementById('form');
        const nextBtn = document.querySelector('.next-btn-md');

        nextBtn.addEventListener('click', (e) => {
            e.preventDefault();
            form.submit();
        });

        // form.addEventListener('submit', (e) => {
        //     e.preventDefault();
        // });
    </script>

    @switch($step)
        @case(1)
            <script src="{{ asset('build/js/pages/form-first-step.js') }}"></script>
            @break
        @case(2)
            <script src="{{ asset('build/js/pages/form-second-step.js') }}"></script>
            @break
        @case(3)
            <script src="{{ asset('build/js/pages/form-third-step.js') }}"></script>
            @break
        @case(4)
            <script src="{{ asset('build/js/pages/form-fourth-step.js') }}"></script>
            @break
        @case(5)
            <script src="{{ asset('build/js/pages/form-fifth-step.js') }}"></script>
            @break
        @case(6)
            <script src="{{ asset('build/js/pages/form-sixth-step.js') }}"></script>
            @break
    @endswitch
@endsection