@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
                <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')}}">
                        @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')}}">
                        @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">Publish</option>
                            <option value="0">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') == $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') == $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') }}">

                        @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') == $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') == $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>

                        </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">
                            @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 class="mt-3">
                            <img id="thumbnailPreview"
                                 src="#"
                                 alt="Thumbnail Preview"
                                 class="img-thumbnail"
                                 style="display:none; max-height:180px;">
                        </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>



                <div class="card mb-4">
                    <div class="card-header">
                        Book Links
                    </div>

                    <div class="card-body">

                        <div id="link-wrapper">

                            <div class="row mb-2 link-row">

                                <div class="col-md-10">
                                    <input type="url"
                                           name="links[]"
                                           class="form-control"
                                           placeholder="https://example.com/book.pdf">
                                </div>

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

                            </div>

                        </div>

                    </div>
                </div>

                <button type="submit" class="btn btn-sm btn-success">Submit</button>
            </form>
            {{-- 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 --}}
        </div>

    </div>
@endsection
@push('footer-scripts')
    <script src="{{ asset('manager/js/dropzone.min.js') }}"></script>
    <script src="{{ asset('admin/cropper/cropper.js') }}"></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>
        //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);
                        document.getElementById('image-preview-background').style.backgroundImage = "url(" + base64data + ")";
                        $modal.modal('hide');
                    }
                });
            });
        });
    </script>
    <script>
        $(document).on('click','.add-link',function(){

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

            <div class="col-md-10">
                <input type="url"
                       name="links[]"
                       class="form-control"
                       placeholder="https://example.com/book.pdf">
            </div>

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

        </div>
    `);

        });

        $(document).on('click','.remove-link',function(){
            $(this).closest('.link-row').remove();
        });
    </script>
@endpush