@extends('admin.layouts.master')
@section('title') Career @endsection
@section('content')
<!-- Include SweetAlert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<div class="row">
    <div class="col-lg-12">
        <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Career List</h4>
                <!--<button type="button" class="btn btn-primary add-btn" data-bs-toggle="modal" data-bs-target="#exampleModalgrid">-->
                <!--                    <i class="ri-add-line align-bottom me-1"></i> Add-->
                <!--                </button>-->
            </div><!-- end card header -->
            <div class="card-body">
                <form action="{{ route('careers') }}" method="GET">
                    <div class="row g-3 mb-3">
                        <div class="col-sm-3">
                            <input type="text" name="designation" class="form-control" placeholder="Search by Designation" value="{{ request('designation') }}">
                        </div>
                        <div class="col-sm-3">
                            <input type="text" name="job_location" class="form-control" placeholder="Search by Job Location" value="{{ request('job_location') }}">
                        </div>
                        <div class="col-sm-3">
                            <input type="text" name="qualification" class="form-control" placeholder="Search by Qualification" value="{{ request('qualification') }}">
                        </div>
                        <div class="col-sm-3">
                            <button type="submit" class="btn btn-primary ">Filter</button>
                            <a href="{{ route('careers') }}" class="btn btn-secondary ">Reset</a>
                        </div>
                      
                    </div>
                </form>
            </div>
            <div class="card-body">
                <div class="listjs-table" id="customerList">
                    <div class="row g-4 mb-3">
                      
                        <!-- <div class="col-sm">
                            <div class="d-flex justify-content-sm-end">
                                <div class="search-box ms-2">
                                    <input type="text" class="form-control search" placeholder="Search...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                        </div> -->
                    </div>

                    <div class="table-responsive table-card mt-3 mb-1">
                        <table class="table align-middle table-nowrap" id="customerTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Sr. No.</th>
                                    <th>Designation</th>
                                    <th>Job Location</th>
                                    <th>Qualification</th>
                                    <th>Exprience</th>
                                    <!--<th>CV</th>-->
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all">
                                @if($careers->isEmpty())
                                <tr>
                                    <td colspan="5" class="text-center">
                                        <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px"></lord-icon>
                                        <h5 class="mt-2">Sorry! No Data Found</h5>
                                    </td>
                                </tr>
                                @else
                                @foreach($careers as $key => $row)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $row->designation }}</td>
                                    <td>{{ $row->job_location }}</td>
                                    <td>{{ $row->qualification }}</td>
                                    <td>{{ $row->experience }} Years</td>

                                    <!--<td class="cv-logo">-->
                                    <!--    <a href="{{ url('public/uploads/careers/' . $row->image) }}" download><strong>Download Job Profile Document</strong>-->
                                    <!--    </a>-->
                                    <!--</td>-->

                                    <td>
                                        <div class="d-flex gap-2">
                                            <a href="{{ route('careers.show', $row->id) }}" class="btn btn-sm btn-info">View</a>
                                            <!--<div class="edit">-->
                                            <!--    <button class="btn btn-sm btn-success edit-item-btn" data-bs-toggle="modal" data-bs-target="#exampleModalgrid"-->
                                            <!--        data-id="{{ $row->id }}"-->
                                            <!--        data-designation="{{ $row->designation }}"-->
                                            <!--        data-job_location="{{ $row->job_location }}"-->
                                            <!--        data-qualification="{{ $row->qualification }}"-->
                                            <!--        data-overview="{{ $row->overview }}"-->
                                            <!--        data-roles_n_responsibilities="{{ $row->roles_n_responsibilities }}"-->
                                            <!--        data-experience="{{ $row->experience }}">-->
                                            <!--        Edit-->
                                            <!--    </button>-->
                                            <!--</div>-->
                                            <!--<div class="remove">-->
                                            <!--    <a href="{{ route('career.delete', $row->id) }}" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure want to delete this?')">Remove</a>-->
                                            <!--</div>-->
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end">
                        {{ $careers->links() }}
                    </div>
                </div>
            </div><!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end col -->
</div>
<!-- end row -->

