<div>
    <div class="row align-items-end">
        <div class="col-md-3 d-flex justify-content-between mt-2 mb-2">
            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Companies</h4>
        </div>

        <div class="col-md-3 mb-3">
            <label class="form-label">Registered From</label>
            <input type="date" wire:model.defer="registeredFrom" class="form-control">
            @error('registeredFrom')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <div class="col-md-3 mb-3">
            <label class="form-label">Registered To</label>
            <input type="date" wire:model.defer="registeredTo" class="form-control">
            @error('registeredTo')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <div class="col-md-12 d-flex justify-content-end mb-2">
            <a href="javascript:;" wire:click="applyFilters" class="btn btn-primary btn-sm me-2">Filter</a>
            <a href="javascript:;" wire:click="clearFilters" class="btn btn-outline-secondary btn-sm">Clear Filters</a>
        </div>
    </div>
    <!-- Striped Rows -->
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-end mb-2 mt-0">
                <a href="{{route('admin.exportUsers')}}" class="btn btn-primary" style="color: white"><strong>Export</strong></a>
            </div>
            <div class="table-responsive text-nowrap">
                <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Logo</th>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Country</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @forelse ($companies as $company)
                        <tr>
                            <td>{{$company?->id}}</td>
                            <td><img src="{{$company?->logo?? asset('images/placeholder.png')}}" class="listing-img"/></td>
                            <td>{{$company?->name}}</td>
                            <td>{{$company?->type}}</td>
                            <td>{{$company?->country ?? "-"}}</td>
                            <td style="width: 15%;">
                                <a href="{{url('admin/companies/detail/' . $company?->user?->id)}}">
                                    <i class="bx bx-show btn btn-primary btn-xs"></i>
                                </a>
                                <a href="javascript:void(0);" class="delete" data-id="{{$company?->id}}">
                                    <i class="bx bx-trash btn btn-danger btn-xs"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">No record found</td>
                        </tr>
                    @endforelse
                </tbody>
                </table>
                @if (count($companies) > 0)
                    <div>
                    {{ $companies->links('livewire.pagination') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function(){
        function confirmDelete(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This will also remove the linked user and thier listings",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    @this.call('delete', id)
                }
            });
        }

        $(".delete").on('click', function(){
            confirmDelete($(this).data('id'))
        })
    });
</script>
@endsection