@if (($errors->any() && $errors->has('title')) || $errors->has('avatar'))
  <script>
    window.onload = function() {
      $('#createForumModal').modal('show');
    };
  </script>
@endif
@push('style')
  <link rel="stylesheet" href="{{ asset('/css/cropper.min.css') }}">
@endpush
<div class="modal fade" id="createForumModal" tabindex="-1" aria-labelledby="createForumModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-bottom-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <form action="{{ route('forum.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="modal-body pt-2">
          <div class="w-100 text-center">
            <h1 class="modal-title fs-5 fw-700">Tạo diễn đàn</h1>
            <div class="mt-3">
              <span class="fs-13 fw-500 text-primary-color d-block mt-2 px-3 text-center">Hãy cá nhân hóa diễn đàn bằng
                cách đặt
                tên
                và thêm biểu tượng đại diện. Bạn có thể đổi bất cứ lúc nào.</span>
            </div>
          </div>

          <div class="form-group text-center  my-3">
            <input type="file" name="avatar" class="form-control text-dark bg-light w-75 d-none"
              placeholder="Ảnh diễn đàn" aria-invalid="false" value="">
            <img id="image" class="preview-avatar-banner preview-avatar mt-2 rounded-circle" alt="Avatar"
              style="width: 100px; height: 100px;" src="{{ asset('/img/admin/no_picture.png') }}">
            @error('avatar')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>
          <div class="modal-group-name">
            <label for="group-name" class="fs-6 fw-semibold text-neutral-04 mb-2">Tên
              diễn đàn</label>
            <input placeholder="Nhập tên diễn đàn của bạn"
              class="ant-input css-6j9yrn bg-white text-black css-6j9yrn border-danger" type="text"
              value="{{ old('title') }}" name="title">
            @error('title')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>
        </div>
        <div class="modal-footer border-top-0 w-100 text-center">
          <button type="submit" class="btn btn-danger fs-18 fw-semibold px-4 mx-auto mb-4">Tạo</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div id="cropModal" class="modal">
  <div class="modal-content modal-crop-img">
    <div class="modal-header">
      <h2>Crop Image</h2>
      <span class="close">&times;</span>
    </div>
    <div class="modal-body">
      <div style="max-height: 700px;">
        <img id="croppedImage" src="" alt="Cropped Image">
      </div>
      <div class="my-4 text-center">
        <a class="btn btn-danger" id="cropButton">Crop</a>
      </div>
    </div>
  </div>
</div>

@push('script')
  <script>
    var ratio = 1;
    $('#image').click(function() {
      $('input[name="avatar"]').click();
    });
  </script>
  <script src="{{ asset('/js/cropper.min.js') }}"></script>
  @vite('resources/js/admin/crop-img.js')
@endpush