<!-- Add/Edit Modal -->
<div class="live-preview">
    <div class="modal fade" id="exampleModalgrid" tabindex="-1" aria-labelledby="exampleModalgridLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalgridLabel">Add/Update Career</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Add/Edit Modal Form -->
                    <form id="careeForm" method="POST" enctype="multipart/form-data">
                        @csrf <!-- Include CSRF token for protection -->
                        <input type="hidden" id="careerId" name="id"> <!-- Hidden input for Career ID (for editing) -->

                        <div class="row g-3">
                            <div class="col-xxl-12">
                                <div>
                                    <label for="designation" class="form-label">Designation <span class="text-danger">*</span></label>
                                    <input type="text" name="designation" class="form-control" id="designation" placeholder="Enter Career Designation" required>
                                </div>
                            </div><!-- end col -->

                            <div class="col-xxl-12">
                                <div>
                                    <label for="job_location" class="form-label">Job Location <span class="text-danger">*</span></label>
                                    <input type="text" name="job_location" class="form-control" id="job_location" placeholder="Enter Job Location" required>
                                </div>
                            </div><!-- end col -->

                            <div class="col-xxl-12">
                                <div>
                                    <label for="experience" class="form-label">Experience <span class="text-danger">*</span></label>
                                    <input type="text" name="experience" class="form-control" id="experience" placeholder="Enter Job Location" required>
                                </div>
                            </div><!-- end col -->
                            <div class="col-xxl-12">
                                <div>
                                    <label for="overview" class="form-label">Overview</label>
                                    <input type="text" name="overview" class="form-control" id="overview" placeholder="Enter Job Location">
                                </div>
                            </div><!-- end col -->

                            <div class="col-xxl-12">
                                <div>
                                    <label for="qualification" class="form-label">Qualification <span class="text-danger">*</span></label>
                                    <input type="text" name="qualification" class="form-control" id="qualification" placeholder="Enter Job Location" required>
                                </div>
                            </div><!-- end col -->
                            <div class="col-xxl-12">
                                <div>
                                    <label for="roles_n_responsibilities" class="form-label">Role & Responsibilities <span class="text-danger">*</span></label>
                                    <textarea name="roles_n_responsibilities" class="form-control" id="roles_n_responsibilities" placeholder="Enter small roles_n_responsibilities" required></textarea>
                                </div>
                            </div><!-- end col -->

                            <!--<div class="col-xxl-12">
                                <div>
                                    <label for="Cv" class="form-label">Job Profile Document (Optional)</label>
                                    <input type="file" name="image" class="form-control" id="Cv">
                                </div>
                            </div> end col -->
                            <div class="col-lg-12">
                                <div class="hstack gap-2 justify-content-end">
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div><!-- end col -->
                        </div><!-- end row -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteRecordModal" tabindex="-1" aria-labelledby="deleteRecordModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteRecordModalLabel">Delete Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

<!-- =============== Career Section Start ============== -->
<script>
    $(document).ready(function() {
        $('#careeForm').on('submit', function(e) {
            e.preventDefault();

            var formData = new FormData(this); // Create FormData to handle file upload
            var actionUrl;
            var method;

            // Check if it's an add or edit action
            if ($('#careerId').val() === "") {
                // Add career
                actionUrl = "{{ route('career.store') }}";
                method = 'POST';
            } else {
                // Edit career
                var careerId = $('#careerId').val();
                actionUrl = "{{ route('career.update', '') }}/" + careerId;
                method = 'POST';
            }

            // AJAX request
            $.ajax({
                url: actionUrl,
                type: method,
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        $('#exampleModalgrid').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                        location.reload(); // Reload page to update the table
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: response.message,
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: xhr.responseJSON.message,
                    });
                }
            });
        });

        // Handle edit action
        $('.edit-item-btn').on('click', function() {
            var careerId = $(this).data('id');
            var designation = $(this).data('designation');
            var qualification = $(this).data('qualification');
            var job_location = $(this).data('job_location');
            var experience = $(this).data('experience');
            var overview = $(this).data('overview');
            var roles_n_responsibilities = $(this).data('roles_n_responsibilities');

            // Populate form fields with the data for editing
            $('#careerId').val(careerId);
            $('#designation').val(designation);
            $('#qualification').val(qualification);
            $('#job_location').val(job_location);
            $('#experience').val(experience);
            $('#overview').val(overview);
            $('#roles_n_responsibilities').val(roles_n_responsibilities);
        });
    });
</script>
<!-- =============== Career Section End ============== -->
@endsection