@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">{{ __('Edit') }}</h4>
    </div>
    <form action="{{ proute('forums.update',['forum'=> $model->id]) }}" method="POST" class="instructor__profile-form">
        @csrf
        @method('PUT')
        <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', $model->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', $model->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> -->

                    <div id="image-preview" class="image-preview"
                        @if ($model->image ?? false) style="background-image: url({{ asset($model->image) }}); background-size: cover; background-position: center center;" @endif>
                        <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', $model->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',$model->status) == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                        <option value="0" {{ old('status',$model->status) == '0' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                    </select>
                </div>
            </div>



        </div>

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

@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>
@endpush
@push('styles')
<style>
    .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