@extends('Admin.layout')
<style>
.upload-area {
    border: 2px dashed #d3d6db;
    border-radius: 10px;
    cursor: pointer;
}
.upload-area:hover {
    background: #f8f9fa;
}
.modal {
    z-index: 1055;
}
</style>
@section('content')
    <h4 class="mb-4">Upload Banner</h4>
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card p-4 mb-4">
                <h6 class="mb-4">Upload Banner</h6>
                <form method="POST" action="{{ route('add_banner') }}" id="bannerForm" novalidate>
                    @csrf
                    <input type="hidden" name="banner_preview" id="bannerPreview" value="{{ old('banner_preview') }}">
                    <div class="mb-3">
                        <label class="form-label">Banner Position</label>
                        <select class="form-select" name="type" required>
                            <option value="">Select</option>
                            <option value="Top" {{ old('type') == 'Top' ? 'selected' : '' }}>Top</option>
                            <option value="Center" {{ old('type') == 'Center' ? 'selected' : '' }}>Center</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="upload-box w-100">
                            <input type="file" id="bannerInput" accept="image/*" hidden>
                            <div class="upload-area text-center p-4">
                                <svg width="56" height="56" viewBox="0 0 56 56" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M25.6663 37.3332V18.3166L19.5997 24.3832L16.333 20.9999L27.9997 9.33325L39.6663 20.9999L36.3997 24.3832L30.333 18.3166V37.3332H25.6663ZM13.9997 46.6666C12.7163 46.6666 11.6181 46.21 10.705 45.2969C9.7919 44.3838 9.33456 43.2848 9.33301 41.9999V34.9999H13.9997V41.9999H41.9997V34.9999H46.6663V41.9999C46.6663 43.2832 46.2098 44.3822 45.2967 45.2969C44.3836 46.2116 43.2846 46.6681 41.9997 46.6666H13.9997Z"
                                        fill="#080808" />
                                </svg>
                                <img id="previewImage" class="img-fluid rounded d-none" style="max-height:220px;">
                                <h5 class="mt-2" id="uploadText">Upload Banner</h5>
                                <p class="text-muted" id="uploadHint">Choose photo size should be less than<br><b>2
                                        MB</b> and should be in<b> Jpg,Png,JPEG</b><br> Format.</p>
                            </div>
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="table-responsive">
            <table id="bannerTable" class="table text-center">
                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>DATE</th>
                        <th>POSITION</th>
                        <th>BANNER</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
{{-- View Modal --}}
<div class="modal fade" id="viewModal" tabindex="-1">
   <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content p-4">
            <h5 class="text-center mb-3">Upload Banner</h5>
            <div class="mb-3">
                <label class="form-label">Banner Position</label>
                <input type="text" id="viewBannerType" class="form-control" readonly>
            </div>
            <div class="upload-area text-center p-4">
                <img id="viewBanner" class="img-fluid rounded" style="max-height:220px;">
            </div>
            <button class="btn btn-outline-danger w-100 mt-4" data-bs-dismiss="modal">
                Close
            </button>
        </div>
    </div>
</div>
{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <h4>Are you sure?</h4>
            <p class="text-muted">Do you really want to delete this banner?</p>
            <input type="hidden" id="deleteBannerId">
            <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDelete" class="btn btn-danger">Yes, Delete</button>
            </div>
        </div>
    </div>
</div>
<!-- Toast container for JS -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="customToast" class="toast text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="customToastBody"></div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
    $('#bannerTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('banner_data') }}",
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'created_at', name: 'created_at'},
            { data: 'type', name: 'type'},
            { data: 'image', name: 'image', orderable: false, searchable: false},
            { data: 'action', name: 'action', orderable: false,searchable: false},
        ]
    });
});
$(document).on('click', '.view-banner', function () {
    let imgSrc = $(this).data('img');
    let type   = $(this).data('type');
    $('#viewBanner').attr('src', imgSrc);
    $('#viewBannerType').val(type);
});
// Set banner ID when delete button clicked
$(document).on('click', '.delete-banner', function() {
    var id = $(this).data('id');
    $('#deleteBannerId').val(id);
});
// Confirm deletion
$('#confirmDelete').on('click', function() {
    var id = $('#deleteBannerId').val();
    if (!id) return;
    $.ajax({
        url: "{{ route('delete_banner') }}",
        type: "POST",
        data: {
            delete_id: id,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            $('#deleteModal').modal('hide');
            showToast(response.success || response.error, response.success ? 'success' : 'error');
            $('#bannerTable').DataTable().ajax.reload(null, false); // reload table
        },
        error: function() {
            showToast(" Something went wrong", "error");
        }
    });
});
function showToast(message, type = "success") {
    let toastEl = document.getElementById("customToast");
    let bodyEl = document.getElementById("customToastBody");
    bodyEl.innerText = message;
    toastEl.classList.remove("bg-success", "bg-danger");
    if (type === "success") {
        toastEl.classList.add("bg-success");
    } else {
        toastEl.classList.add("bg-danger");
    }
    let toast = new bootstrap.Toast(toastEl);
    toast.show();
}
// Auto-show Laravel session messages
document.addEventListener('DOMContentLoaded', function() {
    @if(session('success'))
    showToast("{{ session('success') }}", "success");
    @elseif(session('error'))
    showToast("{{ session('error') }}", "error");
    @elseif($errors -> any())
    showToast("{{ $errors->first() }}", "error");
    @endif
});
let isSubmitting = false;
document.getElementById('bannerForm').addEventListener('submit', function(e) {
    if (isSubmitting) {
        e.preventDefault();
        return false;
    }
    e.preventDefault();
    let type = this.querySelector('select[name="type"]').value;
    let bannerPreview = document.getElementById('bannerPreview').value;
    let submitBtn = this.querySelector('button[type="submit"]');
    if (type === "") {
        showToast("Please select a banner position", "error");
        return;
    }
    if (bannerPreview === "") {
        showToast("Please upload a banner image", "error");
        return;
    }
    isSubmitting = true;
    submitBtn.disabled = true;
    submitBtn.innerText = "Submitting...";
    this.submit();
});
document.getElementById('bannerInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    if (file.size > 2 * 1024 * 1024) {
        alert('Image must be less than 2MB');
        e.target.value = '';
        return;
    }
    const reader = new FileReader();
    reader.onload = function(e) {
    document.getElementById('previewImage').src = e.target.result;
    document.getElementById('previewImage').classList.remove('d-none');
    document.getElementById('bannerPreview').value = e.target.result;
    document.getElementById('uploadText').style.display = 'none';
    document.getElementById('uploadHint').style.display = 'none';
    // ✅ Hide upload icon (SVG) after upload
    document.querySelector('.upload-area svg').style.display = 'none';
};
    reader.readAsDataURL(file);
});
</script>
@endsection