@extends('layouts.app')
@section('styles')
<link rel="stylesheet" href="{{ asset('assets/web/css/user-panel.css') }}">
@endsection
@section('content')
<section>
    <div class="main-wrapper pt-50"  style="min-height: calc(100vh - 513px);">
        <div class=" pb-50 section--bg">
            <div class="container">
                <div class="row justify-content-center gy-4">
                    <div class="col-xl-3 col-lg-6 col-md-8">
                        @include('include.side-nav')
                    </div>
                    <div class="col-xl-9 ps-xl-4">
                        <div class="custom--card mt-4">
                            <div class="card-body">
                                <div class="table-responsive--md">
                                    <table class="table custom--table">
                                        <thead>
                                            <tr>
                                                <th>Job Title</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($favouriteJob as $item)
                                                <tr>
                                                    <td data-label="Level Of Education">
                                                        <a href="{{ url('/job-details') }}/{{ $item->job_id}}">{{ $item->job->title}}</a>
                                                    </td>                                                    
                                                    <td>
                                                        <a href="javascript:void(0)" class="icon-btn bg--danger favouriteJob" data-toggle="modal" data-target="#exampleModal" data-id="{{$item->id}}"><i class="las la-trash-alt"></i></a>
                                                    </td>
                                                </tr>                            
                                            @empty
                                               <p>No Data</p>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>  
    </div>
</section>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{url('/favouritejob/delete')}}">
                @csrf
                <input type="hidden" name="id">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">@lang('Delete Confirmation')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @lang('Are you sure you want to remove this favorite job?')
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--secondary btn-sm" data-dismiss="modal">@lang('Close')</button>
                    <button type="submit" class="btn btn--primary btn-sm">@lang('Confirm')</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $('.favouriteJob').on('click', function(){
        var modal = $('#exampleModal');
        modal.find('input[name=id]').val($(this).data('id'));
        modal.show();
    })
</script>
@endsection