@extends("website.layouts.layout")

@section("title")
Home
@endsection

@section('css')
    <link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet" />
@endsection

@section("body")
    <div class="flex flex-row flex-wrap justify-between">
        <div class="w-full mb-10 md:w-7/12 md:mb-0">
            @if ($video)
                <video
                    id="my-video"
                    class="video-js vjs-theme-city w-full h-96 md:h-full object-fill"
                    controls
                    preload="auto"
                    {{-- poster="MY_VIDEO_POSTER.jpg" --}}
                    data-setup="{}"
                >
                    <source src="/storage/{{ $video->path }}" type="video/mp4" />
                    <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank"
                        >supports HTML5 video</a
                    >
                    </p>
                </video>
            @endif
        </div>

        <div class="w-full md:w-2/5">
            <form action="{{ route('login') }}" method="POST" class="mb-10">
                @csrf

                <div class="mb-4">
                    <label for="username" class="block font-medium text-slate-700">Username</label>
                    <input type="text" id="username" name="username"
                        class="mt-1 block w-full px-3 py-2 placeholder-slate-400 border border-slate-500 rounded-md focus:outline-none focus:shadow focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
                        placeholder="Username">
                    @error('username')
                        <p class="text-pink-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="password" class="block font-medium text-slate-700">Password</label>
                    <input type="password" id="password" name="password"
                        class="mt-1 block w-full px-3 py-2 placeholder-slate-400 border border-slate-500 rounded-md focus:outline-none focus:shadow focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
                        placeholder="Password">
                    @error('password')
                        <p class="text-pink-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                @if(Session::has("error"))
                    <p class="text-red-600">{{ Session::get("error") }}</p>
                @endif

                <div class="flex justify-end">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </form>

            <div class="relative flex py-2 items-center">
                <div class="flex-grow border-t-2 border-gray-900"></div>
                <span class="flex-shrink mx-4 ml-4 mr-4 font-semibold text-lg">
                    Hear From Us
                </span>
                <div class="flex-grow border-t-2 border-gray-900"></div>
            </div>

            @include('partials.event')
            @include('website.partials.contact-form')
        </div>
    </div>
@endsection