@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;
        }

        #thumbnail_image {
            display: none;
        }

        .thumbnail_image {
            width: 250px;
            height: 250px;
            background: #ddd;
            display: flex;
            align-items: center;
            justify-page: center;
            color: #aaa;
            border: 2px dashed currentcolor;
            cursor: pointer;
            font-family: sans-serif;
            transition: color 300ms ease-in-out background: 300ms ease-in-out;
            outline: none;
            overflow: hidden;
        }

        .thumbnail_image:hover {
            color: #777;
            background: #ccc;
        }

        .thumbnail_image:active {
            border-color: turquoise;
            color: turquoise;
            background: #eee;
        }

        .thumbnail_image:focus {
            color: #777;
            background: #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .thumbnail_image {
            max-width: 100%;
        }
    </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"></span></label>
        <input type="text" class="form-control @error('name') error-field @enderror" name="name" id="name"
            value="{{ old('name', isset($page) ? $page->name : null) }}" required>
        <input type="hidden" class="form-control @error('slug') error-field @enderror" name="slug" id="slug"
            value="{{ old('slug', isset($page) ? $page->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="menu_id">Menu<span class="text-danger">*</span></label>
        <select class="form-control @error('menu_id') error-field @enderror select" name="menu_id">
            <option value="" disabled selected>Select Menu</option>
            @foreach ($menus as $menu)
                <option value="{{ $menu->id }}"
                    {{ old('menu_id') == $menu->id || (isset($page) && $page->menu_id == $menu->id) ? 'selected' : '' }}>
                    {{ $menu->name }}
                </option>
            @endforeach
        </select>
        @error('menu_id')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-12 col-lg-12 form-group">
        <label for="thumbnail_image" class="thumbnail_image"><span class="text-danger">*</span></label>
        <input type="file" class="form-control @error('thumbnail_image') error-field @enderror"
            name="thumbnail_image" id="thumbnail_image"
            value="{{ old('thumbnail_image', isset($page) ? $page->thumbnail_image : null) }}">
        @error('thumbnail_image')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </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($page) ? $page->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($page) ? $page->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($page) ? $page->description : null) }}</textarea>
        @error('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="file">Upload File <span class="text-danger">*</span></label>
        @if (isset($page) && $page->file)
            <p>Previous File: {{ $page->file }}</p>
        @endif
        <input type="file" class="form-control @error('file') error-field @enderror" name="file" id="file">
        @error('file')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>


    <div class="col-sm-12 col-md-6 col-lg-12 form-group">
        <label for="image">Upload Image(s) (Note: Documents should be .jpg/.jpeg/.png/.pdf format and file size of
            max 2MB.) <span class="text-danger">*</span></label>
        <input type="file" id="image" name="images[]" multiple
            class="mt-2 py-2 px-4 bg-gray-200 rounded-md focus:outline-none focus:bg-white focus:ring-2 focus:ring-blue-500"
            onclick="saveValuesToJson()" />
        <div id="preview" class="mt-4 flex flex-wrap"></div>
    </div>
    <script>
        function saveValuesToJson() {
            const filesInput = document.getElementById('image');
            const files = filesInput.files;

            const fileData = [];

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                fileData.push({
                    name: file.name,
                    type: file.type,
                    size: file.size
                });
            }

            const jsonData = JSON.stringify(fileData);
            console.log(jsonData);
        }
    </script>

    <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($page) ? ($page->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($page) ? ($page->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($page) ? $page->display_order : null) }}"
            required>
        @error('display_order')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    const inputFile = document.querySelector("#thumbnail_image");
    const pictureImage = document.querySelector(".thumbnail_image");
    const pictureImageTxt = "Click here for Thumbnail Image";
    pictureImage.innerHTML = pictureImageTxt;

    inputFile.addEventListener("change", function(e) {
        const inputTarget = e.target;
        const file = inputTarget.files[0];

        if (file) {
            const reader = new FileReader();

            reader.addEventListener("load", function(e) {
                const readerTarget = e.target;

                const img = document.createElement("img");
                img.src = readerTarget.result;
                img.classList.add("thumbnail_image");

                pictureImage.innerHTML = "";
                pictureImage.appendChild(img);
            });

            reader.readAsDataURL(file);
        } else {
            pictureImage.innerHTML = pictureImageTxt;
        }
    });

    $(document).ready(function() {
        $("#image").on("change", function(e) {
            var files = e.target.files;
            $("#preview").empty(); // Clear previous previews
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();
                reader.onload = function(e) {
                    var imgSrc = e.target.result;
                    var imgElem = $("<img>").addClass("imageThumb").attr("src", imgSrc);
                    var removeBtn = $("<span>").addClass("remove").text("Remove image");
                    var previewElem = $("<div>").addClass("pip").append(imgElem, "<br/>",
                        removeBtn);
                    $("#preview").append(previewElem);
                };
                reader.readAsDataURL(file);
            }
        });

        $(document).on("click", ".remove", function() {
            $(this).closest(".pip").remove();
            updateImageCount();
        });

        function updateImageCount() {
            var remainingImage = $("#preview .imageThumb").length;
            console.log("Remaining image: " + remainingImage);
        }
    });
</script>