@extends('layouts.layoutMaster')

@section('title', __('Customers'))

@section('vendor-style')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

@section('vendor-script')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection

@section('content')
<x-breadcrumb
    :title="__('Customers')"
    :breadcrumbs="[
        ['name' => __('System Core'), 'url' => route('systemcore.dashboard')],
        ['name' => __('Customers')]
    ]"
/>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{{ __('Customers') }}</h5>
        <a href="{{ route('systemcore.customers.create') }}" class="btn btn-primary">
            <i class="bx bx-plus"></i> {{ __('Add Customer') }}
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="customersTable" class="table table-hover">
                <thead>
                    <tr>
                        <th>{{ __('Customer Code') }}</th>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Email') }}</th>
                        <th>{{ __('Phone') }}</th>
                        <th>{{ __('Customer Type') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
const pageData = {
    urls: {
        datatable: '{{ route("systemcore.customers.ajax") }}',
        store: '{{ route("systemcore.customers.store") }}',
        update: (id) => '{{ route("systemcore.customers.index") }}/' + id,
        destroy: (id) => '{{ route("systemcore.customers.index") }}/' + id
    },
    labels: {
        comingSoon: @json(__('Coming Soon')),
        addCustomerMessage: @json(__('Add customer functionality will be implemented soon')),
        ok: @json(__('OK')),
        confirmDelete: @json(__('Are you sure?')),
        deleteWarning: @json(__('You will not be able to recover this customer!')),
        yesDelete: @json(__('Yes, delete it!')),
        cancel: @json(__('Cancel')),
        success: @json(__('Success')),
        deleteSuccess: @json(__('Customer deleted successfully')),
        error: @json(__('Error')),
        deleteError: @json(__('Failed to delete customer')),
        // DataTable language labels
        search: @json(__('Search')),
        searchPlaceholder: @json(__('Search customers...')),
        processing: @json(__('Processing...')),
        lengthMenu: @json(__('Show _MENU_ entries')),
        info: @json(__('Showing _START_ to _END_ of _TOTAL_ entries')),
        infoEmpty: @json(__('No entries to show')),
        infoFiltered: @json(__('(filtered from _MAX_ total entries)')),
        emptyTable: @json(__('No data available')),
        zeroRecords: @json(__('No matching records found')),
        paginate: {
            first: @json(__('First')),
            last: @json(__('Last')),
            next: @json(__('Next')),
            previous: @json(__('Previous'))
        }
    }
};
</script>
@vite(['Modules/SystemCore/resources/assets/js/customers.js'])
@endsection