invoices-manager.blade.php

<div class="px-4 py-6">
    <x-page.header title="Invoices Manager"></x-page.header>

    <div class="flex justify-between items-center">
        <div class="w-1/3 flex items-center">
            <x-form.vee-group
                for="start"
                label="From"
                class="m-8 w-full">
                <x-input.text
                    wire:model.lazy="start"></x-input.text>
            </x-form.vee-group>
        </div>
        <div class="w-1/3 flex items-center">
            <x-form.vee-group
                for="end"
                label="Through"
                class="w-full">
                <x-input.text
                    wire:model.lazy="end"></x-input.text>
            </x-form.vee-group>
        </div>

        <div class="w-1/3">
            <x-form.vee-group for="sales" label="By Salesperson">
                <x-input.select wire:model="sales">
                    <option value="">All</option>
                    @foreach($salesTeam as $sp)
                        <option>{{$sp}}</option>
                    @endforeach
                </x-input.select>
            </x-form.vee-group>
        </div>
    </div>

    <div class="flex justify-center items-center">
        <span class="relative z-0 inline-flex shadow-sm rounded-md">
          <button type="button" class="relative inline-flex items-center p-4 rounded-l-md border border-gray-300 bg-white text-xl leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-blue-500 active:text-white transition ease-in-out duration-150"
                  wire:click="$set('showTable', true)">
              @svg('solid/dog', 'mr-2')
              Fetch
          </button>

          <button type="button" class="-ml-px relative inline-flex items-center p-4 border border-gray-300 bg-white text-xl leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-blue-500 active:text-white transition ease-in-out duration-150">
              @svg('solid/cloud-download-alt', 'mr-2')
              Download
          </button>

          <button type="button" class="-ml-px relative inline-flex items-center p-4 rounded-r-md border border-gray-300 bg-white text-xl leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-blue-500 active:text-white transition ease-in-out duration-150"
                  wire:click="$set('showTable', false)">
              @svg('solid/times', 'mr-2')
              Clear
          </button>
        </span>
    </div>

    <div class="mb-8">
        @if($showTable)
            @livewire('invoices.invoices-table', [
                'start' => $start,
                'end' => $end,
                'sales' => $sales
            ])
        @endif
    </div>
</div>