@extends('layouts.landing.index')
@section('content')

<!-- Content -->
<div class="container-xl mt-4">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Pengaturan Manajemen Situs</h5>
      <form method="post" action="{{ route('site-management-setup.store') }}" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="mb-3">
          <label for="inputUrl" class="form-label">Logo</label>
          <input type="file" name="logo" class="form-control @error('logo') is-invalid @enderror" id="inputUrl">
          @error('logo')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputUrl" class="form-label">URL</label>
          <input type="text" name="url" value="{{ app('url')->to('') }}" class="form-control @error('url') is-invalid @enderror" id="inputUrl" readonly>
          @error('url')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Nama Situs</label>
          <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="inputName">
          @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputSlogan" class="form-label">Slogan</label>
          <input type="text" name="slogan" class="form-control @error('slogan') is-invalid @enderror" id="inputSlogan">
          @error('slogan')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Deskripsi</label>
          <textarea type="text" name="description" class="form-control @error('description') is-invalid @enderror" id="inputName"></textarea>
          @error('description')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Alamat</label>
          <textarea type="text" name="address" class="form-control @error('address') is-invalid @enderror" id="inputName"></textarea>
          @error('address')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">No. Telepon</label>
          <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror" id="inputName">
          @error('phone')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Fax</label>
          <input type="text" name="fax" class="form-control @error('fax') is-invalid @enderror" id="inputName">
          @error('fax')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Email</label>
          <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" id="inputName">
          @error('email')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Facebook</label>
          <input type="text" name="facebook" class="form-control @error('facebook') is-invalid @enderror" id="inputName">
          @error('facebook')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Youtube</label>
          <input type="text" name="youtube" class="form-control @error('youtube') is-invalid @enderror" id="inputName">
          @error('youtube')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Instagram</label>
          <input type="text" name="instagram" class="form-control @error('instagram') is-invalid @enderror" id="inputName">
          @error('instagram')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="bg_auth" class="form-label">Background Halaman Login/Registrasi</label>
          <input type="file" name="bg_auth" class="form-control @error('bg_auth') is-invalid @enderror" id="bg_auth">
          @error('bg_auth')
          <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Tentang Kami (Landing Page)</label>
          <textarea type="text" name="about_us" class="form-control @error('about_us') is-invalid @enderror" id="inputName"></textarea>
          @error('about_us')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="footer_desc" class="form-label">Deskripsi Footer</label>
          <textarea type="text" name="footer_desc" class="form-control @error('footer_desc') is-invalid @enderror" id="footer_desc"></textarea>
          @error('footer_desc')
          <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="inputName" class="form-label">Banners</label>
          <div class="d-flex flex-column gap-2 mb-3" id="list-banner">
          </div>
          @error('banners')
          <div class="invalid-feedback d-block">
            {{ $message }}
          </div>
          @enderror
          <button type="button" class="btn btn-outline-primary add-banner"><i class="fa fa-plus"></i> Add Banner</button>
        </div>
        <hr />
        <h5 class="card-title">Pengaturan Administrator</h5>
        <div class="mb-3">
          <label for="fullname" class="form-label">Nama Lengkap</label>
          <input type="text" name="fullname" class="form-control @error('fullname') is-invalid @enderror" id="fullname">
          @error('fullname')
          <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="username" class="form-label">Username</label>
          <input type="text" name="username" class="form-control @error('username') is-invalid @enderror" id="username">
          @error('username')
          <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="user_email" class="form-label">Email</label>
          <input type="text" name="user_email" class="form-control @error('user_email') is-invalid @enderror" id="user_email">
          @error('user_email')
          <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">Password</label>
          <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="password">
          @error('password')
          <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

@endsection
@push('scripts')
<script type="module">
  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="fa fa-times"></i></button>
                </div>`
  $(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)
    })
  });
</script>
@endpush