@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($venue_gallery_obj->id) ? 'Edit Image' : 'Add Image' }} for
                    {{ $venues->venue_name ?? '' }} - {{ $hotels->hotel_name ?? '' }}
                </h1>
            </div>
            <div class="col-sm-5 text-right hidden-xs">
                <ol class="breadcrumb push-10-t">
                    <li><a href="{{ URL::to('admin/hotel-list') }}">Hotels</a></li>
                    <li>
                        <a class="link-effect" href="">
                            {{ isset($venue_gallery_obj->id) ? 'Edit Image' : 'Add Image' }}
                        </a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <!-- END Page Header -->

    <!-- 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;
        }
    </style>

    <div class="content content-boxed">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="block">

                    <div class="block-header">
                        <a class="pull-right btn btn-info push-5-r push-10"
                            href="{{ URL::to('admin/hotels/managevenueimages/' . $venues->id . '/' . $hotels->id) }}">
                            <i class="fa fa-angle-left"></i> Back To Venue Image
                        </a>
                    </div>

                    <div class="block-content block-content-narrow">

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if (Session::has('flash_message'))
                            <div class="alert alert-success">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                {{ Session::get('flash_message') }}
                            </div>
                        @endif

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

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

                        <!-- MODERN FILE 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 class="upload-text">
                                        Drop your image here, or
                                        <span class="browse-btn" id="browseBtn">Click to browse</span>

                                    </p>
                                    <p class="upload-support">Supports: JPG, JPEG2000, PNG</p>
                                    <input type="file" style='width:1px;height:1px' name="venueimage" id="imageInput"
                                        {{ empty($venue_gallery_obj->id) ? 'required' : '' }}>
                                </div>

                            </div>
                        </div>

                        <!-- Preview -->
                        <div class="form-group">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-9">
                                <img id="previewImage"
                                    src="{{ isset($venue_gallery_obj->venueimage) ? url('public/upload/venuegallery/' . $venue_gallery_obj->venue_id . '/' . $venue_gallery_obj->venueimage) : '' }}"
                                    style="max-width:100%; {{ isset($venue_gallery_obj->venueimage) ? '' : 'display:none;' }} margin-top:10px;">

                            </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">Name</label>
                            <div class="col-sm-9">
                                <input type="text" name="img_name" value="{{ $venue_gallery_obj->img_name ?? '' }}"
                                    class="form-control">
                            </div>
                        </div>

                        <!-- Order -->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Order <span
                                    style="color:red;font-weight: bold;">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" name="venueimageorder"
                                    value="{{ $venue_gallery_obj->venueimageorder ?? '' }}" class="form-control" required>
                            </div>
                        </div>

                        <hr>

                        <div class="form-group">
                            <div class="col-md-offset-3 col-sm-9">
                                <button type="submit" class="btn btn-primary">
                                    {{ isset($venue_gallery_obj->id) ? 'Update' : 'Save' }}
                                </button>
                                <a href="{{ URL::to('admin/hotels/managevenueimages/' . $venues->id . '/' . $hotels->id) }}"
                                    class="btn btn-info">Cancel</a>
                            </div>
                        </div>

                        {!! Form::close() !!}

                    </div>
                </div>
            </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