@extends('app_admin')

@section('title', 'Community Docs')

@section('content')
<div class="content">
  <!-- Hero Image -->
  <div class="hero" style="background-image: url({{ asset('assets/images/venues/hero/'.$property->hero_image) }})">
    <div class="hero-title {{ $property->slug == 'loulavie' ? 'loulavie' : '' }}">
      <div class="text-wrapper">
        <h2 class="bold uppercase  wow animated fadeInUp"
          data-wow-delay="300ms"
          data-wow-duration="800ms">Welcome
        </h2>
        <h1 class="wow animated fadeInUp"
          data-wow-delay="600ms"
          data-wow-duration="800ms">
          @if($property->slug == 'lcn')
            {{ 'LCN Concierge Assistant Gateway' }}
          @elseif($property->slug == 'apogee')
            {{ $property->name.' Concierge' }}
          @else
            {{ $property->name.' Concierge'.(($property->id != 2 && $property->id != 7 && $property->id != 9) ? ' Gateway' : '') }}
          @endif
        </h1>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid" ng-controller="docsCtlr as vm">
  <input type="hidden" name="category" value="{{ $category }}">
  <input type="hidden" name="folder_name" value="{{ $folder_name }}">
  <div class="back-navigation clearfix">
    <div class="col-xs-6">
      <a href="javascript:history.go(-1)" class="btn-back">Back</a>
    </div>
  </div>
  <div ng-if="vm.uploading" class="progress progress-primary" style="width:100%">
    <div class="progress-bar" role="progressbar" aria-valuenow="@{{ vm.uploadProgress }}" aria-valuemin="0" aria-valuemax="100" ng-style="{width: vm.uploadProgress+'%'}"></div>
  </div>
  <div class="panel">
    <div class="pull-right">
      <button ngf-select="vm.upload($file)" ngf-max-total-size="'10MB'" class="btn btn-small green half-width request">Upload file</button>
    </div>
    <!-- Header -->
    <div class="page-header mt-f--s">
      <!-- Seaction Title -->
      <div class="header mb-l--s">
        <span class="icon icon-folder_files_storage_open"></span>
        <h4 class="header-title">
          {{ unsanitize_title($category) }} / <small>{{ $folder_name }}</small>
        </h4>
      </div>
      <div
        ngf-drop ng-model="vm.files"
        ngf-max-total-size="'10MB'"
        gf-drag-over-class="'dragover'" ngf-multiple="false" ngf-allow-dir="false"
        class="docs-manager drop-box">
        <div class="panel-body">
          <div class="docs-content">
            <div class="row">
              @if(isset($docs["files"]))
                @foreach($docs["files"] as $file)
                  <div class="col-sm-4 col-md-2">
                    <div class="docs-item">
                      <img src="{{ asset('assets/images/folder-icon.svg') }}" class="docs-item-image" alt="">
                      <h5 class="docs-item-title">
                        {{ $file->name }}
                      </h5>
                      <a href="/uploads/community-docs/iconsouthbeach/{{$category}}/{{ $folder_name }}/{{ $file->name }}" class="docs-item-view">View file</a>
                      <div class="">
                        <small>
                          <button ng-click="vm.deletePathModal('{{ $category }}/{{ $folder_name }}/{{ $file->name }}', false)" class="btn btn-small half-width ">Delete</button>
                        </small>
                      </div>
                    </div>
                  </div>
                @endforeach
              @else
              <div class="text-center">
                <p>
                  No files in this directory!
                </p>
              </div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@include('client.pages.community-docs.partials.delete-path')
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'vAccordion',
      'ngAnimate',
      'docs',
      'modal',
      'user',
      'socket',
      'liveChat'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/angular-moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/dateTimeInput.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.templates.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload-shim.min.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload.min.js"></script>
  <script type="text/javascript" src="/assets/js/v-accordion.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/docs.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/socket.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/liveChat.js') }}"></script>
@endsection