@extends('admin.layout.app')
@section('title', 'Edit Course')
<style>
    .dropzone {
        border: 2px dashed #bbb;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        color: #666;
        max-width: 180px;
        margin: auto;
        position: relative;
    }

    .dropzone.hover {
        border-color: #333;
        background: #f8f8f8;
    }

    .dropzone img {
        max-width: 150px;
        max-height: 150px;
        object-fit: cover;
        margin-top: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .dropzone input[type="file"] {
        display: none;
    }
</style>
@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Edit Banner</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="students.html">Banners</a></li>
                            <li class="breadcrumb-item active">Edit Banner</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card comman-shadow">
                    <div class="card-body">

                        <form action="{{ route('banners.update', $banner->id) }}" method="POST" class="row"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="mb-5 col-12">
                                <div class="form-group students-up-files">
                                    <label> Banner Photo (150px X 150px)</label>
                                    <div class="dropzone" id="photo-dropzone"
                                        style="cursor:pointer; width: 100%; max-width: 400px; padding: 15px; border: 2px dashed #ccc; border-radius: 6px;">
                                        <p id="upload-text"
                                            style="margin-bottom: 10px; user-select:none; text-align:center;">
                                            Drag & Drop or Click to Upload
                                        </p>
                                        <input type="file" id="student-photo" name="image" accept="image/*"
                                            style="display:none;" />
                                        <img id="photo-preview"
                                            src="{{ $banner->image ? asset('storage/' . $banner->image->path) : ' ' }}"
                                            alt="Image Preview"
                                            style=" max-width: 100%; max-height: 300px; border:1px solid #ccc; border-radius:4px; margin-bottom:10px; object-fit: contain;" />
                                        <button type="button" id="upload-btn"
                                            class="mx-auto btn btn-primary btn-sm d-block">
                                            Upload
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-3">
                                <button type="submit" class="btn btn-primary w-100">Save</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(function() {
            var dropzone = $('#photo-dropzone');
            var inputFile = $('#student-photo');
            var preview = $('#photo-preview');
            var uploadText = $('#upload-text');
            var uploadBtn = $('#upload-btn');

            // Only trigger inputFile click when clicking on text or button, NOT the entire dropzone
            uploadText.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
            });

            uploadBtn.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
            });

            // Optional: drag/drop highlighting
            dropzone.on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.addClass('hover');
            });

            dropzone.on('dragleave drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.removeClass('hover');
            });

            // Handle dropped files
            dropzone.on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();

                var files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    inputFile.prop('files', files); // update input's files for form submission
                    previewFile(files[0]);
                }
            });

            // Handle file selected from dialog
            inputFile.on('change', function() {
                if (this.files && this.files[0]) {
                    previewFile(this.files[0]);
                }
            });

            function previewFile(file) {
                if (!file.type.startsWith('image/')) {
                    alert('Please upload an image file.');
                    preview.hide();
                    inputFile.val('');
                    uploadText.show();
                    return;
                }

                var reader = new FileReader();
                reader.onload = function(e) {
                    preview.attr('src', e.target.result).show();
                    uploadText.hide();
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
@endpush