@extends('Admin.layout')


<style>
    .image-upload {
        --bs-dz-icon-bg: #000000;
        position: relative;
        border: 2px dashed var(--bs-border-color) !important;
        border-radius: 0.5rem;
        cursor: pointer;
        inline-size: 100%;
        height: 180px;
        width: 370px;
    }

    #uploadBox {
        border: 2px dashed #e9dd9b !important;
        border-radius: 8px;
        padding: 24px;
        text-align: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #uploadBox img {
        width: 100px;
        height: auto;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    #uploadBox p {
        color: #0a1f44;
        font-weight: 600;
    }

    #uploadBox small {
        color: #f6e586;
    }

    .btn-submit {
        background-color: #ffd700 !important;
    }

    .container {
        background-color: #0a1f44 !important;
        border-radius: 10px !important;
    }
</style>
@section('content')

    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Banner</h5>
        </div>

    </div>

    <form id="uploadForm" method="POST" action="{{ route('upload_banner') }}" enctype="multipart/form-data">
        @csrf

        <div class="d-flex justify-content-center align-items-center min-vh-75">
            <div class="container p-4 mb-3" style="max-width: 420px; width:100%;">

                <h6 class="mb-0 text-center" style="color:#ffd700;">Upload Banner</h6>
                <hr class="m-2">

                <div class="image-upload text-center d-flex flex-column justify-content-center p-4 w-100" id="uploadBox"
                    style="cursor:pointer; border:2px dashed #dcdcdc; border-radius:10px; position: relative;">

                    <!-- File Input -->
                    <input type="file" name="image" id="fileInput" accept="image/*" hidden>

                    <!-- Remove Button -->
                    <button type="button" id="removeBtn" style="display:none; position:absolute; top:10px; right:10px; z-index:10;
                                border:none; background:#ff4d4d; color:white; border-radius:50%;
                                width:25px; height:25px; cursor:pointer;">
                        &times;
                    </button>

                    <!-- Upload Icon -->
                    <svg id="uploadIcon" xmlns="http://www.w3.org/2000/svg" class="mx-auto mb-2" width="48" height="48"
                        viewBox="0 0 24 24" stroke-width="1.5" stroke="#6c757d" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
                        <path d="M7 9l5-5l5 5" />
                        <path d="M12 4v12" />
                    </svg>

                    <!-- Preview -->
                    <img id="previewImage" src="" style="display:none; max-width:80%; margin:10px auto; border-radius:8px;">

                    <!-- Text -->
                    <div id="textContainer">
                        <span class="fw-bold">Upload Banner</span>
                        <br>
                        <small class="text-muted mt-2">
                            Max size <b>2MB</b> | Formats: <b>JPG, PNG, JPEG</b>
                        </small>
                    </div>
                </div>

                <!-- Submit -->
                <div class="form-action mt-4">
                    <button type="submit" class="btn btn-submit w-100">Submit</button>
                </div>

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

    <div class="card p-0">



        <div class="table-responsive pt-0 pb-2 m-0">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>Banner</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- delete -->
    <div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you confirm to delete?</p>

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <form action="{{ route('delete_banner') }}" method="POST" id="DeleteForm">
                        @csrf

                        <!--  Hidden ID -->
                        <input type="hidden" name="id" id="delete_id">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                            Yes, Sure
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="imageViewModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content p-3 rounded-4">

                <!-- <div class="d-flex justify-content-end">
                        <button type="button" class="close-circle" data-bs-dismiss="modal">×</button>
                    </div> -->

                <div class="text-center">
                    <img id="modalPreviewImage" src="" class="img-fluid w-100 big-preview-img" alt="Preview">
                </div>

            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {


            const table = $('#usersTable').DataTable({
                ajax: "{{ route('banner_data') }}",
                searching: true,
                paging: true,
                info: true,
                lengthChange: false,
                pageLength: 10,
                ordering: false,
                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'created_at' },
                    { data: 'banner', orderable: false, searchable: false },
                    { data: 'status' },
                    { data: 'action', orderable: false, searchable: false },
                ]
            });

            // Custom search
            $('#toDate').on('keyup change', function () {
                table.search(this.value).draw();
            });

            // Page length
            $('#pageLength').on('change', function () {
                table.page.len(this.value).draw();
            });

        });
    </script>

    <script>
        const uploadBox = document.getElementById('uploadBox');
        const fileInput = document.getElementById('fileInput');
        const previewImage = document.getElementById('previewImage');
        const uploadIcon = document.getElementById('uploadIcon');
        const textContainer = document.getElementById('textContainer');
        const removeBtn = document.getElementById('removeBtn');

        // Open file picker
        uploadBox.addEventListener('click', (e) => {
            // Prevent trigger if clicking the remove button
            if (e.target !== removeBtn) {
                fileInput.click();
            }
        });

        // Handle File Change
        fileInput.addEventListener('change', () => {
            const file = fileInput.files[0];
            if (!file) return;

            // Validation (Set to 2MB as per your text)
            if (file.size > 2 * 1024 * 1024) {
                alert('File size must be less than 2 MB.');
                resetUpload();
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                previewImage.src = e.target.result;
                previewImage.style.display = 'block';

                // Hide text and icon
                uploadIcon.style.display = 'none';
                textContainer.style.display = 'none';

                // Show remove button
                removeBtn.style.display = 'block';
            };
            reader.readAsDataURL(file);
        });

        // Handle Remove Click
        removeBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // Stop click from bubbling to uploadBox
            resetUpload();
        });

        function resetUpload() {
            fileInput.value = '';
            previewImage.src = '';
            previewImage.style.display = 'none';

            // Show text and icon again
            uploadIcon.style.display = 'block';
            textContainer.style.display = 'block';

            // Hide remove button
            removeBtn.style.display = 'none';
        }
    </script>
    <script>
        $(document).on('click', '.preview-image', function () {
            let imgUrl = $(this).data('img');

            if (!imgUrl) {
                console.error('Image URL missing');
                return;
            }

            $('#modalPreviewImage').attr('src', imgUrl);

            let modal = new bootstrap.Modal(document.getElementById('imageViewModal'));
            modal.show();
        });
    </script>
    <script>
        function setDeleteId(button) {
            document.getElementById('delete_id').value = button.getAttribute('data-id');
        }

        document.getElementById('DeleteForm').addEventListener('submit', function () {
            const btn = document.getElementById('submit_delete');
            btn.disabled = true;
            btn.innerText = 'Deleting...';
        });
    </script>
@endsection