@extends('layouts.plains')

@section('stylesheets')
    @parent
    <link rel="stylesheet" href="/css/login.css">
    <style>
        .auth-login-wrapper {
            width: 70%;
        }

        .input-pen input {
            margin-bottom: 15px;
        }

        .caption-container {
            display: flex;
            margin-bottom: 20px;
        }

        .caption-image {
            margin-right: 10px;
        }

        .caption-image img {
            max-width: 250px;
        }

        @media (max-width: 520px){
            .auth-login-wrapper {
                width: 90%;
            }
                
            .caption-container {
                display: block;

            }

            .caption-image {
                margin-right: 0;
                margin-bottom: 10px;
            }

            .caption-image img {
                max-width: 100%;
            }
        }
    </style>
@endsection

@section('content')
<div class="auth-login-wrapper">
    <main class="main">
        <h3 style="padding-bottom: 20px;">Register to continue</h3>
        <p class="mb-4">Already have an account? <a href="{{ route('test_login') }}" class="text-primary">Log In</a></p>

        <form class="login-form" action="{{ route('test_register') }}" method="POST">
            @csrf
          <div class="row">

            <div class="col-sm-12 mb-2">
            <h5 class="question">Question: World Food Day is celebrated on the 16th of October every year and is a day of action dedicated to tackling global hunger. Cravvings is a platform that connects people to food vendors around them and allows them share their experiences by leaving reviews.</h5>
              <div class="form-group">
                <label for="wfd">Come up with a celebratory post for Cravvings to celebrate World Food Day</label>
                <textarea rows="3" name="wfd" class="login-input form-control" id="wfd"></textarea>

              </div>
              <div class="form-group">
                <label for="wfd">Come up with offline and online activities Cravvings can do to celebrate World Food Day</label>
                <textarea rows="5" name="wfd" class="login-input form-control" id="wfd"></textarea>

              </div>
            </div>
            <div class="col-sm-12 mb-2">
              <div class="form-group">
                <label for="brand">What brand’s content do you like and why?</label>
                <textarea rows="5" name="brand" class="login-input form-control" id="brand"></textarea>

              </div>
            </div>
            <div class="col-sm-12 mb-2">
              <div class="form-group input-pen">
                <label for="pen">Share three alternative uses for a pen.</label>
                <input type="text" name="penone" class="login-input form-control" id="pen" placeholder="Use case 1">
                <input type="text" name="pentwo" class="login-input form-control" placeholder="Use case 2">
                <input type="text" name="penthree" class="login-input form-control" placeholder="Use case 3">
              </div>
            </div>
            <div class="col-sm-12 mb-2">
              <div class="form-group">
                <label for="city">What’s one cost-effective thing we can do to create more awareness for Cravvings?</label>
                <textarea rows="5" name="brand" class="login-input form-control" id="brand"></textarea>

              </div>
            </div>
            <div class="col-sm-12 mb-2">
              <div class="form-group">
                <label for="caption">Caption these</label>
                <div class="caption-container">
                    <div class="caption-image">
                        <img src="/images/rice_cropped.jpg" alt="Caption Image">
                    </div>
                    <textarea rows="2" name="brand" class="login-input form-control" id="caption"></textarea>
                </div>
                <div class="caption-container">
                    <div class="caption-image">
                        <img src="/images/rice_cropped.jpg" alt="Caption Image">
                    </div>
                    <textarea rows="2" name="brand" class="login-input form-control" id="caption"></textarea>
                </div>
                <div class="caption-container">
                    <div class="caption-image">
                        <img src="/images/rice_cropped.jpg" alt="Caption Image">
                    </div>
                    <textarea rows="2" name="brand" class="login-input form-control" id="caption"></textarea>
                </div>
                <div class="caption-container">
                    <div class="caption-image">
                        <img src="/images/rice_cropped.jpg" alt="Caption Image">
                    </div>
                    <textarea rows="2" name="brand" class="login-input form-control" id="caption"></textarea>
                </div>
                
              </div>
            </div>

            <div class="col-sm-12 mb-2">
              <button type="submit" name="submit" class="login-btn button-primary w-100">Sign Up</button>
            </div>


            <div class="col-sm-12">
              <small>By signing up, you agree to the <a href="/privacy">Terms of Service</a>.</small>
            </div>
          </div>
        </form>
      </main>

      <footer class="mt-6">
        <small>&copy; 2022 - Cravvings. All rights reserved.</small>
      </footer>
    </div>

@endsection

@section('javascript')
    <script src="/js/utility.js"></script>
    <script src="/js/side.js"></script>
@endsection