@extends('layouts.layoutMaster')

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

@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',
    'resources/assets/vendor/libs/select2/select2.scss'
])
@endsection

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

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

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{{ __('Products') }}</h5>
        @can('systemcore.create-product')
        <a href="{{ route('systemcore.products.create') }}" class="btn btn-primary">
            <i class="bx bx-plus"></i> {{ __('Add Product') }}
        </a>
        @endcan
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">{{ __('Category') }}</label>
                <select id="filterCategory" class="select2 form-select" data-placeholder="{{ __('All Categories') }}">
                    <option value="">{{ __('All Categories') }}</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">{{ __('Warehouse') }}</label>
                <select id="filterWarehouse" class="select2 form-select" data-placeholder="{{ __('All Warehouses') }}">
                    <option value="">{{ __('All Warehouses') }}</option>
                    @foreach($warehouses as $warehouse)
                        <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="table-responsive">
            <table id="productsTable" class="table table-hover">
                <thead>
                    <tr>
                        <th>{{ __('Image') }}</th>
                        <th>{{ __('Product Code') }}</th>
                        <th>{{ __('SKU') }}</th>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Category') }}</th>
                        <th>{{ __('Stock') }}</th>
                        <th>{{ __('Base Price') }}</th>
                        <th>{{ __('Selling Price') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
const pageData = {
    urls: {
        datatable: '{{ route("systemcore.products.ajax") }}',
        destroy: (id) => '{{ route("systemcore.products.index") }}/' + id
    },
    labels: {
        searchPlaceholder: @json(__('Search products...')),
        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')),
        confirmDelete: @json(__('Are you sure?')),
        deleteWarning: @json(__('You will not be able to recover this product!')),
        yesDelete: @json(__('Yes, delete it!')),
        cancel: @json(__('Cancel')),
        success: @json(__('Success')),
        deleteSuccess: @json(__('Product deleted successfully')),
        error: @json(__('Error')),
        deleteError: @json(__('Failed to delete product')),
        paginate: {
            first: @json(__('First')),
            last: @json(__('Last')),
            next: @json(__('Next')),
            previous: @json(__('Previous'))
        }
    }
};
</script>
@vite(['Modules/SystemCore/resources/assets/js/products.js'])
@endsection
