@extends('Admin.layout')

<style>
    .notification-upload-box {
        position: relative;
        width: 100%;
        min-height: 110px;
        border: 1px dashed #d8d1c8;
        border-radius: 7px;
        background: #fffbf7;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.25s ease;
    }

    .notification-upload-box:hover {
        border-color: #7c5cff;
        background: #faf8ff;
    }

    .notification-upload-box.dragover {
        border-color: #7c5cff;
        background: #f5f2ff;
    }

    .upload-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .upload-icon {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c5ce7;
    }

    .upload-icon i {
        font-size: 25px;
    }

    .upload-text {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
    }

    .upload-main-text {
        font-size: 11px;
        color: #454545;
    }

    .upload-main-text span {
        color: #777;
    }

    .upload-text small {
        margin-top: 3px;
        font-size: 8px;
        color: #999;
    }

    .image-preview-wrapper {
        position: relative;
        width: 100%;
        height: 108px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
    }

    .image-preview {
        max-width: 100%;
        max-height: 96px;
        object-fit: contain;
        border-radius: 5px;
    }

    .remove-image {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 25px;
        height: 25px;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.65);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 5;
        transition: 0.2s ease;
    }

    .remove-image:hover {
        background: #dc3545;
    }

    .remove-image i {
        font-size: 15px;
    }
</style>

@section('content')

<div class="row justify-content-between">
    <div class="col-lg-6 mb-3">
        <h5 class="fw-semibold">
            <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow:0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('notification_table') }}">
                    <i class="ti tabler-chevron-left"></i>
                </a>
            </button>
            Send Notification
        </h5>
    </div>
</div>

<div class="card p-3">
    <div class="row">

        <div class="col-lg-4 mb-3">
            <label class="form-label">Title</label>
            <input type="text" class="form-control"
                value="Special Offer for Premium Members">
        </div>

        <div class="col-lg-4 mb-3">
            <label class="form-label">Sent To</label>
            <select class="form-select">
                <option>All Users</option>
                <option selected>Premium Users</option>
                <option>Active Users</option>
                <option>Inactive Users</option>
            </select>
        </div>

        <div class="col-lg-4 mb-3">
            <label class="form-label">Scheduled Date</label>
            <input type="date" class="form-control" value="2026-08-10">
        </div>

        <!-- Image Upload -->
        <div class="col-lg-6">
            <div class="mb-3">
                <label class="form-label small fw-medium">
                    Optional Notification Image
                </label>

                <div class="notification-upload-box" id="notificationUploadBox">

                    <input type="file"
                        id="notificationImage"
                        name="notification_image"
                        accept=".svg,.png,.jpg,.jpeg"
                        hidden>

                    <!-- Upload Content -->
                    <div class="upload-content d-none" id="uploadContent">
                        <div class="upload-icon">
                            <i class="ti tabler-cloud-upload"></i>
                        </div>

                        <div class="upload-text">
                            <span class="upload-main-text">
                                Click to upload <span>or drag & drop</span>
                            </span>

                            <small>
                                SVG, PNG, JPG (Max. 800×400px)
                            </small>
                        </div>
                    </div>

                    <!-- Preview -->
                    <div class="image-preview-wrapper" id="imagePreviewWrapper">
                        <img src="{{ asset('assets/images/banner.png') }}"
                            id="imagePreview"
                            class="image-preview"
                            alt="Notification Preview">

                        <button type="button"
                            class="remove-image"
                            id="removeImage">
                            <i class="ti tabler-x"></i>
                        </button>
                    </div>

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

        <!-- Description -->
        <div class="col-lg-6 mb-3">
            <label class="form-label">Description</label>
            <textarea class="form-control" rows="4">Dear User,

We are excited to announce our latest promotional offer. Recharge today and enjoy exclusive cashback rewards.

Thank you for being a valued customer.</textarea>
        </div>

        <div class="text-center mt-3">
            <button class="btn btn-label-primary me-2">
                Discard
            </button>

            <button class="btn btn-primary">
               Update
            </button>
        </div>

    </div>
</div>

<script>
    const uploadBox = document.getElementById('notificationUploadBox');
    const fileInput = document.getElementById('notificationImage');
    const uploadContent = document.getElementById('uploadContent');
    const imagePreviewWrapper = document.getElementById('imagePreviewWrapper');
    const imagePreview = document.getElementById('imagePreview');
    const removeImage = document.getElementById('removeImage');

    uploadBox.addEventListener('click', function(e) {
        if (e.target.closest('#removeImage')) return;
        fileInput.click();
    });

    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            previewImage(this.files[0]);
        }
    });

    uploadBox.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });

    uploadBox.addEventListener('dragleave', function() {
        this.classList.remove('dragover');
    });

    uploadBox.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');

        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            fileInput.files = e.dataTransfer.files;
            previewImage(e.dataTransfer.files[0]);
        }
    });

    function previewImage(file) {

        if (!file.type.startsWith('image/')) {
            alert('Please select a valid image file.');
            return;
        }

        if (file.size > 2 * 1024 * 1024) {
            alert('Image size must be less than 2MB.');
            fileInput.value = '';
            return;
        }

        const reader = new FileReader();

        reader.onload = function(e) {
            imagePreview.src = e.target.result;

            uploadContent.classList.add('d-none');
            imagePreviewWrapper.classList.remove('d-none');
        };

        reader.readAsDataURL(file);
    }

    removeImage.addEventListener('click', function(e) {

        e.stopPropagation();

        fileInput.value = '';

        imagePreview.src = '';
        imagePreviewWrapper.classList.add('d-none');
        uploadContent.classList.remove('d-none');
    });
</script>

@endsection