@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <style>
<style>
</style>

@endsection

@section('content')
<div class="col-md-9 admincontent  justify-content-center">
    <h3>{{$gallery->name}} {{ucfirst($gallery->type)}}</h3>
                <form method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    @if (session('success'))
                        <div class="alert alert-success">
                            {!! session('success') !!}
                        </div>
                    @endif
                    @if (session('status'))
                        <div class="alert alert-success">
                            {!! session('status') !!}
                        </div>
                    @endif
                    @if(!count($gallery->images))
                        <div class="form-group row">

                            <label for="file" class="col-md-4 col-form-label text-md-right">{{ucfirst($gallery->type)}}:</label>

                            <div class="col-md-6">
                                <input id="file" type="file" class=".form-control-file{{ $errors->has('file') ? ' is-invalid' : '' }}" name="filename" value="{{ old('file') }}" required autofocus accept="{{$gallery->type}}/{{$gallery->type=='video'?'mp4':'*'}}"> 
                                

                                @if ($errors->has('file'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('file') }}</strong>
                                    </span>
                                @else
                                <br/>{{$gallery->type == 'image' ? '800px(w) by 600px(h)' : ''}}
                                @endif
                            </div>
                        </div>
                        @if($gallery->type=='video')
                        <div class="form-group row">

                            <label for="file" class="col-md-4 col-form-label text-md-right">Video Thumbnail:</label>

                            <div class="col-md-6">
                                <input id="file" type="file" class=".form-control-file{{ $errors->has('file') ? ' is-invalid' : '' }}" name="th_filename" value="{{ old('file') }}" required autofocus accept="image/*"> 

                                @if ($errors->has('file'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('file') }}</strong>
                                    </span>
                                @else
                                <br/>200px(w) by 150px(h)
                                @endif
                            </div>
                        </div>

                        @endif
                    @else
                        <div class="form-group row gallery">
                            <label for="date" class="col-md-4 col-form-label text-md-right">{{ __('Image') }}:</label>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a data-fancybox  href="/gallery/{{$gallery->images[0]->id}}.{{$gallery->type=='video'?'mp4':'jpg'}}" width="100px">
                                <img src="/gallery/th_{{$gallery->images[0]->id}}.jpg">
                            </a>
                        </div>
                    @endif
                    <div class="form-group row">
                        <label for="date" class="col-md-4 col-form-label text-md-right">{{ __('Date') }}:</label>

                        <div class="col-md-6">
                            <input id="date" type="date" class="form-control{{ $errors->has('date') ? ' is-invalid' : '' }}" name="date" value="{{ count($gallery->images) ? $gallery->images[0]->date : old('date') }}" required>

                            @if ($errors->has('date'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('date') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="heading" class="col-md-4 col-form-label text-md-right">{{ __('Heading') }}:</label>

                        <div class="col-md-6">
                            <input id="heading" type="text" class="form-control{{ $errors->has('heading') ? ' is-invalid' : '' }}" name="heading" value="{{ count($gallery->images) ? $gallery->images[0]->heading : old('heading') }}" required autofocus>

                            @if ($errors->has('heading'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('heading') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="description" class="col-md-4 col-form-label text-md-right">{{ __('Description') }}:</label>

                        <div class="col-md-6">
                            <textarea id="description" class="form-control{{ $errors->has('description') ? ' is-invalid' : '' }}" name="description" required autofocus>{{ count($gallery->images) ?  $gallery->images[0]->description : old('description') }}</textarea>

                            @if ($errors->has('description'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('description') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="form-group row mb-0">
                        <div class="col-md-6 offset-md-4">
                            <button type="submit" class="btn btn-primary">
                                {{ __('Submit') }}
                            </button>
                        </div>
                    </div>
                </form>
</div>
@endsection

@section('javascript')
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
@endsection