@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: #e35a80!important;">
                        @if(isset($service))
                            Features for Service: {{ $service->TITLE }}
                        @else
                            Service Features
                        @endif
                    </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="feature-datatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Service</th>
                                    <th>Feature Type</th>
                                    <th>Title</th>
                                    <th>Display Order</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                            </table>
                            @menu('whitelabel_service_feature')
                            <div class="row mt-3">
                                <div class="col" style="text-align: center">
                                    @if(isset($service_id))
                                        <a class="btn btn-secondary" href="/operations/whitelabel/service">Back to Services</a>
                                        <a class="btn btn-info" href="/operations/whitelabel/service-feature/create?service_id={{ $service_id }}">Add New Feature</a>
                                    @else
                                        <a class="btn btn-info" href="/operations/whitelabel/service-feature/create">Add New Feature</a>
                                    @endif
                                </div>
                            </div>
                            @endmenu
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('warehouse_scripts')
<script>
    $(document).ready(function() {
        var table = $('#feature-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/operations/whitelabel/service-feature/datatable',
                data: function (d) {
                    @if(isset($service_id))
                        d.service_id = '{{ $service_id }}';
                    @endif
                }
            },
            columns: [
                { data: 'ID' },
                { data: 'service_name' },
                { data: 'FEATURE_TYPE' },
                { 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 feature?')) {
                var id = $(this).data('id');
                $.ajax({
                    url: '/operations/whitelabel/service-feature/' + 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 feature');
                    }
                });
            }
        });
    });
</script>
@endsection