<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
<script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
<h4 class="fw-bold">Добавить новость</h4>
<form action="{{ route('admin.posts.store') }}" method="post" enctype="multipart/form-data">
    @csrf
    <div class="mb-3">
        <label for="titleFormControlTextarea" class="form-label">Заголовок</label>
        <textarea class="form-control" id="titleFormControlTextarea1" name="name" rows="2"></textarea>
        @error('name')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
    <div class="row text-dark">
        <label class="form-label mb-1">Города для публикации</label>
        <div class="hstack gap-2 mb-2">
        @if($availableCities = GetAvailableCities())
            @foreach($availableCities as $key=>$city)
                <div class="form-check">
                    <input name="cities[{{ $key }}]" class="btn-check" type="checkbox" value="{{ $city->id }}" id="city_{{ $city->id }}">
                    <label class="btn bg-light" for="city_{{ $city->id }}">
                        {{ $city->name }}
                    </label>
                </div>
            @endforeach
        @endif
        </div>
    </div>
    <div class="row">
        <div class="col-6 mb-3">
            <label for="categoryFormControlSelect" class="form-label">Категория</label>
            <select class="form-select" id="categoryFormControlSelect" name="category" aria-label="">
                @foreach (Modules\Post\Models\PostCategory::cases() as $category)
                    <option value="{{ $category->value }}">{{ __($category->name) }}</option>
                @endforeach
            </select>
            @error('category')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-6 mb-3">
            <label for="formFile" class="form-label">Заставка новости</label>
            <input class="form-control" type="file" id="formFile" name="imageFile">
            @error('imageFile')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="mb-3">
        <label for="shortTextFormControlTextarea" class="form-label">Анонс</label>
        <textarea class="form-control" id="shortTextFormControlTextarea1" name="short_text" rows="3"></textarea>
        @error('short_text')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
    <div class="mb-3">
        <label for="shortTextFormControlTextarea" class="form-label">Основной текст</label>
        <textarea class="form-control d-none" id="textFormControlTextarea" name="text" rows="15"></textarea>
        <trix-editor input="textFormControlTextarea" class="overflow-auto" style="height:300px"></trix-editor>
        @error('text')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
    <button type="submit" class="btn btn-primary">Сохранить</button>
</form>

<script>
  const fileInput = document.getElementById('formFile');
  const maxSize = 1 * 1024 * 1024; // 1 МБ в байтах

  fileInput.addEventListener('change', function () {
    if (this.files.length > 0) {
      const file = this.files[0];

      if (file.size > maxSize) {
        alert('Файл больше 1 МБ! Пожалуйста, выберите другой файл.');
        this.value = '';
      }
    }
  });
</script>