@extends('operations.layout.mainlayout')

@section('content')

    <style>
        .btn-info{
            color: white !important;
        }
    </style>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Carousel Slides</h1>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="mx-auto col-md-10">
                    <div class="card">
                        <div class="card-body">
                            <table id="carousel-datatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Language</th>
                                    <th>Title</th>
                                    <th>Display Order</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                            </table>
                            @menu('whitelabel_carousel_slide')
                            <div class="row mt-3">
                                <div class="col" style="text-align: center">
                                    <a class="btn btn-info" href="/operations/whitelabel/carousel/create">Add New Slide</a>
                                </div>
                            </div>
                            @endmenu
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('warehouse_scripts')
<script>
    $(document).ready(function() {
        var table = $('#carousel-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: '/operations/whitelabel/carousel/datatable',
            columns: [
                { data: 'ID' },
                { 
                    data: 'LANG',
                    render: function(data, type, row) {
                        if (data === 'ar') {
                            return '<span class="badge badge-success">Arabic</span>';
                        } else {
                            return '<span class="badge" style="background-color: var(--blazma-primary); color: white;">English</span>';
                        }
                    }
                },
                { data: 'TITLE' },
                { data: 'DISPLAY_ORDER' },
                { 
                    data: 'IS_ACTIVE',
                    render: function(data) {
                        return data ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-danger">Inactive</span>';
                    }
                },
                { data: 'actions', orderable: false, searchable: false }
            ],
            order: [[3, 'asc']]
        });

        $(document).on('click', '.delete-btn', function() {
            if(confirm('Are you sure you want to delete this slide?')) {
                var id = $(this).data('id');
                $.ajax({
                    url: '/operations/whitelabel/carousel/' + id,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        table.ajax.reload();
                    },
                    error: function(xhr) {
                        alert('Error deleting slide');
                    }
                });
            }
        });
    });
</script>
@endsection