@extends('layouts.admin')

@section('page-header', 'Page - Home')

@section('content')
    <div class="card">
        <h3 class="card-header">Introduction</h3>
        <div class="card-body">
            <form method="post"
                action="{{ route('admin.pages.edit', [$page, 'introduction']) }}"
                enctype="multipart/form-data">
                @csrf

                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="title">Title</label>
                    <div class="col-sm-4">
                        <input name="introduction[title]" type="text"
                            class="form-control{{ $errors->has('introduction.title') ? ' is-invalid' : '' }}"
                            id="title"
                            value="{{ old('introduction.title', $content->valueForKey('introduction.title')) }}">
                        @if ($errors->has('introduction.title'))
                            <span class="invalid-feedback">
                                {{ $errors->first('introduction.title') }}
                            </span>
                        @endif
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="description">Description</label>
                    <div class="col-sm-9">
                        <textarea name="introduction[description]" rows="8"
                            class="form-control{{ $errors->has('introduction.description') ? ' is-invalid' : '' }}" id="description"
                            placeholder="Description">{{ old('introduction.description', $content->valueForKey('introduction.description')) }}</textarea>

                        @if ($errors->has('introduction.description'))
                            <div class="invalid-feedback">
                                {{ $errors->first('introduction.description') }}
                            </div>
                        @endif
                    </div>
                </div>



                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="introduction-media">Image or Video<p style="width: 100%;color: #6D4949; font-size: 11px;">( maximum image size:2MB , video size:150MB)</p> 
                    </label>

                    <div class="col-sm-4">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input fileup" name="introduction[media]" id="introduction-media">
                            <label class="custom-file-label" for="introduction-media">Choose File</label>
                        </div>

                        @if ($errors->has('introduction.media'))
                            <div class="invalid-feedback" style="display:block">
                                {{ $errors->first('introduction.media') }}
                            </div>
                        @endif

                        @if ($content->valueForKey('introduction.media-path'))
                            @if ($content->valueForKey('introduction.media-type') == 'video')
                                {{--<!-- <video controls width="450" class="mt-2">
                                    <source src="{{ user_asset($content->valueForKey('introduction.media-path')) }}"
                                            type="{{ $content->valueForKey('introduction.mime_type') }}">
                                </video> -->--}}

                                 <video width="450" controls="controls" class="mt-2">
                                     <source src="{{ user_asset($content->valueForKey('introduction.media-path')) }}" type="video/mp4"/>
                                     <source src="{{ user_asset($content->valueForKey('introduction.media-path')) }}" type="video/ogg"/>
                                     <source src="{{ user_asset($content->valueForKey('introduction.media-path')) }}" type="video/webm"/>
                                  </video>
                            @endif
                            @if ($content->valueForKey('introduction.media-type') == 'image')
                                <img src="{{ user_asset($content->valueForKey('introduction.media-path')) }}" alt="" height="200" class="mt-2">
                            @endif
                        @else
                            <div class="mt-2">No media uploaded yet!</div>
                        @endif
                    </div>
                </div>
                <div class="form-group row">
                    <div class="offset-3 col-sm-9">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection