@extends('Admin.layout')

@section('content')
    <div class="container-fluid">

        <div class="d-flex justify-content-between align-items-center mb-4">

            <div>

                <h4 class="mb-1">
                    Banners
                </h4>



            </div>


            <a href="{{ route('create_banner') }}" class="btn btn-primary">

                <i class="bi bi-plus-lg me-1"></i>

                Add Banner

            </a>

        </div>


        <div class="card border-0 shadow-sm">

            <div class="card-body">

                <div class="table-responsive">

                    <table id="bannerTable" class="table table-hover align-middle w-100">

                        <thead class="table-light">

                            <tr>

                                <th>S.No</th>

                                <th>Date & Time</th>

                                <th>Image</th>

                                <th>Title</th>

                                <th>Status</th>

                                <th>Action</th>

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>

    {{-- VIEW BANNER IMAGE MODAL --}}
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-lg modal-dialog-centered">

            <div class="modal-content rounded-4 border-0">

                <div class="modal-header">

                    <h5 class="modal-title fw-bold" id="imageModalTitle">
                        Banner Image
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>

                </div>

                <div class="modal-body text-center p-3">

                    <img src="" id="previewBannerImage" alt="Banner Image" class="img-fluid rounded"
                        style="
                        max-height:70vh;
                        width:auto;
                        object-fit:contain;
                    ">

                </div>

            </div>

        </div>

    </div>

    {{-- STATUS MODAL --}}
    <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">
                    Change Status
                </h5>

                <p class="text-muted mb-0" id="statusMessage">
                    Are you sure you want to change status?
                </p>

                <form action="{{ route('update_banner_status') }}" method="POST" id="statusForm">

                    @csrf

                    <input type="hidden" name="id" id="status_banner_id">

                    <input type="hidden" name="status" id="status_value">

                    <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" class="btn btn-success p-3 fw-semibold" id="confirmStatusChange">

                            Yes, Change

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    {{-- DELETE BANNER MODAL --}}
    <div class="modal fade" id="deleteModal" 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">
                    Delete Banner
                </h5>

                <p class="text-muted">
                    Are you sure you want to delete this banner?
                </p>

                <form action="{{ route('delete_banner') }}" method="POST" id="DeleteForm">

                    @csrf

                    {{-- Hidden Banner ID --}}
                    <input type="hidden" name="banner_id" id="delete_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" class="btn btn-danger p-3 fw-semibold" id="confirmDeleteBtn">

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {

            $('#bannerTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: "{{ route('banner_data') }}",

                language: {
                    lengthMenu: '_MENU_'
                },

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],
                
                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

                    {
                        data: 'banner_image',
                        name: 'image',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'title',
                        name: 'title'
                    },

                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ],

                // Latest banner first
                order: [
                    [1, 'desc']
                ]

            });


            let bannerId = null;
            let currentStatus = null;


            // OPEN STATUS MODAL
            $(document).on('click', '.status-toggle', function(e) {

                // Prevent the checkbox from visually changing
                e.preventDefault();

                let button = $(this);

                let bannerId = button.data('id');

                let currentStatus = Number(
                    button.data('status')
                );

                $('#status_banner_id').val(bannerId);

                // Send opposite status
                $('#status_value').val(
                    currentStatus === 1 ? 0 : 1
                );

                if (currentStatus === 1) {

                    $('#statusMessage').text(
                        'Are you sure you want to deactivate this banner?'
                    );

                    $('#confirmStatusChange')
                        .removeClass('btn-success')
                        .addClass('btn-danger');

                } else {

                    $('#statusMessage').text(
                        'Are you sure you want to activate this banner?'
                    );

                    $('#confirmStatusChange')
                        .removeClass('btn-danger')
                        .addClass('btn-success');
                }

                // Show modal manually
                let modal = bootstrap.Modal.getOrCreateInstance(
                    document.getElementById('statusModal')
                );

                modal.show();

            });

            // VIEW BANNER IMAGE
            $(document).on('click', '.viewBannerImage', function() {

                let image = $(this).data('image');

                let title = $(this).data('title');


                $('#previewBannerImage')
                    .attr('src', image);


                $('#imageModalTitle').text(
                    title ? title : 'Banner Image'
                );


                let modal = new bootstrap.Modal(
                    document.getElementById('imageModal')
                );

                modal.show();

            });

            // STATUS FORM SUBMIT
            $(document).on('submit', '#statusForm', function() {

                const button = $('#confirmStatusChange');

                button
                    .prop('disabled', true)
                    .text('Updating...');

            });


            // DELETE BANNER
            $(document).on('click', '.deleteBtn', function() {

                let btn = $(this);

                let id = btn.data('id');

                let name = btn.data('name');


                // Set banner ID
                $('#delete_banner_id').val(id);


                // Update modal message
                $('#deleteModal')
                    .find('p')
                    .text(
                        'Are you sure you want to delete the banner "' +
                        name +
                        '"? This action cannot be undone.'
                    );


                // Show delete modal
                let modal = new bootstrap.Modal(
                    document.getElementById('deleteModal')
                );

                modal.show();

            });


            // DELETE FORM SUBMIT
            $(document).on('submit', '#DeleteForm', function() {

                let btn = $('#confirmDeleteBtn');

                btn
                    .prop('disabled', true)
                    .text('Deleting...');

            });

        });
    </script>
@endsection