@extends('backend.layouts.app')
<style>
    #description {
        height: 500px;
    }
</style>
@section('content')
<h1 class="page-header">
    @lang('messages.blog.update_blog') 
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">@lang('messages.blog.update_blog')</h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableContactList"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <div class="col-lg-12">
            @if(session('success'))
                <div class="alert alert-success" role="alert">
                    <strong>Good Job!</strong> {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-error" role="alert">
                    <strong>Alert!</strong> {{ session('error') }}
                </div>
            @endif
        </div>
        <form id="blog_edit" method="POST" action="{{ route('blog.update', $id_encrypted) }}" class="row g-5" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="col-lg-6">
                <img src="{{ asset('storage/blog/'.$blog->featured_image) }}" alt="logo" class="d-block w-px-200 h-px-200 rounded" id="featured_image_show">
                <div class="button-wrapper">
                    <label for="featured_image" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                        <span class="d-none d-sm-block">@lang('messages.talent.upload_image')</span>
                        <i class="ri-upload-2-line d-block d-sm-none"></i>
                        <input type="file" id="featured_image" name="featured_image" class="account-file-input" hidden accept="image/png, image/jpeg">
                    </label>
                    <span class="form-floating-focused"></span>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label for="title">@lang('messages.blog.title') * :</label>
                    <input type="text" class="form-control" value="{{ $blog->title }}" placeholder="@lang('messages.blog.title')" id="title" name="title" aria-label="title" aria-describedby="title">
                </div>
                <div class="form-group">
                    <label for="slug">@lang('messages.blog.slug') * :</label>
                    <input type="text" class="form-control" value="{{ $blog->slug }}" placeholder="@lang('messages.blog.slug')" id="slug" name="slug" aria-label="slug" aria-describedby="slug">
                </div>
                <div class="form-group">
                    <label for="status">@lang('messages.blog.status') * :</label>
                    <select id="status" name="status" class="form-control">
                        <option value="draft" @if($blog->status == 'draft') selected @endif>@lang('messages.blog.draft')</option>
                        <option value="published" @if($blog->status == 'published') selected @endif>@lang('messages.blog.published')</option>
                        <option value="archived" @if($blog->status == 'archived') selected @endif>@lang('messages.blog.archived')</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-12">
                <span>@lang('messages.blog.description')</span>
                <textarea name="description" id="description" class="ckeditor">{{ $blog->description }}</textarea>
            </div>
            <div class="col-lg-12 mt-3">
                <button type="submit" class="btn btn-primary me-3 waves-effect waves-light">@lang('messages.blog.save')</button>
                <button type="reset" class="btn btn-outline-secondary waves-effect">@lang('messages.blog.reset')</button>
            </div>
        <form>
    </div>
</div>
@endsection

@section('footer_scripts')
<script>   
    // Blog featured image
    document.getElementById('featured_image').addEventListener('change', function(event) {
        handleImageUpload(event, 'featured_image_show');
    });

    // Function to handle image upload for each image input
    function handleImageUpload(event, imageId) {
        var uploadedImage = document.getElementById(imageId);
        var file = event.target.files[0];
        var reader = new FileReader();

        // Ensure file is selected
        if (file) {
            // Read the file as a data URL
            reader.readAsDataURL(file);
        }

        // Set the image source when file reading is completed
        reader.onloadend = function() {
            uploadedImage.src = reader.result;
        };
    }

    setTimeout(() => {
        $(".alert").hide();
    }, 3000);

    $(document).ready(function() {
        $("#slug").on("blur", function() {
            var string = $(this).val();
            if(!string)
                string = $("#title").val();
            $(this).val(string.replace(/\s+/g, '-').toLowerCase());
        })

        $("#title").on("blur", function() {
            $("#slug").trigger("blur");
        })
    });
</script>
@endsection