@extends('admin.layouts.app')

@section('title', __('admin/expenses.vendors_title'))

@section('content')
    <div class="container-fluid px-4">
        <x-admin.page-header
            :title="__('admin/expenses.vendors_title')"
            :subtitle="__('admin/expenses.vendors_subtitle')"
            icon="fas fa-truck"
            :buttons="[
                ['label' => __('admin/expenses.vendors_create'), 'id' => 'btnAddVendor', 'icon' => 'fas fa-plus', 'color' => 'primary'],
            ]"
        />

        <x-admin.card :padding="false">
            <x-admin.data-table
                id="vendorsTable"
                :records-url="route('api.admin.vendors.records')"
            >
                <th>{{ __('admin/expenses.vendors_col_name') }}</th>
                <th>{{ __('admin/expenses.vendors_col_contact') }}</th>
                <th>{{ __('admin/expenses.vendors_col_email') }}</th>
                <th>{{ __('admin/expenses.vendors_col_phone') }}</th>
                <th>{{ __('admin/expenses.categories_col_status') }}</th>
                <th>{{ __('admin/expenses.categories_col_usage') }}</th>
                <th>{{ __('admin/expenses.columns_actions') }}</th>
            </x-admin.data-table>
        </x-admin.card>
    </div>

    <x-admin.modal id="vendorModal" :title="__('admin/expenses.vendors_create')">
        <form id="vendorForm">
            <div class="mb-3">
                <label class="form-label">{{ __('admin/expenses.vendors_col_name') }} <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" maxlength="255" required>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('admin/expenses.vendors_col_contact') }}</label>
                <input type="text" name="contact_name" class="form-control" maxlength="255">
            </div>
            <div class="row g-2">
                <div class="col-md-6 mb-3">
                    <label class="form-label">{{ __('admin/expenses.vendors_col_email') }}</label>
                    <input type="email" name="email" class="form-control" maxlength="255">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">{{ __('admin/expenses.vendors_col_phone') }}</label>
                    <input type="text" name="phone" class="form-control" maxlength="50">
                </div>
            </div>
            <div class="form-check form-switch">
                <input type="checkbox" name="is_active" class="form-check-input" id="vendorActive" value="1" checked>
                <label class="form-check-label" for="vendorActive">{{ __('admin/expenses.field_active') }}</label>
            </div>
        </form>
        <x-slot:footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/common.buttons_cancel') }}</button>
            <button type="button" class="btn btn-primary" id="saveVendor">{{ __('admin/common.save') }}</button>
        </x-slot:footer>
    </x-admin.modal>

    <x-admin.modal id="deleteVendorModal" :title="__('admin/expenses.vendors_confirm_delete')">
        <p>{{ __('admin/expenses.vendors_confirm_delete_text') }}</p>
        <x-slot:footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/common.buttons_cancel') }}</button>
            <button type="button" class="btn btn-danger" id="confirmDeleteVendor">{{ __('admin/common.buttons_delete') }}</button>
        </x-slot:footer>
    </x-admin.modal>
@endsection

@push('scripts')
<script>
    window.pageConfig = window.pageConfig || {};
    window.pageConfig.routes = {
        store: '{{ route("api.admin.vendors.store") }}',
        update: '{{ route("api.admin.vendors.update", ":id") }}',
        delete: '{{ route("api.admin.vendors.destroy", ":id") }}',
    };
    window.permissions = {
        vendors: {
            view: {{ json_encode(auth()->user()->can('manage expense settings')) }},
            update: {{ json_encode(auth()->user()->can('manage expense settings')) }},
            delete: {{ json_encode(auth()->user()->can('manage expense settings')) }},
        },
    };
    window.translations = {
        create_title: '{{ __("admin/expenses.vendors_create") }}',
        edit_title: '{{ __("admin/expenses.vendors_edit") }}',
        status_active: '{{ __("admin/expenses.status_active") }}',
        status_inactive: '{{ __("admin/expenses.status_inactive") }}',
        buttons_edit: '{{ __("admin/common.buttons_edit") }}',
        buttons_delete: '{{ __("admin/common.buttons_delete") }}',
        save_error: '{{ __("admin/expenses.messages_save_error") }}',
    };
</script>
@vite('resources/js/admin/vendors/index.js')
@endpush
