@extends('layouts.master')

@section('page-top')
<section class="inner-page-banner bg-2 bg-image">
    <div class="container">
        <div class="inner text-center">
            <h1 class="title">Submit New Artwork</h1>
            <nav class="mt-4">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="/artworks">Explore Artwork</a></li>
                    <li class="breadcrumb-item active">Create</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
@endsection
@section('page-content')
<section class="pt-120 pb-90">
    <div class="container">
        <form action="/create-artwork" method="POST" name="create-artwork" enctype="multipart/form-data">
            @csrf
            <div class="create-item-wrapper">
                @if($errors->any())
                    <div class="row">
                        <div class="col">
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="row">
                    <div class="col-lg-4">
                        {{-- file upload area --}}
                        <div class="upload-area">
                            <div class="upload-formate mb-6">
                                <h5 class="title mb-1">
                                    Upload Artwork File
                                </h5>
                                <p class="formate">
                                    Drag or choose your file to upload.<br>
                                    It will be resized to 3,000px square <em>(thanks Apple.)</em>
                                </p>
                            </div>
                            <div class="browse-file-wrapper">
                                {{-- actual upload which is hidden --}}
                                <input name="file" id="file" type="file" class="inputfile" required />
                                {{-- our custom upload button --}}
                                <label for="file" title="No File Choosen">
                                    <i class="ri-upload-cloud-line"></i>
                                    <span class="text-center mb-2">Choose a File</span>
                                    <span class="file-type text-center mt--10">PNG, JPG, JPEG<br>
                                        Max 20Mb<br>
                                        Prefer 3,000px Square</span>
                                </label>
                            </div>
                            @error('file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        {{-- end upoad file area --}}
                    </div>
                    <div class="col-lg-8">
                        <div class="form-field-wrapper mb-4">
                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <div class="field-box">
                                        <label for="title" class="form-label">Artwork Title</label>
                                        <input id="title" name="title" type="text" class="@error('title') is-invalid @enderror"
                                            placeholder="e. g. `This Artwork's Title`"
                                            required
                                            value="{{ old('title') }}">
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <div class="field-box">
                                        <label for="description" class="form-label">Artwork Description</label>
                                        <textarea id="description" name="description" rows="3" class="@error('description') is-invalid @enderror"
                                            placeholder="e. g. “This cryptic mess represents...”">{{ old('description') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12 mb-4 pb-4">
                                    <div class="field-box">
                                        <label for="podcast" class="form-label">For Podcast</label>
                                        <select id="podcast" name="podcast" required>
                                            @foreach ($podcasts as $podcast)
                                                <option value="{{ $podcast->id }}" @selected(old('podcast') == $podcast->id)>{{ $podcast->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {{-- End .row --}}
                        </div>
                    </div>
                    <div class="col">
                        <p>By submitting this artwork, you agree you have the rights to publish the artwork and are placing this artwork under a
                        non-revokable <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons CC BY-SA 4.0 DEED Attribution-ShareAlike 4.0 International</a> license.</p>
                    </div>
                </div>
                {{-- End .row --}}
            </div>
            {{-- End .create-item-wrapper --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="d-flex-between upload-btn-wrapper flex-wrap">
                        <div class="d-flex-center ">
                            <button type="reset" class="btn btn-gradient btn-medium mr-3"><span>Cancel</span></button>
                        </div>
                        <div class="input-box">
                            <button type="submit" class="btn btn-gradient btn-medium justify-content-center"><span>Submit Artwork.</span></button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- ENd .row --}}
        </form>
    </div>
</section>
@endsection