@extends('layouts.admin.index')

@section('content')
<div id="main-wrapper">
  <!-- Sidebar -->
  @include('layouts.admin.sidebar')
  <div class="page-wrapper">
    <!--  Header -->
    @include('layouts.admin.header')

    <div class="body-wrapper">
      <div class="container-fluid">
        {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('SiteManagement') }}
        <div class="card w-100">
          <div class="card-body">
            <form role="form" action="{{ route('site-management.store') }}" method="post" enctype="multipart/form-data">
              <div class="mb-3 fv-row d-flex flex-column">
                <label class="form-label" for="logo">Logo</label>
                @if($model->logo)
                  <img src="{{ asset('storage/site/logo/'.$model->logo) }}" style="max-width: 200px" class="mb-2"/>
                @endif
                @if(!$disabled)
                  <input type="file" class="form-control" name="logo" id="logo" />
                @endif
                @error('logo')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="url">URL Situs</label>
                <input class="form-control" id="url" name="url" value="{{ old('url', $model->url) }}" placeholder="URL Situs" @readonly($disabled)/>
                @error('url')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="url">Nama Situs</label>
                <input class="form-control" id="name" name="name" value="{{ old('name', $model->name) }}" placeholder="Nama Situs" @readonly($disabled)/>
                @error('name')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="slogan">Slogan</label>
                <input class="form-control" id="slogan" name="slogan" value="{{ old('slogan', $model->slogan) }}" placeholder="Slogan" @readonly($disabled)/>
                @error('slogan')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label for="description" class="form-label">Deskripsi</label>
                <textarea type="text" name="description" class="form-control" id="description">{{ old('description', $model->description) }}</textarea>
                @error('description')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label for="address" class="form-label">Alamat</label>
                <textarea type="text" name="address" class="form-control" id="address">{{ old('address', $model->address) }}</textarea>
                @error('address')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="phone">No. Telepon</label>
                <input class="form-control" id="phone" name="phone" value="{{ old('phone', $model->phone) }}" placeholder="No. Telepon" @readonly($disabled)/>
                @error('phone')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="fax">Fax</label>
                <input class="form-control" id="fax" name="fax" value="{{ old('fax', $model->fax) }}" placeholder="Fax" @readonly($disabled)/>
                @error('fax')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="email">Email</label>
                <input class="form-control" type="email" id="email" name="email" value="{{ old('email', $model->email) }}" placeholder="Email" @readonly($disabled)/>
                @error('email')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="facebook">Facebook</label>
                <input class="form-control" id="facebook" name="facebook" value="{{ old('facebook', $model->facebook) }}" placeholder="Facebook" @readonly($disabled)/>
                @error('facebook')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="youtube">Youtube</label>
                <input class="form-control" id="youtube" name="youtube" value="{{ old('youtube', $model->youtube) }}" placeholder="Youtube" @readonly($disabled)/>
                @error('youtube')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="instagram">Instagram</label>
                <input class="form-control" id="instagram" name="instagram" value="{{ old('instagram', $model->instagram) }}" placeholder="Instagram" @readonly($disabled)/>
                @error('instagram')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row d-flex flex-column">
                <label class="form-label" for="logo">Background Halaman Login/Registrasi</label>
                @if($model->bg_auth)
                  <img src="{{ asset('storage/site/bg/'.$model->bg_auth) }}" style="max-width: 200px" class="mb-2"/>
                @endif
                @if(!$disabled)
                  <input type="file" class="form-control" name="bg_auth" id="bg_auth" />
                @endif
                @error('bg_auth')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label for="about_us" class="form-label">Tentang Kami (Landing Page)</label>
                <textarea name="about_us" class="form-control" id="about_us">{{ old('about_us', $model->about_us) }}</textarea>
                @error('about_us')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label for="about_us" class="form-label">Halaman Tentang Kami</label>
                <textarea name="about_us_page" class="form-control" id="about_us_page">{{ old('about_us_page', $model->about_us_page) }}</textarea>
                @error('about_us_page')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label for="footer_desc" class="form-label">Deskripsi Footer</label>
                <textarea name="footer_desc" class="form-control" id="footer_desc">{{ old('footer_desc', $model->footer_desc) }}</textarea>
                @error('footer_desc')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label for="inputName" class="form-label">Banner</label>
                <div class="d-flex flex-column gap-2 mb-3" id="list-banner">
                  @foreach($banners as $a)
                    <div class="d-flex gap-2 py-2 border-bottom justify-content-between align-items-center">
                      <a href="{{ asset('storage/site/banners/'. $a->filename) }}" target="_blank">
                      <figure class="figure">
                        <img src="{{ asset('storage/site/banners/'. $a->filename) }}" class="figure-img img-fluid rounded" style="max-width: 200px;" alt="{{ $a->subtitle ?: $a->filename_original }}">
                        <figcaption class="figure-caption fs-3">{{ $a->filename_original }}</figcaption>
                      </figure>
                      </a>
                      @if(!$disabled)
                        <button type="button" class="btn btn-danger remove-banner-edit" data-id="{{ $a->id }}"><i class="ti ti-trash"></i></button>
                      @endif
                    </div>
                  @endforeach
                </div>
                @error('galleries')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
                @if(!$disabled)
                  <button type="button" class="btn btn-outline-primary add-banner"><i class="ti ti-plus"></i> Tambah Banner</button>
                @endif
              </div>
              <input type="hidden" name="id" value="{{ $model->id }}" />
              {{ csrf_field() }}
              <div class="d-flex w-100 justify-content-end">
                @if(!$disabled)
                  <button class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Simpan</button>
                @endif
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection


@push('scripts')
<script type="module">
  $(document).ready(function() {
    const tmplFile = `<div class="d-flex gap-2 align-items-center">
                  <input type="file" class="form-control" name="banners[]" />
                  <button type="button" class="btn btn-danger remove-banner"><i class="ti ti-trash"></i></button>
                </div>`
    $('#about_us_page').summernote({
      placeholder: 'Konten Halaman Tentang Kami...',
      tabsize: 2,
      height: 300,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
      ]
    });
    $(function(){
      $('.add-banner').on('click', function(){
        const fileElm = $(tmplFile);
        fileElm.find('.remove-banner').on('click', function(){
          const data = $(this).data();
          if(data.id !== undefined){
            $(`<input type="hidden" name='deleted_banners[]' value="${data.id}"/>`).insertAfter($('input[name="id"]'));
          }
          $(this).parent().remove();
        });
        $('#list-banner').append(fileElm)
      })

      $('.remove-banner-edit').each(function(){
        $(this).on('click', function(){
          const data = $(this).data();
          if(data.id !== undefined){
            $(`<input type="hidden" name='deleted_banners[]' value="${data.id}"/>`).insertAfter($('input[name="id"]'));
          }
          $(this).parent().remove();
        })
      })
    });
  });
</script>
@endpush