@extends('frame')

@section('title', 'The Dash | Edit Page')

@php
    if($mode == 'edit')
    {
        $id = $page['id'];
        $uuid = $page['uuid'];
        $slug = $page['slug'];
        $feature = $page['feature'];
        $layout = $page['layout'];
        $tags = $page['tags'];
        $content = $page['content'];
        $date = $page['created'];
        $updated = $page['updated'];
        $media = $page['media'];
        $files = $page['docs'];
    }else{
        $id = "";
        $uuid = "";
        $slug = "";
        $feature = "";
        $layout = "";
        $tags = "";
        $content = "";
        $date = "";
        $updated = "";
        $media = "";
        $files = "";
    }
@endphp

  @section('main-content')
    <section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" role="file-manager">
        @if($page['feature'] == null)
            <div role="file-drop">
                <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
            </div>
            <label role="list-title">IMAGES AND VIDEO</label>
            <div role="page-images-list"></div>
            <label role="list-title">FILES</label>
            <div role="page-files-list"></div>
        @else
            <div role="file-drop">
                <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
            </div>
            <label role="list-title">IMAGES AND VIDEO</label>
            <div id="page-images-list" role="page-images-list">
                @if(count($media)>1)
                    @foreach($media as $item)
                        @if($item['type'] == "mp4")
                            <div id="{{ $loop->index }}" class="video-item" data-source="{{ $item['file'] }}">
                                <video>
                                    <source src="{{ $item['file'] }}"/>
                                </video>
                                <button id="{{ $loop->index }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        @else
                            <div id="{{ $loop->index }}" class="img-item" data-source="{{ $item['file'] }}" style="background: url({{ $item['file'] }}) no-repeat center center / cover">
                                <button id="{{ $loop->index }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        @endif
                    @endforeach
                @else
                    @if(media[0] != '')
                        @if(media[0]['type'] == "mp4")
                            <div id="0" class="video-item" data-source="{{ media[0]['file'] }}">
                                <button id="{{ $loop->index }}" class="media-remove">X</button>
                            </div>
                        @else
                            <div id="0" class="img-item" data-source="{{ media[0]['file'] }}" style="background: url({{ media[0]['file'] }}) no-repeat center center / cover">
                                <button id="{{ $loop->index }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        @endif
                    @endif
                @endif
            </div>
            <label role="list-title">FILES</label>
            <div role="page-files-list">
                @if(count($files) > 1)
                    @foreach($files as $item)
                        @php
                            $fileName = explode("/", $item['file']);
                        @endphp
                        @if($item['type'] == "mp3")
                            <div id="{{ $loop->index }}" class="audio-item" data-source="{{ $item['file'] }}">
                                <audio controls>
                                    <source src="{{ $item['file'] }}"/>
                                </audio>
                                <button id="{{ $loop->index  }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        @else
                            <div id="{{ $loop->index }}" class="file-item" data-source="{{ $item['file'] }}">
                                <a href="{{ $item['file'] }}" target="_blank">{{ $fileName[6] }}"</a>
                                <button id="{{ $loop->index  }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        @endif
                    @endforeach
                @else
                    @if(isset($files[0]) && $files[0] != '')
                        @php
                            $fileName = explode("/", $item['file']);
                        @endphp
                        @if($files[0]['type'] == "mp3")
                            <div id="0" class="audio-item" data-source="{{ $files[0]['file'] }}">
                                <audio controls>
                                    <source src="{{ $files[0]['file'] }}"/>
                                </audio>
                                <button id="{{ $loop->index }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        @else
                            <div id="0" class="file-item" data-source="{{ $files[0]['file'] }}">
                                <a href="{{ $item['file'] }}" target="_blank">{{ $fileName[6] }}"</a>
                                <button id="{{ $loop->index }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        @endif

                        @else

                    @endif
                @endif

            </div>
        @endif
    </section>
    <section role="page-meta">
        <div role="page-meta-wrapper">
            <div role="page-title">
                <strong>TITLE</strong>
                <textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{ $title }}</textarea>
            </div>
            <div role="page-tags">
                <strong>TAGS</strong>
                <textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{ $tags }}</textarea>
            </div>
            <div role="page-layouts">
                <strong>LAYOUTS</strong>
                <select id="page-templates">
                    @foreach($views as $view)
                        @if($view == $page['layout'])
                            <option value={{ $view }} selected>{{ $view }}</option>
                        @else
                            <option value={{ $view }}>{{ $view }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div role="page-options">
                <strong>OPTIONS</strong>
                @spaceless
                    @include('includes.options')
                @endspaceless
            </div>
            <div role="page-updated">
                <strong>UPDATED</strong>
                <span id="post-date" type="text">
                    {{ $updated }}
                </span>
            </div>
            <div role="page-created">
                <strong>CREATED</strong>
                <span id="post-date" type="text">
                    {{ $date }}
                </span>
                <input id="page-files-upload" type="file" name="page-files-upload" multiple/>
                <input id="post-image-upload" type="file" name="post-image-upload"/>
                <input id="form_token" name="token" type="hidden" value="needtoaddtoken"></div>
            </div>
        </div>
    </section>
    <section role="text-editor">
        @spaceless
        @include('includes.editor')
        @endspaceless
        <div role="edit-post-wrapper">
            <textarea id="edit" spellcheck="false" class="language-md">{{ $content }}</textarea>
            <pre id="highlight"><code id="highlight-content" class="language-md"></code></pre>
        </div>
    </section>
  @endsection
  @section('scripting')
    <script type="module" src="/assets/scripts/dash/app/EditPage.js"></script>
  @endsection