@extends('admin.admin_app')

@section('content')
    <!-- Page Header -->
    <div class="content bg-gray-lighter">
        <div class="row items-push">
            <div class="col-sm-7">
                <h1 class="page-heading">
                    {{ isset($hotel_gallery_obj->id) ? 'Edit Image' : 'Add Image' }}
                    for {{ $hotels->hotel_name ?? '' }}
                </h1>
            </div>
        </div>
    </div>

    <!-- Cropper -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

    <!-- Cropper -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

    <style>
        .upload-box {
            width: 100%;
            background: #ffffff;
            padding: 35px;
            border-radius: 20px;
            border: 2px dashed #cbd5e1;
            text-align: center;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
        }

        .upload-box:hover {
            border-color: #4a90e2;
            background: #f8fbff;
        }

        .upload-icon {
            width: 60px;
            opacity: 0.8;
            margin-bottom: 15px;
        }

        .upload-text {
            font-size: 18px;
            color: #334155;
        }

        .cropper-bg {
            background-image: none;
        }

        .browse-btn {
            color: #4a90e2;
            cursor: pointer;
            font-weight: 600;
        }

        .upload-support {
            color: #94a3b8;
            font-size: 13px;
        }

        .cropper-drag-box {
            background-color: #000;
            opacity: .4;
        }
    </style>

    <div class="content content-boxed">
        <div class="block">
            @include('admin.navigation-tabs')
            <div class="block-content block-content-narrow">

                {!! Form::open([
                    'url' => 'admin/hotels/addnewhotelimage',
                    'class' => 'form-horizontal',
                    'enctype' => 'multipart/form-data',
                ]) !!}

                <input type="hidden" name="hotel_id" value="{{ $hotels->id }}">
                <input type="hidden" name="id" value="{{ $hotel_gallery_obj->id ?? '' }}">

                {{-- Upload --}}
                <div class="form-group">
                    <label class="col-sm-3 control-label">Upload Image *</label>
                    <div class="col-sm-9">

                        <div class="upload-box" id="dropArea">
                            <img src="https://cdn-icons-png.flaticon.com/512/1829/1829580.png" class="upload-icon">
                            <p>Drop your image here, or<span class="browse-btn" id="browseBtn">Click to browse</span></p>

                            <input type="file" id="imageInput" name="hotelimage" accept="image/*"
                                style="width:1px;height:1px" {{ empty($hotel_gallery_obj->id) ? 'required' : '' }}>
                        </div>
                        <div class="cropper-wrapper" style='margin-top:15px'>
                            @if (!empty($hotel_gallery_obj) && !empty($hotel_gallery_obj->hotelimage))
                                <img id="previewImage" style="max-width:100%;margin-top:15px;padding-top:15px"
                                    src="{{ asset('public/upload/hotelgallery/' . $hotel_gallery_obj->hotel_id . '/' . $hotel_gallery_obj->hotelimage) }}"
                                    alt="Preview Image">
                            @else
                                <img id="previewImage" style="max-width:100%;margin-top:15px;padding-top:15px;display:none;"
                                    alt="Preview Image">
                            @endif

                        </div>
                    </div>
                </div>

                {{-- Crop Button --}}
                <div class="form-group">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-9">
                        <button type="button" id="cropBtn" class="btn btn-success" style="display:none">
                            Click to Crop
                        </button>
                        <div id="cropMsg" style="display:none;margin-top:10px;color:#16a34a;font-weight:600;">
                            ✅ Image cropped successfully
                        </div>

                    </div>
                </div>

                {{-- Name --}}
                <div class="form-group">
                    <label class="col-sm-3 control-label">Image Name</label>
                    <div class="col-sm-9">
                        <input type="text" name="image_name" class="form-control"
                            value="{{ $hotel_gallery_obj->image_name ?? '' }}">
                    </div>
                </div>

                {{-- Order --}}
                <div class="form-group">
                    <label class="col-sm-3 control-label">Order *</label>
                    <div class="col-sm-9">
                        <input type="number" name="hotelimageorder" class="form-control"
                            value="{{ $hotel_gallery_obj->hotelimageorder ?? '' }}" required>
                    </div>
                </div>

                <hr>

                <div class="form-group">
                    <div class="col-md-offset-3 col-sm-9">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <a href="{{ URL::to('admin/hotel-list') }}" class="btn btn-info">Cancel</a>
                    </div>
                </div>

                {!! Form::close() !!}
            </div>
        </div>
    </div>
    <script>
        const dropArea = document.getElementById('dropArea');
        const imageInput = document.getElementById('imageInput');
        const browseBtn = document.getElementById('browseBtn');
        const preview = document.getElementById('previewImage');
        const cropBtn = document.getElementById('cropBtn');
        const cropMsg = document.getElementById('cropMsg');

        let cropper = null;
        let imageProcessed = true;

        const FINAL_WIDTH = 676;
        const FINAL_HEIGHT = 381;

        /* -------------------------
           OPEN FILE
        ------------------------- */
        browseBtn.onclick = () => imageInput.click();
        dropArea.onclick = () => imageInput.click();

        /* -------------------------
           DRAG & DROP
        ------------------------- */
        dropArea.addEventListener("dragover", e => e.preventDefault());
        dropArea.addEventListener("dragleave", () => dropArea.style.background = "white");

        dropArea.addEventListener("drop", e => {
            e.preventDefault();
            imageInput.files = e.dataTransfer.files;
            handleFile(e.dataTransfer.files[0]);
        });

        /* -------------------------
           INPUT CHANGE
        ------------------------- */
        imageInput.addEventListener("change", e => {
            handleFile(e.target.files[0]);
        });

        /* -------------------------
           HANDLE FILE
        ------------------------- */
        function handleFile(file) {
            if (!file) return;

            imageProcessed = false;
            cropMsg.style.display = "none";

            const reader = new FileReader();
            reader.onload = e => {
                preview.src = e.target.result;
                preview.style.display = "block";
                preview.style.width = "100%";
                preview.style.height = "auto";
                preview.style.objectFit = "contain";

                const img = new Image();
                img.onload = function() {

                    const isSmall = img.width < FINAL_WIDTH && img.height < FINAL_HEIGHT;

                    // 🔹 SMALL IMAGE → NO CROPPER
                    if (isSmall) {
                        if (cropper) {
                            cropper.destroy();
                            cropper = null;
                        }
                        cropBtn.style.display = "none";
                        imageProcessed = true;
                        cropMsg.style.display = "block";
                        return;
                    }

                    // 🔹 INIT CROPPER
                    if (cropper) cropper.destroy();

                  
                    cropper = new Cropper(preview, {
                        aspectRatio: FINAL_WIDTH / FINAL_HEIGHT,

                        /* 🔒 HARD LOCK SETTINGS */
                        viewMode: 3, // Prevents crop box overflow
                        dragMode: 'move', // Move image only
                        cropBoxResizable: false, // Disable resize
                        cropBoxMovable: true, // Disable move
                        toggleDragModeOnDblclick: false,

                        /* 🔒 Disable zoom & scale */
                        zoomable: false,
                        scalable: false,
                        zoomOnWheel: false,
                        zoomOnTouch: false,

                        /* 🔒 Disable selection */
                        movable: true,
                        rotatable: false,
                        responsive: true,
                        background: false,
                        guides: false,
                        center: false,
                        highlight: false,

                        autoCropArea: 1,

                         cropstart() {
                            cropBtn.style.display = "inline-block";
                            cropMsg.style.display = "none";
                            imageProcessed = false;
                        },
                        cropmove() {
                            cropBtn.style.display = "inline-block";
                            cropMsg.style.display = "none";
                            imageProcessed = false;
                        }
                    });

                    cropBtn.style.display = "inline-block";
                    imageProcessed = false;
                };

                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        /* -------------------------
           CROP BUTTON
        ------------------------- */
        cropBtn.onclick = () => {
            if (!cropper) return;

            const canvas = cropper.getCroppedCanvas({
                width: FINAL_WIDTH,
                height: FINAL_HEIGHT,
                imageSmoothingEnabled: true,
                imageSmoothingQuality: "high"
            });

            preview.src = canvas.toDataURL("image/jpeg", 1);
            preview.style.width = "100%";
            preview.style.height = "auto";

            canvas.toBlob(blob => {
                const file = new File(
                    [blob],
                    "crop_" + Date.now() + ".jpg", {
                        type: "image/jpeg"
                    }
                );

                const dt = new DataTransfer();
                dt.items.add(file);
                imageInput.files = dt.files;

                cropBtn.style.display = "none";
                cropMsg.style.display = "block";
                imageProcessed = true;

            }, "image/jpeg", 1);
        };

        /* -------------------------
           SUBMIT GUARD
        ------------------------- */
        document.querySelector("form").addEventListener("submit", e => {
            if (!imageProcessed) {
                e.preventDefault();
                alert("Please crop the image before saving.");
            }
        });
    </script>
@endsection