@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 = "";
    @endif

@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 role="page-images-list">
                @if(count($media)>1)
                    {% for item in media %}
                        {% set fileName = item.file|split('/') %}
                        {% if item.type == "mp4" %}

                            <div id="{{ loop.index0 }}" class="video-item" data-source="{{ item.file }}">
                                <video>
                                    <source src="{{ item.file }}"/>
                                </video>
                                <button id="{{ loop.index0 }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        {% else %}
                            <div id="{{ loop.index0 }}" class="img-item" data-source="{{ item.file }}" style="background: url({{ item.file }}) no-repeat center center / cover">
                                <button id="{{ loop.index0 }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        {% endif %}
                    {% endfor %}
                @else
                    {% if media[0] != '' %}
                        {% set fileName = media[0].file|split('/') %}
                        {% if media[0].type == "mp4" %}
                            <div id="0" class="video-item" data-source="{{ media[0].file }}">
                                <button id="{{ loop.index0 }}" 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.index0 }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        {% endif %}
                        {% else %}
                    {% endif %}
                @endif
            </div>
            <label role="list-title">FILES</label>
            <div role="page-files-list">
                {% if files|length > 1 %}
                    {% for item in files %}
                        {% set fileName = item.file|split('/') %}
                        {% if item.type == "mp3" %}
                            <div id="{{ loop.index0 }}" class="audio-item" data-source="{{ item.file }}">
                                <audio controls>
                                    <source src="{{ item.file }}"/>
                                </audio>
                                <button id="{{ loop.index0 }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        {% else %}
                            <div id="{{ loop.index0 }}" class="file-item" data-source="{{ item.file }}">
                                <a href="{{ item.file }}" target="_blank">{{ fileName[6] }}"</a>
                                <button id="{{ loop.index0 }}" class="media-remove">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    {% if files[0] != '' %}
                        {% set fileName = files[0].file|split('/') %}
                        {% 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.index0 }}" 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.index0 }}" 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">
                    {% for view in views %}
                        {% if view == page['layout'] %}
                            <option value={{ view }} selected>{{ view }}</option>
                        {% else %}
                            <option value={{ view }}>{{ view }}</option>
                        {% endif %}

                    {% endfor %}
                </select>
            </div>
            <div role="page-options">
                <strong>OPTIONS</strong>
                {% apply spaceless %}
                {{ include("dash/partials/options.twig") }}
                {% endapply %}
            </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="{{ token }}"></div>
            </div>
        </div>
    </section>
    <section role="text-editor">
        {% apply spaceless %}
        {{ include("dash/partials/editor.twig") }}
        {% endapply %}
        <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