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

@php
  $bySection = $files->keyBy('section');
  $s1 = $bySection->get('Section One');
  $s2 = $bySection->get('Section Two');
  $s3 = $bySection->get('Section Three');
  $s4 = $bySection->get('Section Four');
  $s5 = $bySection->get('Section Five');
  $s6 = $bySection->get('Section Six');
  $s7 = $bySection->get('Section Seven');
  $s8 = $bySection->get('Section Eight');
  $s9 = $bySection->get('Section Nine');
  $s10 = $bySection->get('Section Ten');
  $faq = $files->filter(function ($f) {
      return in_array($f->section, [
          'Section Eleven',
          'Section Twelve',
          'Section Thirteen',
          'Section Fourteen',
          'Section Fifteen',
          'Section Sixteen',
          'Section Seventeen',
          'Section Eighteen',
      ], true);
  })->values();
@endphp

<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>

    @if($s1)
    <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">{{$s1->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_{{$s1->id}}_image_path" class="dropzone" data-preview="file_cont_{{$s1->id}}_image_path">
                  @csrf
                  <input type="hidden" name="file_id" value="{{$s1->id}}" readonly>
                  <input type="hidden" name="path_field" value="image_path" readonly>
                </form>
                <div align="center" class="mt-2">
                  <img id="file_cont_{{$s1->id}}_image_path" src="{{asset($s1->image_path)}}" width="330px" class="rounded" @if(!$s1->image_path) style="display:none;" @endif />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s1->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s1->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 1</label>
                  <input type="text" name="subheading[{{$s1->id}}]" class="form-control mb-2" placeholder="Sub Heading 1" value="{{$s1->subheading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 2</label>
                  <input type="text" name="subheading2[{{$s1->id}}]" class="form-control mb-2" placeholder="Sub Heading 2" value="{{$s1->subheading2}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 3</label>
                  <input type="text" name="subheading3[{{$s1->id}}]" class="form-control mb-2" placeholder="Sub Heading 3" value="{{$s1->subheading3}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s1->id}}]" class="form-control mb-2" placeholder="Description">{{$s1->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s2)
    <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">{{$s2->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_{{$s2->id}}_image_path" class="dropzone" data-preview="file_cont_{{$s2->id}}_image_path">
                  @csrf
                  <input type="hidden" name="file_id" value="{{$s2->id}}" readonly>
                  <input type="hidden" name="path_field" value="image_path" readonly>
                </form>
                <div align="center" class="mt-2">
                  <img id="file_cont_{{$s2->id}}_image_path" src="{{asset($s2->image_path)}}" width="330px" class="rounded" @if(!$s2->image_path) style="display:none;" @endif />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s2->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s2->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 1</label>
                  <input type="text" name="subheading[{{$s2->id}}]" class="form-control mb-2" placeholder="Sub Heading 1" value="{{$s2->subheading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 2</label>
                  <input type="text" name="subheading2[{{$s2->id}}]" class="form-control mb-2" placeholder="Sub Heading 2" value="{{$s2->subheading2}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 3</label>
                  <input type="text" name="subheading3[{{$s2->id}}]" class="form-control mb-2" placeholder="Sub Heading 3" value="{{$s2->subheading3}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s2->id}}]" class="form-control mb-2" placeholder="Description">{{$s2->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s3)
    <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">{{$s3->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">
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s3->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s3->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 1</label>
                  <input type="text" name="subheading[{{$s3->id}}]" class="form-control mb-2" placeholder="Sub Heading" value="{{$s3->subheading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 2</label>
                  <input type="text" name="subheading2[{{$s3->id}}]" class="form-control mb-2" placeholder="Sub Heading 2" value="{{$s3->subheading2}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 3</label>
                  <input type="text" name="subheading3[{{$s3->id}}]" class="form-control mb-2" placeholder="Sub Heading 3" value="{{$s3->subheading3}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 4</label>
                  <input type="text" name="subheading4[{{$s3->id}}]" class="form-control mb-2" placeholder="Sub Heading 4" value="{{$s3->subheading4}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s3->id}}]" class="form-control mb-2" placeholder="Description">{{$s3->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s4)
    <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">{{$s4->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">
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s4->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s4->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading (Tag)</label>
                  <input type="text" name="subheading[{{$s4->id}}]" class="form-control mb-2" placeholder="Sub Heading" value="{{$s4->subheading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s4->id}}]" class="form-control mb-2" placeholder="Description">{{$s4->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s5)
    <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">{{$s5->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_{{$s5->id}}_image_path" class="dropzone" data-preview="file_cont_{{$s5->id}}_image_path">
                  @csrf
                  <input type="hidden" name="file_id" value="{{$s5->id}}" readonly>
                  <input type="hidden" name="path_field" value="image_path" readonly>
                </form>
                <div align="center" class="mt-2">
                  <img id="file_cont_{{$s5->id}}_image_path" src="{{asset($s5->image_path)}}" width="330px" class="rounded" @if(!$s5->image_path) style="display:none;" @endif />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s5->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s5->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s5->id}}]" class="form-control mb-2" placeholder="Description">{{$s5->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s6)
    <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">{{$s6->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_{{$s6->id}}_image_path" class="dropzone" data-preview="file_cont_{{$s6->id}}_image_path">
                  @csrf
                  <input type="hidden" name="file_id" value="{{$s6->id}}" readonly>
                  <input type="hidden" name="path_field" value="image_path" readonly>
                </form>
                <div align="center" class="mt-2">
                  <img id="file_cont_{{$s6->id}}_image_path" src="{{asset($s6->image_path)}}" width="330px" class="rounded" @if(!$s6->image_path) style="display:none;" @endif />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s6->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s6->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s6->id}}]" class="form-control mb-2" placeholder="Description">{{$s6->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s7)
    <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">{{$s7->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">
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s7->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s7->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading (Tag)</label>
                  <input type="text" name="subheading[{{$s7->id}}]" class="form-control mb-2" placeholder="Sub Heading" value="{{$s7->subheading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 1</label>
                  <input type="text" name="subheading2[{{$s7->id}}]" class="form-control mb-2" placeholder="Sub Heading 1" value="{{$s7->subheading2}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 2</label>
                  <input type="text" name="subheading3[{{$s7->id}}]" class="form-control mb-2" placeholder="Sub Heading 2" value="{{$s7->subheading3}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Sub Heading 3</label>
                  <input type="text" name="subheading4[{{$s7->id}}]" class="form-control mb-2" placeholder="Sub Heading 3" value="{{$s7->subheading4}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s7->id}}]" class="form-control mb-2" placeholder="Description">{{$s7->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s8)
    <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">{{$s8->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">
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s8->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s8->heading}}" />
                </div>
                <div class="col-md-12 mb-2">
                  <label class="lblprofile">Image 1</label>
                  <form action="{{url('save-file')}}" method="post" enctype="multipart/form-data" id="cms_files_{{$s8->id}}_image_path" class="dropzone" data-preview="file_cont_{{$s8->id}}_image_path">
                    @csrf
                    <input type="hidden" name="file_id" value="{{$s8->id}}" readonly>
                    <input type="hidden" name="path_field" value="image_path" readonly>
                  </form>
                  <div align="center" class="mt-2">
                    <img id="file_cont_{{$s8->id}}_image_path" src="{{asset($s8->image_path)}}" width="330px" class="rounded" @if(!$s8->image_path) style="display:none;" @endif />
                  </div>
                </div>
                <div class="col-md-12 mb-2">
                  <label class="lblprofile">Image 2</label>
                  <form action="{{url('save-file')}}" method="post" enctype="multipart/form-data" id="cms_files_{{$s8->id}}_subheading" class="dropzone" data-preview="file_cont_{{$s8->id}}_subheading">
                    @csrf
                    <input type="hidden" name="file_id" value="{{$s8->id}}" readonly>
                    <input type="hidden" name="path_field" value="subheading" readonly>
                  </form>
                  <div align="center" class="mt-2">
                    <img id="file_cont_{{$s8->id}}_subheading" src="{{asset($s8->subheading)}}" width="330px" class="rounded" @if(!$s8->subheading) style="display:none;" @endif />
                  </div>
                </div>
                <div class="col-md-12 mb-2">
                  <label class="lblprofile">Image 3</label>
                  <form action="{{url('save-file')}}" method="post" enctype="multipart/form-data" id="cms_files_{{$s8->id}}_subheading2" class="dropzone" data-preview="file_cont_{{$s8->id}}_subheading2">
                    @csrf
                    <input type="hidden" name="file_id" value="{{$s8->id}}" readonly>
                    <input type="hidden" name="path_field" value="subheading2" readonly>
                  </form>
                  <div align="center" class="mt-2">
                    <img id="file_cont_{{$s8->id}}_subheading2" src="{{asset($s8->subheading2)}}" width="330px" class="rounded" @if(!$s8->subheading2) style="display:none;" @endif />
                  </div>
                </div>
                <div class="col-md-12 mb-2">
                  <label class="lblprofile">Image 4</label>
                  <form action="{{url('save-file')}}" method="post" enctype="multipart/form-data" id="cms_files_{{$s8->id}}_subheading3" class="dropzone" data-preview="file_cont_{{$s8->id}}_subheading3">
                    @csrf
                    <input type="hidden" name="file_id" value="{{$s8->id}}" readonly>
                    <input type="hidden" name="path_field" value="subheading3" readonly>
                  </form>
                  <div align="center" class="mt-2">
                    <img id="file_cont_{{$s8->id}}_subheading3" src="{{asset($s8->subheading3)}}" width="330px" class="rounded" @if(!$s8->subheading3) style="display:none;" @endif />
                  </div>
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description</label>
                  <textarea name="description[{{$s8->id}}]" class="form-control mb-2" placeholder="Description">{{$s8->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s9)
    <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">{{$s9->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-12 mb-2 position-relative">
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s9->id}}]" class="form-control mb-2" placeholder="e.g. READY TO JOIN?" value="{{$s9->heading}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Intro / Description</label>
                  <textarea name="subheading[{{$s9->id}}]" class="form-control mb-2" rows="3" placeholder="e.g. Apply to join the Nomadic creative network...">{{$s9->subheading}}</textarea>
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Apply Button Text (Subheading 2)</label>
                  <input type="text" name="subheading2[{{$s9->id}}]" class="form-control mb-2" placeholder="e.g. Apply Now" value="{{$s9->subheading2}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">FAQ Link Text (Subheading 3)</label>
                  <input type="text" name="subheading3[{{$s9->id}}]" class="form-control mb-2" placeholder="e.g. READ THE FAQ" value="{{$s9->subheading3}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Tagline (Subheading 4)</label>
                  <input type="text" name="subheading4[{{$s9->id}}]" class="form-control mb-2" placeholder="e.g. No fees. No lock-in. Vetted entry." value="{{$s9->subheading4}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Note (Subheading 5)</label>
                  <input type="text" name="subheading5[{{$s9->id}}]" class="form-control mb-2" placeholder="e.g. Applications are reviewed individually." value="{{$s9->subheading5}}" />
                </div>
                <div class="col-md-12">
                  <label class="lblprofile">Description (optional)</label>
                  <textarea name="description[{{$s9->id}}]" class="form-control mb-2" rows="2" placeholder="Optional extra content">{{$s9->description}}</textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($s10)
    <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">{{$s10->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">
                <div class="col-md-12">
                  <label class="lblprofile">Heading</label>
                  <input type="text" name="heading[{{$s10->id}}]" class="form-control mb-2" placeholder="Heading" value="{{$s10->heading}}" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    @if($faq->count() > 0)
    <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">FAQ Items</label>
          </div>
        </div>
      </div>
      <div class="col-xl-8 mt-4">
        <div class="card">
          <div class="card-body pt-3">
            @foreach($faq as $f)
            <div class="row">
              <div class="col-md-12 mb-3">
                <label class="lblprofile">Question {{$loop->index + 1}}</label>
                <input type="text" name="heading[{{$f->id}}]" class="form-control mb-2" placeholder="Question" value="{{$f->heading}}" />
                <textarea name="description[{{$f->id}}]" class="form-control mb-2" placeholder="Answer">{{$f->description}}</textarea>
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
    @endif

    <div align="center">
      <input type="button" id="save_text" class="btn btn-primary" value="Save Changes" />
    </div>
  </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