@extends('layouts.auth')

@section('title')
    Add Store Name
@endsection

@section('content')

<div class="my-auto" style="margin-top: 100px !important;">

    <div>
        <div class="mx-auto mt-5 mb-3 text-center rounded-full">
        <a href="{{ url('/') }}"><img src="{{ asset('images/logo-dark.png') }}" style="height: 40px;" alt="" class="mx-auto mb-6"></a>
        </div>
    </div>

    <div class="text-center">
        <h5 class="text-lg font-bold text-gray-600 dark:text-gray-100 montserrat">Your Earning <span class="text-orange-500">Expectation</span></h5>
    </div>

    <!-- card body -->
    <div class="p-6 text-center text-gray-600 dark:text-gray-100">
        <!-- content goes here -->
        What range of profit do you hope to make per month?
    </div>

    <div class="">
        <img src="{{ asset('images/bag-1.png') }}" class="mx-auto h-52" alt="store"/>
    </div>

    <form class="d-inline max-w-[400px] p-6 mx-auto" method="POST" action="{{ route('add-expectation') }}">
        @csrf
        <div class="grid grid-cols-1">
            <div class="mb-4">
                <label class="font-semibold" for="LoginEmail">Select Range:</label>
                <select name="expectation" class="w-full h-10 px-3 py-2 mt-2 bg-transparent border border-gray-100 rounded outline-none dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                    <option value="$500 - $1k">$500 - $9k</option>
                    <option value="$10k - $50">$10k - $50k</option>
                    <option value="$60k - $100k">$60k - $100k</option>
                    <option value="$110k - $900k">$110k - $900k</option>
                    <option value="$1M - $90M">$1M - $90M</option>
                    <option value="$100M - Above">$100M - Above</option>
                </select>
                @error('expectation')
                    <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                        <small class="text-center">{{ $message }}</small>
                    </span>
                @enderror
            </div>
        </div>

        <!-- card footer -->
        <div class="p-6 text-center border-gray-200">
            <!-- button link -->
            <button class="w-full px-3 py-3 mt-4 mb-2 font-semibold text-white bg-orange-500 rounded-md" 
            type="submit">Submit & Proceed</button>
        </div>
    </form>

</div>


@endsection