@extends('backend.layouts.app')

@section('title') 
    {{ __($module_action) }} {{ __($module_title) }} 
@endsection

@section('breadcrumbs')
<x-backend.breadcrumbs>
    <x-backend.breadcrumb-item type="active" :icon="$module_icon">
        {{ __($module_title) }}
    </x-backend.breadcrumb-item>
</x-backend.breadcrumbs>
@endsection

@section('content')
<div class="card">
    <div class="card-body">

        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i> {{ __($module_title) }} 
            <small class="text-muted">{{ __($module_action) }}</small>

            <x-slot name="subtitle">
                @lang(":module_name Management Dashboard", ['module_name'=>__(Str::title($module_name))])
            </x-slot>

            <x-slot name="toolbar">
                @can('add_'.$module_name)
                    <x-buttons.create 
                        :route="route('backend.'.$module_name.'.create')" 
                        :title="__('Create').' '.ucwords(Str::singular($module_name))" />
                @endcan

                @can('restore_'.$module_name)
                    <div class="btn-group">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-coreui-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-cog"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" :href="route('backend.'.$module_name.'.trashed')">
                                    <i class="fas fa-eye-slash"></i> @lang("View trash")
                                </a>
                            </li>
                        </ul>
                    </div>
                @endcan
            </x-slot>
        </x-backend.section-header>

        <div class="row mt-4">
            <div class="col">
                <table id="datatable" class="table table-bordered table-hover table-responsive-sm">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Business logo</th>
                            <th>Business Name</th>
                            <th>Sub Domain</th>
                            <th>Slug Url</th>
                            <th>Business Phone</th>
                            <th>Business Email</th>
                            <th>Status</th>
                            <th>Updated At</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push ('after-styles')
<link rel="stylesheet" href="{{ asset('vendor/datatable/datatables.min.css') }}">
@endpush

@push ('after-scripts')
<script type="module" src="{{ asset('vendor/datatable/datatables.min.js') }}"></script>

<script type="module">
    $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        autoWidth: true,
        ajax: '{{ route("backend.$module_name.index_data") }}',
        columns: [
            { data: 'id', name: 'id' },
            { 
                data: 'business_logo', 
                name: 'business_logo',
                render: function(data) {
                    return data ? `<img src="{{asset('business_images')}}/${data}" width="40" height="40" class="rounded-circle">` : '—';
                }
            },
            { data: 'business_name', name: 'business_name' },
            { data: 'sub_domain', name: 'sub_domain' },
            { data: 'url_slug', name: 'url_slug' },
            { data: 'business_phone', name: 'business_phone' },
            { data: 'business_email', name: 'business_email' },
            { 
                data: 'status', 
                name: 'status',
                render: function(data) {
                    return data == 1 
                        ? '<span class="badge bg-success">Active</span>' 
                        : '<span class="badge bg-danger">Inactive</span>';
                }
            },
            { data: 'updated_at', name: 'updated_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });
</script>
@endpush