@extends('operations.layout.mainlayout')

@section('content')
    <style>
        .btn-info{
            color: white !important;
        }
        .btn-outline-primary:hover,
        .btn-outline-info:hover,
        .btn-outline-danger:hover {
            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;">Services</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="service-datatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Language</th>
                                    <th>Title</th>
                                    <th>Slug</th>
                                    <th>Display Order</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                            </table>
                            @menu('whitelabel_service')
                            <div class="row mt-3">
                                <div class="col" style="text-align: center">
                                    <a class="btn btn-info" href="/operations/whitelabel/service/create">Add New Service</a>
                                </div>
                            </div>
                            @endmenu
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('warehouse_scripts')
<script>
    $(document).ready(function() {
        var table = $('#service-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: '/operations/whitelabel/service/datatable',
            columns: [
                { data: 'ID' },
                { data: 'LANG' },
                { data: 'TITLE' },
                { data: 'SLUG' },
                { 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,
                    render: function(data, type, row) {
                        return '<a href="/operations/whitelabel/service-feature?service_id=' + row.ID + '" class="btn btn-sm btn-outline-primary mr-1" title="Features"><i class="fas fa-list"></i> Features</a>' +
                               '<a href="/operations/whitelabel/service/' + row.ID + '/edit" class="btn btn-sm btn-outline-info mr-1" title="Edit"><i class="fas fa-edit"></i></a>' +
                               '<button class="btn btn-sm btn-outline-danger delete-btn" data-id="' + row.ID + '" title="Delete"><i class="fas fa-trash"></i></button>';
                    }
                }
            ],
            order: [[4, 'asc']]
        });

        $(document).on('click', '.delete-btn', function() {
            if(confirm('Are you sure you want to delete this service?')) {
                var id = $(this).data('id');
                $.ajax({
                    url: '/operations/whitelabel/service/' + 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 service');
                    }
                });
            }
        });
    });
</script>
@endsection