@section('styles')
    <style>
        input[type="file"] {
            display: block;
        }

        .imageThumb {
            height: 275px;
            width: 100%;
            border: 2px solid;
            padding: 1px;
            cursor: pointer;
        }

        .pip {
            display: inline-block;
            margin: 10px 10px 0 0;
        }

        .remove {
            display: block;
            background: #444;
            border: 1px solid black;
            color: white;
            text-align: center;
            cursor: pointer;
        }

        .remove:hover {
            background: white;
            color: black;
        }

        .avatar-upload {
            position: relative;
            max-width: 288px;
        }

        .avatar-upload .avatar-edit {
            position: absolute;
            right: 12px;
            z-index: 1;
            top: 10px;
        }

        .avatar-upload .avatar-edit input {
            display: none;
        }

        .avatar-upload .avatar-edit label {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-bottom: 0;

            background: #FFFFFF;
            border: 1px solid transparent;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            font-weight: normal;
            transition: all .2s ease-in-out;
        }

        .avatar-upload .avatar-edit label:hover {
            background: #f1f1f1;
            border-color: #d6d6d6;
        }

        .avatar-upload .avatar-edit label:after {
            content: "\f040";
            font-family: 'FontAwesome';
            color: #757575;
            position: absolute;
            top: 10px;
            left: 0;
            right: 0;
            text-align: center;
            margin: auto;
        }

        .avatar-upload .avatar-preview {
            width: 300px;
            height: 300px;
            position: relative;

            border: 6px solid #F8F8F8;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        }

        .avatar-upload .avatar-preview>div {
            width: 100%;
            height: 100%;

            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
@endsection

<div class="m-2 row">
    @if ($errors)
        <ol>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ol>
    @endif
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <strong>Hey !</strong> Slug will be generated automatically 😊
        <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="name">Name <span class="text-danger">*</span> <span class="badge rounded-pill text-bg-info"
                id="slugPreview">{{ old('slug', isset($content) ? $content->slug : null) }}</span></label>
        <input type="text" class="form-control @error('name') error-field @enderror" name="name" id="name"
            value="{{ old('name', isset($content) ? $content->name : null) }}" required>
        <input type="hidden" class="form-control @error('slug') error-field @enderror" name="slug" id="slug"
            value="{{ old('slug', isset($content) ? $content->slug : null) }}" required>
        @error('name')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="publication_category_id">Publication Category <span class="text-danger">*</span></label>
        <select class="form-control @error('publication_category_id') error-field @enderror select"
            name="publication_category_id">
            <option value="" disabled selected>Select Publication Category</option>
            @foreach ($publicationCategories as $category)
                <option value="{{ $category->id }}"
                    {{ old('publication_category_id') == $category->id || (isset($content) && $content->publication_category_id == $category->id) ? 'selected' : '' }}>
                    {{ $category->name }}
                </option>
            @endforeach
        </select>
        @error('publication_category_id')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>


    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="publishment_date">Publishment Date <span class="text-danger">*</span></label>
        <input type="date" class="form-control @error('publishment_date') error-field @enderror"
            name="publishment_date" id="publishment_date"
            value="{{ old('publishment_date', isset($content) ? $content->publishment_date : null) }}" required>
        @error('publishment_date')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="thumbnail_image">Thumbnail Image <span class="text-danger">*</span></label>
        <div class="avatar-upload">
            <div class="avatar-edit">
                <input type='file' id="contentImageUpload" accept=".png, .jpg, .jpeg" class="d-none"
                    name="thumbnail_image"
                    value="{{ old('thumbnail_image', isset($content) ? $content->thumbnail_image : null) }}" />
                <label for="contentImageUpload" class="btn btn-primary"></label>
            </div>
            <div class="avatar-preview">
                <div class="mx-auto image-preview"
                    style="background-image: url('{{ isset($content) && $content->thumbnail_image ? asset('storage/' . $content->thumbnail_image) : asset('assets/img/thumbnail.png') }}');">
                </div>
            </div>
        </div>
        @error('thumbnail_image')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
        @if (isset($content) && $content->thumbnail_image)
            <div class="mt-2">{{ basename($content->thumbnail_image) }}</div>
        @endif
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="file">Upload File <span class="text-danger">*</span></label>
        <div class="avatar-upload">
            <div class="avatar-edit">
                <input type='file' id="contentFileUpload" accept=".png, .jpg, .jpeg" class="d-none" name="file"
                    value="{{ old('file', isset($content) ? $content->file : null) }}" />
                <label for="contentFileUpload" class="btn btn-primary"></label>
            </div>
            <div class="avatar-preview">
                <div class="mx-auto image-preview"
                    style="background-image: url('{{ isset($content) && $content->file ? asset('storage/' . $content->file) : asset('assets/img/cover.png') }}');">
                </div>
            </div>
        </div>
        @error('file')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
        @if (isset($content) && $content->file)
            <div class="mt-2">{{ basename($content->file) }}</div>
        @endif
    </div>


    <div class="col-sm-12 col-md-6 col-lg-6 form-group">
        <label for="short_description">Short Description <span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('short_description') error-field @enderror"
            name="short_description" id="short_description"
            value="{{ old('short_description', isset($content) ? $content->short_description : null) }}" required>
        @error('short_description')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>
    <div class="col-sm-12 col-md-6 col-lg-6 form-group">
        <label for="highlighted_text">Highlighted Text <span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('highlighted_text') error-field @enderror"
            name="highlighted_text" id="highlighted_text"
            value="{{ old('highlighted_text', isset($content) ? $content->highlighted_text : null) }}" required>
        @error('highlighted_text')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-12 form-group">
        <label for="description">Description <span class="text-danger">*</span></label>
        <textarea class="editor form-control  @error('description') error-field @enderror" name="description" id="description"
            rows="4">{{ old('description', isset($content) ? $content->description : null) }}</textarea>
        @error('description')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    {{-- MULTIPLE IMAGES --}}
    <div class="col-lg-12 form-group">
        <label>Upload Images</label>

        <input type="file" id="image" name="images[]" multiple class="form-control">

        <div id="preview" class="mt-3">

            @if (isset($content) && $content->images)
                @foreach (json_decode($content->images) as $image)
                    <div class="pip">
                        <img class="imageThumb" src="{{ asset('storage/' . $image) }}">

                        {{-- FIXED --}}
                        <span class="remove" onclick="removeOldImage(this, '{{ $image }}')">
                            Remove image
                        </span>

                        <input type="hidden" name="old_images[]" value="{{ $image }}">
                    </div>
                @endforeach
            @endif

        </div>
    </div>

    {{-- IMPORTANT (NO UI CHANGE) --}}
    <div id="deletedImagesContainer"></div>


    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="is_active">Is Active? <span class="text-danger">*</span></label>
        <br>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_active" id="yes" value=1
                {{ isset($content) ? ($content->is_active == 1 ? 'checked' : null) : 'checked' }}>
            <label class="form-check-label" for="yes">Yes</label>
        </div>

        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_active" id="no" value=0
                {{ isset($content) ? ($content->is_active == 0 ? 'checked' : null) : null }}>
            <label class="form-check-label" for="no">NO</label>
        </div>

        @error('is_active')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="display_order">Display Order <span class="text-danger">*</span></label>
        <input type="number" class="form-control @error('display_order') error-field @enderror" name="display_order"
            id="display_order" value="{{ old('display_order', isset($content) ? $content->display_order : null) }}"
            required>
        @error('display_order')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>
</div>


<script>
    $(document).ready(function() {

        /*
        |--------------------------------------------------------------------------
        | MULTIPLE IMAGE PREVIEW (FIXED + CLEAN)
        |--------------------------------------------------------------------------
        */
        $("#image").on("change", function(e) {
            const files = e.target.files;

            for (let i = 0; i < files.length; i++) {
                const reader = new FileReader();

                reader.onload = function(e) {

                    const preview = $(`
                    <div class="pip">
                        <img class="imageThumb" src="${e.target.result}">
                        <br/>
                        <span class="remove">Remove image</span>
                    </div>
                `);

                    preview.find(".remove").on("click", function() {
                        preview.remove();
                    });

                    $("#preview").append(preview);
                };

                reader.readAsDataURL(files[i]);
            }
        });

        /*
        |--------------------------------------------------------------------------
        | SINGLE IMAGE PREVIEW (THUMBNAIL + FILE)
        |--------------------------------------------------------------------------
        */
        $(".avatar-edit input[type=file]").on("change", function() {
            const input = this;

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    $(input)
                        .closest(".avatar-upload")
                        .find(".image-preview")
                        .css("background-image", `url(${e.target.result})`);
                };

                reader.readAsDataURL(input.files[0]);
            }
        });

    });


    /*
    |--------------------------------------------------------------------------
    | REMOVE OLD IMAGE (BACKEND SYNC FIX)
    |--------------------------------------------------------------------------
    */
    function removeOldImage(element, imagePath) {

        // append hidden input for backend delete
        const input = document.createElement("input");
        input.type = "hidden";
        input.name = "deleted_images[]";
        input.value = imagePath;

        document.getElementById("deletedImagesContainer").appendChild(input);

        // remove UI
        $(element).closest(".pip").remove();
    }
</script>