@extends('layouts.sidebar')
@section('title', 'Nomadic-CMS')
@section('content')
<div class="pagetitle">
  <h1>{{$page}} Page</h1>
</div>

<section class="section profile">
  <div class="col-xl-12">
    @if(session('success'))
    <div class="alert alert-success p-2">{{session('success')}}</div>
    @endif
    <input type="hidden" id="page_name" value="{{$page}}" readonly>    
    @foreach($files as $file)
    <div class="row">
      <div class="col-xl-4">
        <div class="card">
          <div class="card-body profile-card pt-4 pl-0 d-flex flex-column">
            <label class="lblprofile">{{$file->section}}</label>
          </div>
        </div>
      </div>
      <div class="col-xl-8 mt-4">
        <div class="card">
          <div class="card-body pt-3">
            <div class="row">
              <div class="col-md-7 mb-2 position-relative">
                <form action="{{url('save-file')}}" method="post" enctype="multipart/form-data" id="cms_files_{{$file->id}}" class="dropzone" @if($file->video_path) data-video="true" @endif>
                  @csrf
                  <input type="hidden" name="file_id" value="{{$file->id}}" readonly>
                  @if($file->video_path)
                  <input type="hidden" name="file_type" value="video" readonly>
                  @else
                  <input type="hidden" name="file_type" value="image" readonly>
                  @endif
                </form>
                <div align="center" class="mt-2">
                    @if($file->video_path)
                    <video id="file_cont_{{$file->id}}" width="330px" controls>
                      <source src="{{asset($file->video_path)}}" type="video/mp4">
                      Your browser does not support the video tag.
                    </video>
                    @else
                    <img id="file_cont_{{$file->id}}" src="{{asset($file->image_path)}}" width="330px" class="rounded" />
                    @endif
                  </div>
                  @if($file->extra==1)
                  <div class="col-md-12">
                    <label class="lblprofile">Heading</label>
                    <input type="text" name="heading" class="form-control mb-2" placeholder="Heading" value="{{$file->heading}}" />
                  </div>
                  <div class="col-md-12">
                    <label class="lblprofile">Sub Heading</label>
                    <input type="text" name="subheading" class="form-control mb-2" placeholder="Sub Heading" value="{{$file->subheading}}" />
                  </div>
                  <div class="col-md-12">
                    <label class="lblprofile">Description</label>
                    <textarea name="description" class="form-control mb-2" placeholder="Description">{{$file->description}}</textarea>
                  </div>
                  @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endforeach

  </div>
</section>
@endsection
@section('footer_scripts')
<link href="{{asset('css/dropzone.min.css')}}" rel="stylesheet">
<link href="{{asset('css/dropzone.custom.css')}}" rel="stylesheet">
<script src="{{asset('js/dropzone.js')}}"></script>
<script src="{{asset('js/cropper.js')}}"></script>
<link href="{{asset('css/cropper.css')}}" rel="stylesheet">
<script>
  cms_editor();
</script>
@endsection