@extends('backend.layouts.app')

@section('event') open @endsection
@section('event-add') active @endsection

@section('content')
<!-- Page Content -->
<div class="content">
    <div class="row">
        <!-- Row #2 -->
        <div class="col-md-12">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        Add New Event
                    </h3>
                    <a href="{{ route('event.index') }}" class="btn btn-success"><i class="fa-solid fa-list"></i> &nbsp; List</a>
                </div>
                <div class="block-content block-content-full">

                    <form action="{{ route('event.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="title">Title:</label>
                                <input type="text" class="form-control" id="title" name="title"
                                    placeholder="Title" value="{{ old('title') }}">
                                @error('title')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="category_id">Select Category</label>
                                <select class="js-select2 form-select" id="example-select2-multiple" name="category_id[]" style="width: 100%;" data-placeholder="Choose many.." multiple>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="location">Location:</label>
                                <input type="text" class="form-control" id="location" name="location"
                                    placeholder="location" value="{{ old('location') }}">
                                @error('location')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="date">Date:</label>
                                <input type="date" class="form-control" id="date" name="date"
                                    placeholder="Event date" value="{{ old('date') }}">
                                @error('date')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="s_time">Start Time:</label>
                                <input type="time" class="form-control" id="s_time" name="s_time"
                                    placeholder="event start time" value="{{ old('s_time') }}">
                                @error('s_time')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="e_time">End Time:</label>
                                <input type="time" class="form-control" id="e_time" name="e_time"
                                    placeholder="event end time" value="{{ old('e_time') }}">
                                @error('e_time')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                           
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="description">Description:</label>
                                <textarea name="description" id="description" rows="3" class="form-control editor" placeholder="Description">{{ old('description') }}</textarea>
                                @error('description')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>                                
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="map">Google Map:</label>
                                <textarea name="map" id="map" rows="3" class="form-control" placeholder="Google map">{{ old('map') }}</textarea>
                                @error('map')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>                                
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="image">Image:</label>
                                <input type="file" class="form-control" id="image" name="image"
                                    placeholder="Choose Photo" onchange="loadFile(event)">
                                @error('image')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <img id="output" src="{{ asset('common/no-image.jpg') }}"
                                            alt="Image" style="width: auto; height: 100px;" class="mt-3">
                            </div> 
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="breadcrumb">Breadcrump:</label>
                                <input type="file" class="form-control" id="breadcrumb" name="breadcrumb"
                                    placeholder="Choose Breadcrumb" onchange="loadBreadcrumb(event)">
                                @error('breadcrumb')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <img id="preview-breadcrumb" src="{{ asset('common/no-image.jpg') }}"
                                            alt="breadcrumb" style="width: 250px; height: 100px;" class="mt-3">
                            </div>                          
                        </div>
                        <div class="block-content block-content-full block-content-sm text-center border-top">
                            <button type="button" class="btn btn-alt-secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="btn btn-alt-primary">
                                Submit
                            </button>
                        </div>
                    </form>                    
                </div>
            </div>           
        </div>
        <!-- END Row #2 -->
    </div>
</div>
<!-- END Page Content -->
@endsection

@section('script')
    <script src="/backend/assets/js/plugins/select2/js/select2.full.min.js"></script>
    <script>
        Codebase.helpersOnLoad(['js-flatpickr', 'jq-datepicker', 'jq-colorpicker', 'jq-maxlength', 'jq-select2', 'jq-rangeslider', 'jq-masked-inputs', 'jq-pw-strength']);
    </script>

    <script>
    var loadBreadcrumb = function(event) {
        var reader = new FileReader();
        reader.onload = function(){
        var output = document.getElementById('preview-breadcrumb');
        output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    };
</script>
@endsection