@extends('admin.admin_app')
@section('content')
    @php
        $prefix = session('prefix') ?? 'admin';
    @endphp

    <!-- Page Header -->
    <div class="content bg-gray-lighter">
        <div class="row items-push">
            <div class="col-sm-7">
                <h1 class="page-heading">
                    {{ isset($roomCategoryImg->id) ? 'Edit Image' : 'Add Image' }}
                    for {{ $room->getRoomCategory->name }} ({{ $room->type }})
                    - {{ $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($prefix . '/hotel-list') }}">Hotels</a>
                    </li>
                    <li>
                        <a class="link-effect" href="#">
                            {{ isset($roomCategoryImg->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: #fff;
            padding: 35px;
            border-radius: 20px;
            border: 2px dashed #cbd5e1;
            text-align: center;
            cursor: pointer;
            transition: .3s;
            box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
        }

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

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

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

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

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

        .cropper-bg {
            background-image: none
        }
    </style>

    <div class="content content-boxed">
        <div class="row">
            <div class="col-sm-12">
                <div class="block">
                    @include('admin.navigation-tabs')
                    <div class="block-header">
                        <a class="pull-right btn btn-info"
                            href="{{ URL::to($prefix . '/hotels/room-category-images/' . $room_cat_id . '/' . $hotels->id) }}">
                            <i class="fa fa-angle-left"></i> Back To Room Category Image
                        </a>
                    </div>

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

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <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 class="close" data-dismiss="alert">×</button>
                                {{ Session::get('flash_message') }}
                            </div>
                        @endif

                        {!! Form::open([
                            'url' => url(
                                $prefix .
                                    '/hotels/addedit-cat-images/' .
                                    $room_cat_id .
                                    '/' .
                                    $hotels->id .
                                    (isset($roomCategoryImg->id) ? '/' . $roomCategoryImg->id : ''),
                            ),
                            'class' => 'form-horizontal padding-15',
                            'enctype' => 'multipart/form-data',
                        ]) !!}

                        <input type="hidden" name="hotel_id" value="{{ $hotels->id }}">
                        <input type="hidden" name="room_cat_id" value="{{ $room_cat_id }}">
                        <input type="hidden" name="id" value="{{ $roomCategoryImg->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 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, PNG, WEBP</p>
                                    <input type="file" name="image" id="imageInput" accept="image/*" hidden
                                        style='width:1px;height:1px' {{ empty($roomCategoryImg->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($roomCategoryImg->image) ? url('public/upload/roomcategory/' . '/' . $roomCategoryImg->image) : '' }}"
                                    style="max-width:100%;margin-top:10px;{{ isset($roomCategoryImg->image) ? '' : 'display:none;' }}">
                            </div>
                        </div>

                        <!-- Crop -->
                        <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 <span style="color:red">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" name="img_name" value="{{ $roomCategoryImg->img_name ?? '' }}"
                                    required class="form-control">
                            </div>
                        </div>

                        <!-- Order -->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                Order <span style="color:red">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" name="imageorder" value="{{ $roomCategoryImg->imageorder ?? '' }}"
                                    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($roomCategoryImg->id) ? 'Update' : 'Save' }}
                                </button>
                                <a href="{{ URL::to($prefix . '/hotels/room-category-images/' . $room_cat_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