invoices-table.blade.php

<div>
    <!-- Top Bar -->
    <div class="w-full flex justify-between">

        <div class="w-1/3 flex items-center space-x-4">

            <span class="flex-1">
                <x-input.search
                    wire:model="filters.search"
                    placeholder="Filter by Invoice Number..."/>
            </span>

            <span class="text-xs">
                <x-buttons.link wire:click="toggleShowFilters">
                    @if($showFilters)Hide @endif Advanced Filters
                </x-buttons.link>
            </span>

        </div>

        <div class="flex items-center space-x-4">
            <!-- Show/Hide -->
            <x-dropdown label="Show/Hide">
                <div class="p-4 bg-white space-y-2">
                    @foreach($columns as $col)
                        <div class="flex items-center">
                            <x-input.checkbox :label="$col['label']"
                                              wire:model="columns.{{$col['field']}}.visible"/>
                        </div>
                    @endforeach
                </div>
            </x-dropdown>

            <x-buttons.secondary wire:click="export">
                    <span class="flex">
                        @svg('solid/file-excel', 'mr-2 text-green h-4 w-4')
                        Export
                    </span>
            </x-buttons.secondary>

            <!-- Create New -->
            <x-buttons.secondary
                wire:click="create">
                    <span class="flex">
                        @svg('solid/plus', 'mr-2 text-green h-4 w-4')
                        New Invoice
                    </span>
            </x-buttons.secondary>
        </div>
    </div>

    <!-- Filters -->
    <div>
        @if($showFilters)
            <div class="bg-gray-200 p-4 rounded shadow-inner flex relative">

                <div class="w-1/4 pr-2 space-y-4">
                    <x-input.group inline for="filters.invc_number"
                                   label="Invc Number">
                        <x-input.text wire:model.lazy="filters.invc_number" />
                    </x-input.group>

                    <x-input.group inline for="filters.so_number"
                                   label="SO Number">
                        <x-input.text wire:model.lazy="filters.so_number" />
                    </x-input.group>

                    <x-input.group inline for="filters.invoice_date-min"
                                   label="Invoice Date Start">
                        <x-input.text wire:model.lazy="filters.invoice_date_min" />
                    </x-input.group>
                </div>

                <div class="w-1/4 pl-2 space-y-4">
                    <x-input.group inline for="filters.pn"
                                   label="Part Number">
                        <x-input.text wire:model.lazy="filters.pn" />
                    </x-input.group>

                    <x-input.group inline for="filters.company_name"
                                   label="Company">
                        <x-input.text wire:model.lazy="filters.company_name" />
                    </x-input.group>

                    <x-input.group inline for="filters.invoice_date_max"
                                   label="Invoice Date End">
                        <x-input.text wire:model.lazy="filters.invoice_date_max" />
                    </x-input.group>
                </div>

                <div class="w-1/4 pl-2 space-y-4">
                    <x-input.group inline for="filters.salesperson_code"
                                   label="Salesperson">
                        <x-input.text wire:model.lazy="filters.salesperson_code" />
                    </x-input.group>

                    <x-input.group inline for="filters.company_code"
                                   label="Company Code">
                        <x-input.text wire:model.lazy="filters.company_code" />
                    </x-input.group>

                    <x-input.group inline for="filters.post_date_min"
                                   label="Post Date Min Start">
                        <x-input.text wire:model.lazy="filters.post_date_min" />
                    </x-input.group>
                </div>

                <div class="w-1/4 pl-2 space-y-4">
                    <x-input.group inline for="filters.consignment_code"
                                   label="Lot Code">
                        <x-input.text wire:model.lazy="filters.consignment_code" />
                    </x-input.group>

                    <x-input.group inline for="filters.condition_code"
                                   label="Lot Code">
                        <x-input.text wire:model.lazy="filters.condition_code" />
                    </x-input.group>

                    <x-input.group inline for="filters.post_date_max"
                                   label="Post Date End">
                        <x-input.text wire:model.lazy="filters.post_date_max" />
                    </x-input.group>

                    <div>
                        <x-buttons.link
                            wire:click="resetFilters"
                            class="absolute right-0 bottom-0 p-4">
                            Reset Filters
                        </x-buttons.link>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <!-- Table -->
    <div class="mt-6 flex-col min-h-1/2 space-y-4">
        <x-table header>

            <x-slot name="head">
                @foreach($columns as $col)
                    @if($col['visible'])
                        <x-table.heading
                            :sortable="$col['sortable']"
                            wire:click="sortBy('{{$col['field']}}')"
                            :field="$col['field']"
                            :sortField="$sortField"
                            :direction="$sortDirection"
                            :key="time()">

                            {{$col['label']}}

                        </x-table.heading>
                @endif
                @endforeach

                <!-- CONTROLS -->
                <x-table.heading>{{$invoices->total()}}</x-table.heading>
            </x-slot>

            <x-slot name="body">
                @forelse ($invoices as $record)

                    <x-table.row wire:loading.class.delay="opacity-50"
                                 wire:key="row-{{ $record->id }}">

                        @if($columns['id']['visible'])
                            <x-table.text-cell
                                :value="$record->id" />
                        @endif

                        @if($columns['processed']['visible'])
                            <x-table.boolean-cell
                                :value="$record->processed" />
                        @endif

                        @if($columns['sta_auto_key']['visible'])
                            <x-table.text-cell
                                :value="$record->sta_auto_key" />
                        @endif

                        @if($columns['invc_number']['visible'])
                            <x-table.text-cell
                                :value="$record->invc_number" />
                        @endif

                        @if($columns['stm_auto_key']['visible'])
                            <x-table.text-cell
                                :value="$record->stm_auto_key" />
                        @endif

                        @if($columns['route_code']['visible'])
                            <x-table.text-cell class="w-8 text-center"
                                :value="$record->route_code" />
                        @endif

                        @if($columns['gross']['visible'])
                            <x-table.currency-cell
                                :value="$record->gross" />
                        @endif

                        @if($columns['net']['visible'])
                            <x-table.currency-cell
                                :value="$record->net" />
                        @endif

                        @if($columns['profit']['visible'])
                            <x-table.currency-cell :value="$record->profit" />
                        @endif

                        @if($columns['split_bands']['visible'])
                            <x-table.boolean-cell
                                :value="$record->split_bands" />
                        @endif

                        @if($columns['gp_percent_used']['visible'])
                            <x-table.text-cell
                                :value="$record->gp_percent_used" />
                        @endif

                        @if($columns['consignment_code']['visible'])
                            <x-table.text-cell
                                :value="$record->consignment_code" />
                        @endif

                        @if($columns['salesperson_code']['visible'])
                            <x-table.text-cell
                                :value="$record->salesperson_code" />
                        @endif

                        @if($columns['so_number']['visible'])
                            <x-table.text-cell
                                :value="$record->so_number" />
                        @endif

                        @if($columns['invoice_date']['visible'])
                                <x-table.text-cell
                                    :value="$record->invoice_date_for_editing" />
                            @endif

                        @if($columns['post_date']['visible'])
                            <x-table.text-cell
                                :value="$record->post_date_for_editing" />
                        @endif

                        @if($columns['ship_date']['visible'])
                        <x-table.text-cell
                            :value="$record->ship_date_for_editing" />
                    @endif

                        @if($columns['post_status']['visible'])
                            <x-table.text-cell
                                :value="$record->post_status" />
                        @endif

                        @if($columns['cat']['visible'])
                                <livewire:invoices.cat-cell
                                    :invid="$record->id"
                                    :key="$record->id" />
                        @endif

                        @if($columns['pn']['visible'])
                            <x-table.text-cell
                                :value="$record->pn" />
                        @endif

                        @if($columns['serial_number']['visible'])
                            <x-table.text-cell
                                :value="$record->serial_number" />
                        @endif

                        @if($columns['description']['visible'])
                            <x-table.text-cell
                                :value="$record->description" />
                        @endif

                        @if($columns['qty_invoiced']['visible'])
                            <x-table.text-cell class="w-12 text-center"
                                :value="$record->qty_invoiced" />
                        @endif

                        @if($columns['unit_price']['visible'])
                            <x-table.currency-cell
                                :value="$record->unit_price" />
                        @endif

                        @if($columns['unit_cost']['visible'])
                            <x-table.currency-cell
                                :value="$record->unit_cost" />
                        @endif

                        @if($columns['unit_freight_cost']['visible'])
                            <x-table.currency-cell
                                :value="$record->unit_freight_cost" />
                        @endif

                        @if($columns['cost']['visible'])
                            <x-table.currency-cell
                                :value="$record->cost" />
                        @endif

                        @if($columns['condition_code']['visible'])
                            <x-table.text-cell
                                :value="$record->condition_code" />
                        @endif

                        @if($columns['region']['visible'])
                            <livewire:invoices.region-cell
                                :invid="$record->id"
                                :key="$record->id" />
                        @endif

                        @if($columns['customer_type']['visible'])
                                <livewire:invoices.type-cell
                                    :invid="$record->id"
                                    :key="$record->id" />
                        @endif

                        @if($columns['company_name']['visible'])
                            <x-table.text-cell
                                :value="$record->company_name" />
                        @endif

                        @if($columns['company_code']['visible'])
                            <x-table.text-cell
                                :value="$record->company_code" />
                        @endif

                        <!-- CONTROLS -->
                        <x-table.cell class="pr-2 flex items-center space-x-2">

                            <!--EDIT-->
                            <span class="cursor-pointer"
                                  data-wenk="edit"
                                  wire:click="edit({{ $record->id }})">
                                @svg('solid/pencil-alt', 'text-blue h-4 w-4')
                            </span>
                            <!-- DELETE -->
                            <span>
                                <x-modals.delete-confirm
                                    tooltip="delete"
                                    action="delete({{$record->id}})" />
                            </span>
                        </x-table.cell>

                    </x-table.row>

                @empty
                    <x-table.row>
                        <x-table.cell
                            colspan="{{collect($columns)->where('visible', true)->count()}}">
                            <div class="flex justify-center items-center space-x-2">
                                <x-icon.inbox class="h-8 w-8 text-gray-400"/>
                                <span class="font-medium py-8 text-gray-400 text-xl">
                                            No invoices found...
                                        </span>
                            </div>
                        </x-table.cell>
                    </x-table.row>
                @endforelse
            </x-slot>

        </x-table>
    </div>

    <div>
        {{ $invoices->links() }}
    </div>

    <!-- Save Modal -->
    <form wire:submit.prevent="submit">
        <x-modals.dialog class="w-3/4"
            wire:model.defer="showEditModal">

            <x-slot name="title"></x-slot>

            <x-slot name="content">
                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="invc_number"
                            label="Invc Num">
                            <x-input.text
                                wire:model.lazy="single.invc_number" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="salesperson_code"
                            label="Sales Person">
                            <x-input.text
                                wire:model.lazy="single.salesperson_code" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="single.so_number"
                            label="SO Number">
                            <x-input.text
                                wire:model.lazy="single.so_number" />
                        </x-forms.vee-group>
                    </div>
                </div>

                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="company_code"
                            label="Cmp Code">
                            <x-input.text
                                wire:model.lazy="single.company_code" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="company_name"
                            label="Company">
                            <span class="text-xs">{{$single['company_name']}}</span>
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="single.so_number"
                            label="SO Number">
                            <x-input.text
                                wire:model.lazy="single.so_number" />
                        </x-forms.vee-group>
                    </div>
                </div>

                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="pn"
                            label="Part Number">
                            <x-input.text
                                wire:model.lazy="single.pn" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="serial_number"
                            label="MSN">
                            <x-input.text
                                wire:model.lazy="single.serial_number" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="single.description"
                            label="Description">
                            <span class="text-xs">{{$single['description']}}</span>
                        </x-forms.vee-group>
                    </div>
                </div>

                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="consignment_code"
                            label="Lot Code">
                            <x-input.text
                                wire:model.lazy="single.consignment_code" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="route_code"
                            label="Route">
                            <x-input.text
                                wire:model.lazy="single.route_code" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="gp_percent_used"
                            label="GP Rate">
                            <x-input.text
                                wire:model.lazy="single.gp_percent_used" />
                        </x-forms.vee-group>
                    </div>
                </div>

                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="gross"
                            label="Gross">
                            <x-input.text
                                wire:model.lazy="single.gross" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="net"
                            label="Net">
                            <x-input.text
                                wire:model.lazy="single.net" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="profit"
                            label="Profit">
                            {{$single['profit']}}
                        </x-forms.vee-group>
                    </div>
                </div>

                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="invoice_date"
                            label="Invc Date">
                            <x-input.date
                                wire:model.lazy="single.invoice_date_for_editing" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="post_date"
                            label="Post Date">
                            <x-input.date
                                wire:model.lazy="single.post_date_for_editing" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="ship_date"
                            label="Ship Date">
                            <x-input.date
                                wire:model.lazy="single.ship_date_for_editing" />
                        </x-forms.vee-group>
                    </div>
                </div>

                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="qty_invoiced"
                            label="Quantity">
                            <x-input.text
                                wire:model.lazy="single.qty_invoiced" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="unit_price"
                            label="Unit Price">
                            <x-input.text
                                wire:model.lazy="single.unit_price" />
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="unit_cost"
                            label="Unit Cost">
                            <x-input.text
                                wire:model.lazy="single.unit_cost" />
                        </x-forms.vee-group>
                    </div>
                </div>

                <div class="mb-2 flex items-center">
                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="region"
                            label="Region">
                            <x-input.select wire:model="single.region">
                                <option value="">Select</option>
                                <option value="AMER">AMER</option>
                                <option value="EMEA">EMEA</option>
                                <option value="ASIA">ASIA</option>
                            </x-input.select>
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="customer_type"
                            label="Type">
                            <x-input.select wire:model="single.customer_type">
                                <option value="">Select</option>
                                <option value="MRO">MRO</option>
                                <option value="Airline">Airline</option>
                                <option value="OEM">OEM</option>
                                <option value="Broker">Broker</option>
                                <option value="Other">Other</option>
                            </x-input.select>
                        </x-forms.vee-group>
                    </div>

                    <div class="mx-2 w-1/3">
                        <x-forms.vee-group
                            for="cat"
                            label="CAT">
                            <x-input.select wire:model="single.cat">
                                <option value="">Select</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="5">5</option>
                                <option value="7">7</option>
                                <option value="APU">APU</option>
                                <option value="ENG">ENG</option>
                                <option value="LG">LG</option>
                                <option value="NHA">NHA</option>
                                <option value="QEC">QEC</option>
                                <option value="TR">TR</option>
                                <option value="Other">Other</option>
                            </x-input.select>
                        </x-forms.vee-group>
                    </div>
                </div>

            </x-slot>

            <x-slot name="footer">
                <x-buttons.secondary
                    wire:click="$set('showEditModal', false)">
                    Cancel
                </x-buttons.secondary>

                <x-buttons.primary type="submit">
                    Save
                </x-buttons.primary>
            </x-slot>

        </x-modals.dialog>
    </form>
</div>