@extends('manager.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link rel="stylesheet" href="{{ asset('manager/css/dropzone.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/cropper/cropper.min.css') }}" rel="stylesheet"/>
    <style>
        .img-container {
            height: 350px;
            overflow: hidden;
        }

        #previewImage {
            display: block;
            max-width: 100%;
            max-height: 350px;
        }
    </style>
@endpush
@section('content')
    <div class="card mt-3">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">{{(!empty($p_title) && isset($p_title)) ? $p_title : ''}}</h4>
                    <div
                        class="small text-medium-emphasis">{{(!empty($p_summary) && isset($p_summary)) ? $p_summary : ''}}</div>
                </div>
                <div class="btn-toolbar d-none d-md-block" role="toolbar" aria-label="Toolbar with buttons">
                    @can('manager_master-data_books-list')

                        <a href="{{(!empty($url) && isset($url)) ? $url : ''}}"
                           class="btn btn-sm btn-primary">{{(!empty($url_text) && isset($url_text)) ? $url_text : ''}}</a>
                    @endcan
                </div>
            </div>
            <hr>
            <form method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}" id="bookForm">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="title"> Title</label>
                        <input type="text"
                               class="form-control @error('title') is-invalid @enderror"
                               name="title"
                               id="title"
                               onkeyup="syncSlug(this.value)"
                               placeholder="Name"
                               value="{{ old('title', $data->title) }}">
                        @error('title')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="slug">Slug</label>
                        <input type="text"
                               class="form-control @error('slug') is-invalid @enderror"
                               name="slug"
                               id="slug"
                               value="{{ old('slug', $data->slug) }}">
                        @error('slug')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="status">Status</label>
                        <select name="status"
                                class="form-control @error('status') is-invalid @enderror">

                            <option value="1"
                                {{ old('status', $data->status) == 1 ? 'selected' : '' }}>
                                Publish
                            </option>

                            <option value="0"
                                {{ old('status', $data->status) == 0 ? 'selected' : '' }}>
                                Draft
                            </option>

                        </select>
                        @error('status')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="language">Language</label>
                        <select name="language"
                                id="language"
                                class="form-control @error('language') is-invalid @enderror">

                            <option value="">Select Language</option>

                            @foreach($languages as $value => $label)
                                <option value="{{ $value }}"
                                    {{ old('language', $data->language) == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach

                        </select>

                        @error('language')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="type">Type</label>

                        <select name="type"
                                id="type"
                                class="form-control @error('type') is-invalid @enderror">

                            <option value="">Select Type</option>

                            @foreach($types as $value => $label)
                                <option value="{{ $value }}"
                                    {{ old('type', $data->type) == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach

                        </select>
                        @error('type')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="publish_date">Publish Date</label>

                        <input type="datetime-local"
                               name="publish_date"
                               id="publish_date"
                               class="form-control @error('publish_date') is-invalid @enderror"
                               value="{{ old('publish_date', optional($data->publish_date)->format('Y-m-d\TH:i')) }}">

                        @error('publish_date')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="class_id">Class</label>

                        <select name="class_id"
                                id="class_id"
                                class="form-control @error('class_id') is-invalid @enderror">

                            <option value="">Select Class</option>

                            @foreach($classes as $class)
                                <option value="{{ $class->id }}"
                                    {{ old('class_id', $data->class_id) == $class->id ? 'selected' : '' }}>
                                    {{ $class->name }}
                                </option>
                            @endforeach

                        </select>
                        @error('class_id')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label">Category</label>

                        <select name="parent_category_id"
                                id="parent_category_id"
                                class="form-control @error('parent_category_id') is-invalid @enderror">

                            <option value="">Select Category</option>

                            @foreach($parentCategories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('parent_category_id', $data->parent_category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach

                        </select>

                        @error('parent_category_id')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label">Sub Category</label>

                        <select name="child_category_id"
                                id="child_category_id"
                                class="form-control @error('child_category_id') is-invalid @enderror">

                            <option value="">Select Sub Category</option>

                            @foreach($childCategories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('child_category_id', $data->child_category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach

                        </select>

                        @error('child_category_id')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <div class="image-edit mb-3">
                            <label class="form-label" for="thumbnail">
                                Thumbnail
                                <small>(JPG, JPEG, PNG, WEBP)</small>
                            </label>
                            <input
                                type="file"
                                name="thumbnail"
                                id="image-cropper"
                                class="form-control wizard-required image-cropper @error('thumbnail') is-invalid @enderror"
                                accept=".jpg,.jpeg,.png,.webp,image/*">
                            <input type="hidden" name="base64image" id="base64image">
                            @if(!empty($data->thumbnail))
                                <div class="mt-3">
                                    <img
                                        id="thumbnailPreview"
                                        src="{{ asset('storage/' . $data->thumbnail) }}"
                                        class="img-thumbnail"
                                        style="max-height:180px;"
                                        alt="{{ $data->title }}">
                                </div>
                            @else
                                <div class="mt-3">
                                    <img
                                        id="thumbnailPreview"
                                        src="#"
                                        class="img-thumbnail"
                                        style="display:none; max-height:180px;">
                                </div>
                            @endif
                            @error('thumbnail')
                            <strong class="text-danger">{{ $message }}</strong>
                            @enderror
                            <div class="image-preview container-image-preview">
                                <div id="image-preview-background"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-3 col-12">
                    <label class="form-label">Files <small>(upload just .pdf files)</small></label>

                    <div id="bookDropzone" class="dropzone border rounded p-3">
                        <div class="dz-message">
                            Drag & Drop PDF files here or click to upload
                        </div>
                    </div>
                    @error('uploaded_files')
                    <div class="text-danger mt-2">{{ $message }}</div>
                    @enderror
                </div>
                @if($data->files->count())
                    <div class="mb-3">
                        <label class="form-label">Existing Files</label>
                        <div id="existingFiles">
                            @foreach($data->files as $file)
                                <div
                                    class="d-flex justify-content-between align-items-center border rounded p-2 mb-2 existing-file">
                                    <a href="{{ asset('storage/'.$file->file_path) }}" target="_blank">
                                        {{ $file->file_name }}
                                    </a>
                                    <div>
                                        <span
                                            class="text-muted me-3">{{ number_format($file->file_size / 1024, 2) }} KB</span>
                                        <button type="button"
                                                class="btn btn-sm btn-danger text-white remove-existing-file"
                                                data-id="{{ $file->id }}">
                                            &times;
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
                <div class="card">
                    <div class="card-header">
                        Book Links
                    </div>

                    <div class="card-body">

                        <div id="link-wrapper">

                            @forelse($data->links as $link)
                                <div class="row mb-2 link-row">

                                    <!-- Existing Link ID -->
                                    <input type="hidden" name="link_ids[]" value="{{ $link->id }}">

                                    <div class="col-md-10">
                                        <input
                                            type="url"
                                            name="links[]"
                                            value="{{ old('links', $link->link) }}"
                                            class="form-control"
                                            placeholder="Enter Book Link">
                                    </div>

                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger remove-link">
                                           -
                                        </button>
                                    </div>

                                </div>
                            @empty

                                <!-- Show one empty row if no links exist -->
                                <div class="row mb-2 link-row">

                                    <input type="hidden" name="link_ids[]" value="">

                                    <div class="col-md-10">
                                        <input
                                            type="url"
                                            name="links[]"
                                            class="form-control"
                                            placeholder="Enter Book Link">
                                    </div>

                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-success add-link">
                                            +
                                        </button>
                                    </div>

                                </div>

                            @endforelse

                        </div>

                        <!-- Add button -->
                        @if($data->links->count() > 0)
                            <button type="button" class="btn btn-success mt-2 add-link">
                                + Add More Link
                            </button>
                        @endif

                    </div>
                </div>



                <div id="deletedFilesContainer"></div>
                <button type="submit" class="btn btn-sm btn-success">Submit</button>
                {{-- Modal --}}
                <div class="modal fade bd-example-modal-lg imageCrop" id="model" tabindex="-1" role="dialog"
                     aria-labelledby="cropperModalLabel" aria-hidden="true" data-bs-backdrop="static">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="cropperModal">Crop Image</h5>
                                <button type="button" class="close btn-close" id="reset-image"
                                        data-coreui-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="img-container">
                                    <div class="row">
                                        <div class="col-md-11">
                                            <img id="previewImage" src="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" id="reset-image-close"
                                        data-coreui-dismiss="modal">Close
                                </button>
                                <button type="button" class="btn btn-primary crop" id="cropImage">Crop</button>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- End: Modal --}}
            </form>
        </div>
    </div>
@endsection
@push('footer-scripts')
    <script src="{{ asset('manager/js/dropzone.min.js') }}"></script>
    <script src="{{ asset('admin/cropper/cropper.js') }}"></script>
    <script>
        //Image Cropper
        $(document).ready(function () {
            var $modal = $('.imageCrop');
            var image = document.getElementById('previewImage');
            var cropper;
            $("body").on("change", ".image-cropper", function (e) {
                e.preventDefault();
                var files = e.target.files;
                var done = function (url) {
                    image.src = url;
                    $modal.modal('show');
                };
                var reader;
                var file;
                var URL;
                if (files && files.length > 0) {
                    file = files[0];
                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function (e) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
            $modal.on('shown.coreui.modal', function () {
                cropper = new Cropper(image, {
                    dragMode: 'move',
                    aspectRatio: 1 / 1,
                    autoCropArea: 0.65,
                    restore: false,
                    guides: false,
                    center: false,
                    highlight: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    toggleDragModeOnDblclick: false,
                });
            }).on('hidden.coreui.modal', function () {
                cropper.destroy();
                cropper = null;
            });
            $("body").on("click", "#cropImage", function () {
                canvas = cropper.getCroppedCanvas({
                    width: 200,
                    height: 300,
                });
                canvas.toBlob(function (blob) {
                    url = URL.createObjectURL(blob);
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onloadend = function () {
                        var base64data = reader.result;
                        $('#base64image').val(base64data);
                        $('#image-preview-background').css(
                            'background-image',
                            'url(' + base64data + ')'
                        );
                        $('#thumbnailPreview').attr('src', base64data).show();
                        $modal.modal('hide');
                    };
                });
            });
        });
    </script>
    <script>
        Dropzone.autoDiscover = false;

        let fileIndex = 0;
        let hasInvalidFiles = false;

        const myDropzone = new Dropzone("#bookDropzone", {

            url: "{{ route('manager.books.upload-temp') }}",
            method: "POST",
            paramName: "file",

            maxFilesize: 30,
            acceptedFiles: ".pdf",
            addRemoveLinks: true,

            dictFileTooBig: "File size must not be greater than 30 MB.",
            dictInvalidFileType: "Only PDF files are allowed.",

            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },

            success: function (file, response) {

                if (response.success) {

                    hasInvalidFiles = false;

                    const fileData = response.file;
                    const index = fileIndex++;

                    file.formIndex = index;

                    const containerId = `inputs-file-${index}`;

                    const inputsHtml = `
                    <div id="${containerId}">
                        <input type="hidden" name="uploaded_files[${index}][file_name]" value="${fileData.file_name}">
                        <input type="hidden" name="uploaded_files[${index}][file_path]" value="${fileData.file_path}">
                        <input type="hidden" name="uploaded_files[${index}][file_size]" value="${fileData.file_size}">
                    </div>
                `;

                    $("#bookForm").append(inputsHtml);
                }
            },

            removedfile: function (file) {

                if (file.previewElement) {
                    file.previewElement.remove();
                }

                if (file.formIndex !== undefined) {
                    $("#inputs-file-" + file.formIndex).remove();
                }

                // Check if any invalid files still exist
                hasInvalidFiles = $("#bookDropzone .dz-error").length > 0;
            },

            error: function (file, message) {

                hasInvalidFiles = true;

                if (typeof message === "object") {
                    message = message.message;
                }

                $(file.previewElement)
                    .addClass("dz-error");

                $(file.previewElement)
                    .find(".dz-error-message")
                    .text(message);
            }

        });

        // Prevent form submission if invalid files exist
        $("#bookForm").on("submit", function (e) {

            hasInvalidFiles = $("#bookDropzone .dz-error").length > 0;

            if (hasInvalidFiles) {

                e.preventDefault();

                toastr.error("Please remove the invalid file(s) before submitting the form.");
                return false;
            }

        });
    </script>
    <script>
        // Slug Syncing Logic
        function slugify(text) {
            return text
                .normalize('NFD')
                .toLowerCase()
                .toString()
                .trim()
                .replace(/ /g, '-')
                .replace(/[^\w-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/_+/g, '');
        }

        function syncSlug(text) {
            if (!document.getElementById('slug').dataset.touched) {
                document.getElementById('slug').value = slugify(text);
            }
        }

        document.getElementById('slug').addEventListener('input', function () {
            this.dataset.touched = '1';
        });

        // Parent/Sub Category AJAX
        $(document).ready(function () {
            $('#parent_category_id').on('change', function () {
                let parentId = $(this).val();
                $('#child_category_id').html('<option value="">Loading...</option>');

                if (parentId == '') {
                    $('#child_category_id').html('<option value="">Select Sub Category</option>');
                    return;
                }

                $.ajax({
                    url: "{{ url('manager/get-book-categories') }}/" + parentId + "/children",
                    type: "GET",
                    dataType: "json",
                    success: function (response) {
                        let options = '<option value="">Select Sub Category</option>';
                        if (response.length > 0) {
                            $.each(response, function (index, category) {
                                options += `<option value="${category.id}">${category.category_name}</option>`;
                            });
                        } else {
                            options = '<option value="">No Sub Categories Found</option>';
                        }
                        $('#child_category_id').html(options);
                    },
                    error: function () {
                        $('#child_category_id').html('<option value="">Something went wrong</option>');
                    }
                });
            });
        });
    </script>
    <script>
        document.addEventListener('click', function (e) {
            if (!e.target.classList.contains('remove-existing-file')) {
                return;
            }
            const fileId = e.target.dataset.id;
            e.target.closest('.existing-file').remove();
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'delete_files[]';
            input.value = fileId;

            document.getElementById('deletedFilesContainer').appendChild(input);
        });
    </script>


    <script>
        $(document).on('click', '.add-link', function () {

            $('#link-wrapper').append(`
        <div class="row mb-2 link-row">

            <input type="hidden" name="link_ids[]" value="">

            <div class="col-md-10">
                <input
                    type="url"
                    name="links[]"
                    class="form-control"
                    placeholder="Enter Book Link">
            </div>

            <div class="col-md-2">
                <button type="button" class="btn btn-danger remove-link">
                    -
                </button>
            </div>

        </div>
    `);

        });

        $(document).on('click', '.remove-link', function () {

            // Remove only the current row
            $(this).closest('.link-row').remove();

        });
    </script>
@endpush