<div>
    <div class="row">
        <div class="col-md-6 d-flex justify-content-between mt-2 mb-2">
            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Jobs</h4>
        </div>

        <div class="col-md-6 d-flex justify-content-end">
            <div class="col-md-9 mb-4">
                <input type="text" wire:model.live.debounce.300ms="search" value="" name="search" placeholder="Search" class="form-control search">
            </div>
        </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.createJob')}}" class="btn btn-primary" 
                    ><strong><i class="bx bx-plus"></i>
                    Post Job</strong></a>

                <a href="{{route('admin.reports.jobs')}}" class="btn btn-primary" style="margin-left: 10px;" 
                    ><strong><i class="bx bx-down-arrow-alt"></i>
                    Download</strong></a>
            </div>
            <div class="table-responsive text-wrap">
                <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Company</th>
                        <th>Type</th>
                        {{-- <th>Salary</th> --}}
                        <th>Location</th>
                        <th>Clicks</th>
                        <th>Views</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @forelse ($jobs as $job)
                        <tr wire:key="job-row-{{ $job->id }}">
                            <td>{{$job->id}}</td>
                            <td>{{$job->title}}</td>
                            <td>{{$job->company?->name ?? "-"}}</td>
                            <td><span class="badge {{$job->type == 'Full Time'? "bg-label-secondary": 'bg-label-info'}}">
                                {{$job->type}}</span>
                            </td>
                            {{-- <td>{{$job->currency ?? '$'}} {{$job->min_salary > 0 ? ($job->min_salary.' - ') : ''}}{{$job->max_salary}}<span>/year</span></td> --}}
                            <td>{{$job->location}}</td>
                            <td>{{$job->clicks_count ?? 0}}</td>
                            <td>{{$job->views_count ?? 0}}</td>
                            <td><span class="badge {{$job->status == 1 ? "bg-label-success": 'bg-label-primary'}}">
                                {{$job->status == 1 ? 'Enabled' : 'Disabled'}}</span>
                            </td>
                            <td style="width: 17%;">
                                <a href="javascript:;" wire:click="updateStatus({{$job->id}})" title="Change Status">
                                    @if($job->status == 1)
                                        <i class="bx bx-check btn btn-success btn-xs"></i>
                                    @else
                                        <i class="bx bx-x btn btn-warning btn-xs"></i>
                                    @endif
                                </a>
                                <a href="{{url('admin/jobs/detail/' . $job->id)}}" title="View Detail">
                                    <i class="bx bx-show btn btn-primary btn-xs"></i>
                                </a>
                                <a href="{{url('admin/jobs/edit/' . $job->id)}}" title="Edit">
                                    <i class="bx bx-edit btn btn-warning btn-xs"></i>
                                </a>
                                <a href="javascript:void(0);" class="delete" data-id="{{$job->id}}" title="Delete">
                                    <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>
                <div>
                    {{ $jobs->links('livewire.pagination') }}
                </div>
            </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 may effect on jobs listings",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    @this.call('delete', id)
                }
            });
        }

        $(document).on('click', '.delete', function(e) {
            e.preventDefault();

            // If icon is clicked instead of <a>, this ensures we still get correct data-id
            const id = $(e.target).closest('.delete').data('id');
            confirmDelete(id);
        });


    });
</script>
@endsection