@extends('admin.layouts.app')
@section('title', 'Add ORIC Event')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Add ORIC Event</p>
            @can('oric-event-list')
                <a href="{{ route('oric-event.index') }}" class="btn btn-sm btn-warning">View All</a>
            @endcan
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <form action="{{ route('oric-event.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        {{-- Basic Information --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Event Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" value="{{ old('title') }}" class="form-control rounded-0 
                            @error('title') is-invalid @enderror" placeholder="Enter event title">
                            @error('title')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Event Type <span class="text-danger">*</span></label>
                            <select name="e_type_id" class="form-select rounded-0 @error('e_type_id') is-invalid @enderror">
                                <option value="">Select Type</option>
                                @foreach($eventTypes as $type)
                                    <option value="{{ $type->id }}" {{ old('e_type_id') == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                                @endforeach
                            </select>
                            @error('e_type_id')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Event Level <span class="text-danger">*</span></label>
                            <select name="e_level_id" class="form-select rounded-0 
                            @error('e_level_id') is-invalid @enderror">
                                <option value="">Select Level</option>
                                @foreach($eventLevels as $level)
                                    <option value="{{ $level->id }}" {{ old('e_level_id') == $level->id ? 'selected' : '' }}>{{ $level->name }}</option>
                                @endforeach
                            </select>
                            @error('e_level_id')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        {{-- Banner --}}
                        <div class="col-md-6 mb-3" id="banner_input">
                            <label class="form-label">Banner</label>
                            <input type="file" name="banner" accept="image/*" class="form-control image-cropper
                            @error('banner') is-invalid @enderror" data-width="1920" data-height="600" data-aspect="3.2" data-input="cropper_banner">
                            <input type="file" name="cropper_banner" class="d-none">
                            @error('banner')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        {{-- Thumbnail --}}
                        <div class="col-md-6 mb-3" id="thumbnail_input">
                            <label class="form-label">Thumbnail</label>
                            <input type="file" name="thumbnail" accept="image/*" class="form-control image-cropper 
                            @error('thumbnail') is-invalid @enderror" data-width="500" data-height="500" data-aspect="1" data-input="cropper_thumbnail">
                            <input type="file" name="cropper_thumbnail" class="d-none">
                            @error('thumbnail')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        {{-- Event Details --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Resource Person(s)</label>
                            <input type="text" name="resource_person" value="{{ old('resource_person') }}" class="form-control rounded-0 
                            @error('resource_person') is-invalid @enderror">
                            @error('resource_person')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Event Date <span class="text-danger">*</span></label>
                            <input type="date" name="e_date" value="{{ old('e_date') }}" class="form-control rounded-0 @error('e_date') is-invalid @enderror">
                            @error('e_date')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Campus</label>
                            <input type="text" name="campus" list="campusList" class="form-control rounded-0 
                            @error('campus') is-invalid @enderror" value="{{ old('campus', 'Green International University') }}" placeholder="Select or enter campus">
                            <datalist id="campusList"><option value="Green International University"></datalist>
                            @error('campus')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Short Description</label>
                            <textarea rows="3" name="short_desc" class="form-control rounded-0 @error('short_desc') is-invalid @enderror">{{ old('short_desc') }}</textarea>
                            @error('short_desc')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Detail</label>
                            <textarea rows="8" name="long_desc" id="oric-event" class="form-control rounded-0 @error('long_desc') is-invalid @enderror">{{ old('long_desc') }}</textarea>
                            @error('long_desc')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        {{-- Settings --}}
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Sort Order</label>
                            <input type="number" min="0" name="sort_order" value="{{ old('sort_order', 0) }}" class="form-control rounded-0 @error('sort_order') is-invalid @enderror">
                            @error('sort_order')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Status</label>
                            <select name="is_active" class="form-select rounded-0">
                                <option value="1" selected>Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3 d-flex align-items-end">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="show_on_homepage"
                                    name="show_on_homepage" @checked(old('show_on_homepage'))>
                                <label class="form-check-label">Show on Homepage</label>
                            </div>
                        </div>
                        <hr>
                        {{-- SEO --}}
                        <div class="row mt-4">
                            <h4 class="mb-3">SEO Meta Data</h4>
                            <div class="col-md-12 col-sm-12 mb-3">
                                <label class="form-label">Meta Title</label>
                                <input type="text" name="meta_title" value="{{ old('meta_title') }}" class="form-control rounded-0">
                            </div>
                            <div class="col-md-12 col-sm-12 mb-3">
                                <label class="form-label">Meta Description</label>
                                <textarea rows="3" name="meta_description" class="form-control rounded-0">{{ old('meta_description') }}</textarea>
                            </div>

                            <div class="col-md-6 col-sm-12 mb-3">
                                <label class="form-label">Meta keywords</label>
                                <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}" class="form-control rounded-0">
                            </div>
                            <div class="col-md-6 col-sm-12 mb-3">
                                <label class="form-label">Meta Tags</label>
                                <input type="text" name="meta_tags" value="{{ old('meta_tags') }}" class="form-control rounded-0">
                            </div>
                        </div>
                        <div class="col-md-12 text-end">
                            <button type="submit" class="btn btn-success">Create</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
<!-- Modal -->
@include('admin.components.image-cropper')
@endsection
@push('js')
    <script src="{{asset('admin/js/canvas-to-blob.min.js')}}"></script>
    <script src="{{asset('admin/js/image-cropper.js')}}"></script>
    <script src="{{asset('admin/ckeditor')}}/ckeditor.js"></script>
    <script src="{{asset('admin/ckeditor')}}/ckfinder/ckfinder.js"></script>
    <script>
        $(document).ready(function () {
            var editor = CKEDITOR.replace('oric-event', {
                filebrowserUploadUrl: "{{route('oric-ckeditor', ['_token' => csrf_token()])}}",
                filebrowserUploadMethod: 'form',
                // removed as exportpdf-token-url doesn't exists to avoid console error
                removePlugins: 'exportpdf'
            });
        });
    </script>
@endpush