@extends('layouts.app')

@section('content')
    <main class="page-maincontent">
        <div class="container">
            <!-- code here -->
            <div class="card">
                <div class="card-image">
                    <h2 class="card-heading">
                        Just select the file (FACEBOOK PDF)
                        <small>Let us do the rest</small>
                    </h2>
                </div>

                <form enctype="multipart/form-data"
                      method="POST"
                      class="card-form"
                      action="{{route('home.uploadMultiple')}}">
                    @csrf
                    <div class="input">
                        <input
                                multiple
                                class="input-field"
                                type="file"
                                name="files[]"
                                accept="application/pdf"
                        />
                    </div>

                    <div class="action">
                        <button type="submit" class="action-button">CONVERT NOW</button>
                    </div>

                    <div class="btn-link">
                        <a href="{{route('home.index')}}" title="Upload Multiple Files">
                            Upload Single File
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.5;
            background-color: #f1f3fb;
            padding: 0 2rem;
        }

        img {
            max-width: 100%;
            display: block;
        }

        input {
            appearance: none;
            border-radius: 0;
        }

        .card {
            margin: 2rem auto;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 425px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 20px 0 rgba(153, 153, 153, .25);
            padding: 0.75rem;
        }

        .card-image {
            border-radius: 8px;
            overflow: hidden;
            padding-bottom: 35%;
            background-repeat: no-repeat;
            background-size: 150%;
            background-position: 0 5%;
            position: relative;
        }

        .card-heading {
            position: absolute;
            left: 10%;
            top: 15%;
            right: 10%;
            font-size: 1.75rem;
            font-weight: 700;
            color: #00a4ff;
            line-height: 1.222;
        }

        .card-heading small {
            display: block;
            font-size: 0.75em;
            font-weight: 400;
            margin-top: 0.25em;
        }

        .card-form {
            padding: 2rem 1rem 0;
        }

        .input {
            display: flex;
            flex-direction: column-reverse;
            position: relative;
            padding-top: 1.5rem;
        }

        .input + .input {
            margin-top: 1.5rem;
        }

        .input-field {
            border: 0;
            z-index: 1;
            background-color: transparent;
            border-bottom: 2px solid #00a4ff;
            font: inherit;
            font-size: 1.125rem;
            padding: 0.25rem 0;
        }

        .input-field:focus, .input-field:valid {
            outline: 0;
            border-bottom-color: #00a4ff;
        }

        .input-field:focus + .input-label, .input-field:valid + .input-label {
            color: #00a4ff;
            transform: translateY(-1.5rem);
        }

        .action {
            margin-top: 2rem;
        }

        .action-button {
            font: inherit;
            font-size: 1.25rem;
            padding: 1em;
            width: 100%;
            font-weight: 500;
            background-color: #00a4ff;
            border-radius: 6px;
            color: #fff;
            border: 0;
            cursor: pointer;
        }

        .action-button:focus {
            outline: 0;
        }

        .card-info {
            padding: 1rem 1rem;
            text-align: center;
            font-size: 0.875rem;
            color: #00a4ff;
        }

        .card-info a {
            display: block;
            color: #00a4ff;
            text-decoration: none;
        }

        .btn-link {
            text-decoration: none;
            display: block;
            text-align: center;
            margin-top: 15px;
        }
    </style>
@endsection