@extends('layouts.app')

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => $title])

<div class="row mt-4 mx-4">
    <div class="col-12">
        <div class="card mb-4">
            <div class="d-flex align-items-center">
                <p class="mb-0 ms-2 mt-2">{{$title}}</p>
                <a href="{{route('add-paystructure')}}" class="btn btn-primary btn-sm ms-auto me-2 mt-2">Add</a>
                <!-- <form method="GET" action="#">
                        <button type="submit" class="btn btn-primary btn-sm ms-auto me-2 mt-2">Bulk Import</button>
                    </form> -->
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0" id="myTable">
                        <thead>
                            <tr>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    #</th>
                                    <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Pay Name</th>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Designation</th>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Experience</th>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Basic Salary</th>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($pay_structures as $index => $data)
                                <tr>
                                    <td class="align-middle text-center text-sm">
                                        <p class="text-sm font-weight-bold mb-0">{{$index + 1}}</p>
                                    </td>
                                    <td class="align-middle text-center text-sm">
                                        <p class="text-sm font-weight-bold mb-0">
                                            {{$data->name ?? NA}}</p>
                                    </td>
                                    <td class="align-middle text-center text-sm">
                                        <p class="text-sm font-weight-bold mb-0">
                                            {{$data->designation->staff_type_name ?? NA}}</p>
                                    </td>
                                    <td class="align-middle text-center text-sm">
                                        <p class="text-sm font-weight-bold mb-0">{{$data->experience ?? NA}}</p>
                                    </td>
                                    <td class="align-middle text-center text-sm">
                                        <p class="text-sm font-weight-bold mb-0">{{$data->basic_salary ?? NA}}</p>
                                    </td>
                                    <td class="align-middle text-end">
                                        <div class="d-flex px-3 py-1 justify-content-center align-items-center">
                                            <a href="{{url('edit-load/' . $data->id)}}" class="text-success mx-2"
                                                title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a class="text-danger" data-bs-toggle="modal"
                                                data-bs-target="#deleteConfirmationModal" title="Delete"
                                                data-id="{{ $data->id }}">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center">No data found</td>
                                </tr>
                            @endforelse

                            <!-- You can duplicate the above row for more entries -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            Are you sure you want to delete this pay structure? <br>Please note, if you proceed with the deletion, all
            staff currently assigned to this pay structure will be reverted. This action cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">Delete</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>

    document.addEventListener('DOMContentLoaded', function () {
        let payStructureId;

        $('#deleteConfirmationModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            payStructureId = button.data('id');
        });

        document.getElementById('confirmDeleteButton').addEventListener('click', function () {
            if (payStructureId) {
                $.ajax({
                    url: '/paystructure-delete/' + payStructureId,
                    type: 'GET',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function (response) {
                        $('#deleteConfirmationModal').modal('hide');
                        location.reload(); 
                        toastr.success('Pay structure deleted successfully.');
                    },
                    error: function (xhr, status, error,response) {
                        $('#deleteConfirmationModal').modal('hide');
                        toastr.error(xhr.responseJSON[0]);
                    }
                });
            }
        });
    });
</script>
@endpush