@extends('frontend.' . auth()->user()->role . '-dashboard.layouts.master')

@section('dashboard-contents')

<div class="dashboard__content-wrap dashboard__content-wrap-two mt-3">
    <div class="dashboard__content-title">
        <h4 class="title">{{ __('Create') }}</h4>
    </div>
    <form action="{{ proute('forums.store') }}" method="POST" class="instructor__profile-form">
        @csrf
        <div class="row">

            <div class="col-md-12">
                <div class="form-grp">
                    <label for="category_id">{{ __('Category') }}</label>
                    <select name="category_id" class="form-control" required>
                        <option value="">{{ __('Select Category') }}</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                            {{ $category->title }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-grp">
                    <label for="title">{{ __('Title') }}</label>
                    <input id="title" type="text" name="title" value="{{ old('title') }}" required class="form-control">
                </div>
            </div>


            <div class="form-group col-md-12">
                <div class="form-grp">
                    <label>{{ __('Thumbnail Image') }}<span class="text-danger">*</span></label>
                    <div id="image-preview" class="image-preview">
                        <label for="image-upload" id="image-label">{{ __('Image') }}</label>
                        <input type="file" name="image" id="image-upload">
                    </div>
                    @error('image')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            

            <!-- Description -->
            <div class="col-md-12">
                <div class="form-grp">
                    <label for="description">{{ __('Description') }}</label>
                    <textarea name="description" class="form-control text-editor" placeholder="Enter description">{{ old('description') }}</textarea>
                </div>
            </div>



            <!-- Status -->
            <div class="col-md-12">
                <div class="form-grp">
                    <label for="status">{{ __('Status') }}</label>
                    <select name="status" class="form-control" required>
                        <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                    </select>
                </div>
            </div>

        </div>

        <!-- Submit Button -->
        <div class="mb-4 mt-4">
            <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
        </div>
    </form>

</div>



@endsection


@push('scripts')

<!-- Include jQuery UI for Autocomplete -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
        var qualifications = [
            "Bachelor's Degree",
            "Master's Degree",
            "PhD",
            "Diploma",
            "Certification",
            "High School Diploma",
            "Associate's Degree"
        ];

        // Initialize autocomplete
        $('#qualifications').autocomplete({
            source: qualifications
        });
    });
</script>

<!-- Include Select2 CSS -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> -->

<!-- Include jQuery (if not already included) -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

<!-- Include Select2 JS -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> -->
<script>
    $(document).ready(function() {
        $('#skills').select2({
            tags: true, // Allow users to add new items
            placeholder: 'Select qualifications',
            allowClear: true
        });
    });
</script>
<style>
    textarea {
        height: 100px;
    }

    .instructor__profile-form .form-grp textarea {
        min-height: 30px !important;
        max-height: 301px !important;
    }

    .image-preview input,
    #callback-preview input {
        line-height: 200px;
        font-size: 200px;
        position: absolute;
        opacity: 0;
        z-index: 10;
    }

    .image-preview,
    #callback-preview {
        width: 235px;
        height: 235px;
    }

    .image-preview,
    #callback-preview {
        width: 250px;
        height: 250px;
        border: 2px dashed #ddd;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
        background-color: #ffffff;
        color: #ecf0f1;
    }

    .image-preview {
        margin-bottom: 5px !important;
    }

    .image-preview label,
    #callback-preview label {
        left: 0;
        right: 0;
        bottom: 0;
        margin-bottom: 5px;
    }

    .image-preview label,
    #callback-preview label {
        background-color: #e8e8e866;
        color: #000;
        border: 1px solid #7e7e7e;
        font-weight: bold;
    }

    .image-preview label,
    #callback-preview label {
        position: absolute;
        z-index: 5;
        opacity: 0.8;
        cursor: pointer;
        background-color: #bdc3c7;
        width: 150px;
        height: 50px;
        font-size: 12px;
        line-height: 50px;
        text-transform: uppercase;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
    }
</style>
@endpush


@push('scripts')
<script src="{{ asset('backend/js/jquery.uploadPreview.min.js') }}"></script>
<script>
    $.uploadPreview({
        input_field: "#image-upload",
        preview_box: "#image-preview",
        label_field: "#image-label",
        label_default: "{{ __('Choose Image') }}",
        label_selected: "{{ __('Change Image') }}",
        no_label: false,
        success_callback: null
    });
</script>
<script>
    (function($) {
        "use strict";
        $(document).ready(function() {
            $("#title").on("keyup", function(e) {
                $("#slug").val(convertToSlug($(this).val()));
            })
        });
    })(jQuery);

    function convertToSlug(Text) {
        return Text
            .toLowerCase()
            .replace(/[^\w ]+/g, '')
            .replace(/ +/g, '-');
    }
</script>
@endpush