@extends('layouts.app')

@section('title', __('bms::lang.areas'))

@section('content')

<section class="content-header">
    <h1>@lang('bms::lang.areas')</h1>
</section>

<section class="content">
    @component('components.widget', ['class' => 'box-primary', 'title' => __('bms::lang.areas')])
        <p class="text-muted"><i class="fa fa-info-circle"></i> @lang('bms::lang.areas_auto_note')</p>

        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="bms_areas_table">
                <thead>
                    <tr>
                        <th>@lang('bms::lang.area')</th>
                        <th>@lang('bms::lang.area') (AR)</th>
                        <th>@lang('business.business_location')</th>
                        <th>@lang('bms::lang.status')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent

    <div class="modal fade bms_modal" tabindex="-1" role="dialog"></div>
</section>

@endsection

@section('javascript')
<script>
$(function () {
    var table = $('#bms_areas_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route('bms.areas.index') }}',
        columns: [
            { data: 'name', name: 'name' },
            { data: 'name_ar', name: 'name_ar', defaultContent: '—' },
            { data: 'location_id', name: 'location_id', orderable: false, searchable: false },
            { data: 'is_active', name: 'is_active', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
    });
    window.__bmsTables = window.__bmsTables || [];
    window.__bmsTables.push(table);
});
</script>
@include('bms::partials.crud_scripts')
@endsection
