@extends('layouts.admin')

@section('title', 'Create Category')

@section('content')
<div class="container">
    <h1>Create Category</h1>

    <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" class="form-control" id="title" name="title" required>
        </div>

        <div class="mb-3">
            <label for="summary" class="form-label">Summary</label>
            <textarea class="form-control" id="summary" name="summary"></textarea>
        </div>

        <div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea class="form-control" id="content" name="content"></textarea>
        </div>

        <div class="mb-3">
            <label for="sector_id" class="form-label">Sector</label>
            <select class="form-control" id="sector_id" name="sector_id" required>
                @foreach ($sectors as $id => $title)
                    <option value="{{ $id }}">{{ $title }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label for="menu_position" class="form-label">Menu Position</label>
            <input type="number" class="form-control" id="menu_position" name="menu_position">
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            <input type="file" class="form-control" id="image" name="image">
        </div>

        <div class="mb-3">
            <label for="image_half_width" class="form-label">Image Half Width</label>
            <input type="file" class="form-control" id="image_half_width" name="image_half_width">
        </div>

        <div class="mb-3">
            <label for="image_full_width" class="form-label">Image Full Width</label>
            <input type="file" class="form-control" id="image_full_width" name="image_full_width">
        </div>

        <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="menu_hide_subcategories" name="menu_hide_subcategories">
            <label class="form-check-label" for="menu_hide_subcategories">Menu Hide Subcategories</label>
        </div>

        <button type="submit" class="btn btn-primary">Create</button>
    </form>
</div>

<!--script src="https://cdn.tiny.cloud/1/o35nrvszar8z284zvothcsrb3ffnhkvvq3e3za5ilc6en51r/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script-->
 <script>
$(document).ready(function() {
  $('#content').summernote();  
});
</script>
<script>
    /*tinymce.init({
        selector: '#content',
        plugins: 'advlist autolink lists link image charmap preview anchor',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    });*/
    
    $('#sector_id').select2({
        theme: 'bootstrap4',
        placeholder: 'Select section',
        allowClear: true
    });
    
</script>
@endsection