@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 #000000 !important;
        border-radius: 8px;
        padding: 24px;
        text-align: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #uploadBox img {
        width: 200px;
        height: 100px;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    #uploadBox p {
        color: #000000;
        font-weight: 600;
    }
    #uploadBox small {
        color: #010101;
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>Banner</h5>
    </div>
</div>
<div class="d-flex justify-content-center align-items-center min-vh-75">
    <div class="card p-4 mb-3" style="max-width: 420px; width:100%;">
        <h6 class="mb-0">Upload Banner</h6>
        <hr class="m-2">
        <form action="{{ route('add_banner') }}" id="bannerForm" method="POST" enctype="multipart/form-data">
            @csrf
            <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;">
                <input type="file" name="banner_image" id="fileInput" hidden>
                <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>
                <svg id="uploadIcon" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-upload 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 stroke="none" d="M0 0h24v24H0z" />
                    <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>
                <img id="previewImage" src="" style="display:none; max-width:80%; margin:10px auto; border-radius:8px;">
                <div id="textContainer">
                    <span id="uploadText" class="fw-bold">Upload Banner</span>
                    <br>
                    <small class="text-muted mt-2">Choose photo size should be less than<br><b>2 MB</b> and in <b>Jpg, Png, JPEG Format.</b></small>
                </div>
            </div>
            <div class="form-action mt-4">
                <button type="submit" id="submitBanner" class="btn btn-primary w-100">Submit</button>
            </div>
        </form>
    </div>
</div>
<div class="card p-0 m-3">
    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <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>
        </div>
    </div>
</div>
<!-- toggle status -->
<div class="modal fade" id="statusModal" 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" id="toggle_status_text"></p>
            <form id="ToggleForm" method="POST" action="{{ route('toggle_banner_status') }}">
                @csrf
                <input type="hidden" name="id" id="toggle_banner_id">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold  me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_toggle" class="btn btn-primary p-3 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </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>
            <form id="DeleteForm" method="POST" action="{{ route('delete_banner') }}">
                @csrf
                <input type="hidden" name="id" id="banner_id">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <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>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- //view Banner preview image -->
 <div class="modal fade" id="view" tabindex="-1" data-bs-keyboard="true">
     <div class="modal-dialog modal-md modal-dialog-centered">
         <div class="modal-content rounded-4 text-center p-4 py-5">
             <img id="viewBannerImage" src="" height="250px" width="400px" alt="warning image"
                 class="d-block mx-auto">
         </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 src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function() {
        $('#usersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('banner_data') }}",
            searching: true,
            paging: true,
            info: true,
            lengthChange: false,
            pageLength: 10,
            ordering: false,
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'banner',
                    name: 'banner',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });
    });
</script>
<script>
    //upload banner
    document.getElementById('bannerForm').addEventListener('submit', function() {
        const btn = document.getElementById('submitBanner');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
    //toggle bannner status
    function setToggleId(button) {
        const bannerId = button.getAttribute('data-id');
        const isActive = button.getAttribute('data-active') === '1';
        document.getElementById('toggle_banner_id').value = bannerId;
        const statusText = document.getElementById('toggle_status_text');
        const submitBtn = document.getElementById('submit_toggle');
        if (isActive) {
            statusText.textContent = "Are you confirm to Inactive this banner?";
        } else {
            statusText.textContent = "Are you confirm to Active this banner?";
        }
        const icon = document.querySelector(`#toggle_icon_${bannerId}`);
        if (icon) {
            icon.setAttribute('fill', isActive ? '#FF0000' : '#28a745');
            icon.setAttribute('fill-opacity', '1');
        }
    }
    document.getElementById('ToggleForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_toggle');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
    //delete
    function setDeleteId(button) {
        document.getElementById('banner_id').value = button.getAttribute('data-id');
    }
    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });
    //view preview image
    $(document).on('click', '.view-banner', function() {
        var imageUrl = $(this).data('img');
        $('#viewBannerImage').attr('src', imageUrl);
    });
</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) => {
        if (e.target !== removeBtn) {
            fileInput.click();
        }
    });
    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];
        if (!file) return;
        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';
            uploadIcon.style.display = 'none';
            textContainer.style.display = 'none';
            removeBtn.style.display = 'block';
        };
        reader.readAsDataURL(file);
    });
    // Handle Remove Click
    removeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        resetUpload();
    });
    function resetUpload() {
        fileInput.value = '';
        previewImage.src = '';
        previewImage.style.display = 'none';
        uploadIcon.style.display = 'block';
        textContainer.style.display = 'block';
        removeBtn.style.display = 'none';
    }
</script>
@endsection