@extends('dashboard.layouts.master')
@section('title', 'Business Management | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .filter-tab {
        padding: 7px 18px;
        border-radius: 20px;
        border: 1px solid #ddd;
        background: #fff;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .filter-tab:hover        { border-color: #002868; color: #002868; }
    .filter-tab.active       { background: #002868; color: #fff; border-color: #002868; }
    .filter-tab .tab-count   { background: rgba(255,255,255,0.25); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
    .filter-tab:not(.active) .tab-count { background: #eee; color: #666; }

    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
    .badge-success  { background: #d4edda; color: #155724; }
    .badge-danger   { background: #f8d7da; color: #721c24; }
    .badge-secondary{ background: #e2e3e5; color: #383d41; }
    
    /* Hide sorting icons on checkbox column */
    table.dataTable thead th:first-child:before,
    table.dataTable thead th:first-child:after { display: none !important; }
    table.dataTable thead th:first-child { background-image: none !important; cursor: default !important; }
</style>
@endpush

@section('content')
@if(Helper::canAccessModule('business_management'))

<div class="loader" id="loader"></div>
<div class="padding website-label">
    <div id="success_file_popup" style="margin-bottom:10px;"></div>

    <div class="box">
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Business Management</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Business Management</span>
                </small>
            </div>
        </div>

        <div class="row p-a">
            <div class="col-sm-3">
                <select id="category_filter" class="form-control c-select">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Status Filter Tabs --}}
        <div class="filter-tabs m-l m-b">
            <button class="filter-tab active" data-status="">
                All Businesses
                <span class="tab-count" id="cnt-all">—</span>
            </button>
            <button class="filter-tab" data-status="active">
                Active
                <span class="tab-count" id="cnt-active">—</span>
            </button>
            <button class="filter-tab" data-status="inactive">
                Inactive
                <span class="tab-count" id="cnt-inactive">—</span>
            </button>
            <button class="filter-tab" data-status="suspended">
                Suspended
                <span class="tab-count" id="cnt-suspended">—</span>
            </button>
        </div>

        <div class="table-responsive table_data">
            <table class="table table-bordered m-a-0" id="businessTable">
                <thead class="dker">
                    <tr>
                        <th class="width20 dker no-sort">
                            <label class="ui-check m-a-0">
                                <input id="checkAll" type="checkbox"><i></i>
                            </label>
                        </th>
                        <th>Business Name</th>
                        <th>Category</th>
                        <th>Status</th>
                        <th>Created Date</th>
                        <th class="no-sort text-center">Options</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

@else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script>window.location.replace(document.getElementById('redirect_url').value);</script>
@endif
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    let activeStatus = '';
    let categoryFilter = '';

    const table = $('#businessTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering: true,
        columnDefs: [{ bSortable: false, aTargets: [0, 5] }],
        ajax: {
            url: "{{ route('businesses.anyData') }}",
            type: 'POST',
            data: function(d) { 
                d.status = activeStatus; 
                d.category = categoryFilter;
            }
        },
        columns: [
            { data: 'checkbox',         orderable: false, searchable: false },
            { data: 'business_name',    name: 'business_name' },
            { data: 'category',         name: 'categories.name' },
            { data: 'status',           name: 'status' },
            { data: 'created_at',       name: 'created_at' },
            { data: 'options',          orderable: false, className: 'text-center' }
        ],
        order: [[4, 'desc']],
        drawCallback: function(settings) {
            loadTabCounts();
        }
    });

    // Filter tabs
    $(document).on('click', '.filter-tab', function() {
        $('.filter-tab').removeClass('active');
        $(this).addClass('active');
        activeStatus = $(this).data('status');
        table.ajax.reload();
    });

    // Category filter
    $('#category_filter').on('change', function() {
        categoryFilter = $(this).val();
        table.ajax.reload();
    });

    // Load counts for each tab
    function loadTabCounts() {
        const statuses = ['', 'active', 'inactive', 'suspended'];
        statuses.forEach(function(s) {
            $.post("{{ route('businesses.anyData') }}", {
                _token: "{{ csrf_token() }}",
                status: s,
                category: categoryFilter,
                start: 0,
                length: 1,
                draw: 1
            }, function(data) {
                const el = s === '' ? '#cnt-all' : '#cnt-' + s;
                $(el).text(data.iTotalRecords);
            });
        });
    }

    loadTabCounts();

    // Check all
    $('#checkAll').on('click', function() {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

    function showMsg(cls, msg) {
        $('#success_file_popup').html(
            '<div class="alert ' + cls + ' m-b-0"><button type="button" class="close" data-dismiss="alert">&times;</button>' + msg + '</div>'
        );
        setTimeout(() => $('#success_file_popup').empty(), 5000);
    }
</script>
@endpush