@extends('admin.layouts.app')

@section('content')
@push('styles')
<style>
    div#myTable_filter {
    display: none;
}
#myTable{
    padding-left: 15px;
    padding-right: 15px;
}
#myTable_info{
    margin-left: 15px;
}
</style>
@endpush
        <div class="container-fluid py-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                        Staff Listing</li>
                </ol>
            </nav>
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        
            <div class="row mt-4">
                <div class="col-12">
                    <div class="row justify-content-between">
                        <div class="col-md-4">
                            {{-- <a class="btn bg-gradient-info mb-3" href="{{ route('admin.staff-listing.index') }}">Back</a> --}}
                        </div>
                        <div class="col-md-7">
                            <a class="btn bg-gradient-info mb-3" style="float: right;margin-right:15px;" href="{{ route('admin.staff-listing.create') }}">Add New
                                Staff</a>
                                <button id="exportCSV" class="btn btn-primary" style="margin-right: 15px;float: right;">Export as CSV</button>
                            <button id="deleteSelected" class="btn btn-danger" style="margin-right: 15px;float: right;">Delete Selected</button>
                            
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card pt-3 mb-4">
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="d-md-flex align-items-center justify-content-start px-3 mb-3">
                                <div class="table-top-right">
                                    <div class="input-group">
                                        <span class="input-group-text text-body"><i class="fas fa-search"
                                                aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" id="search_name" placeholder="Search">
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0" id="myTable">
                                    <thead>
                                        <tr>
                                             <th>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="selectAll">
                                                    {{-- <label class="form-check-label" for="selectAll">Select All</label> --}}
                                                </div>
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                SL.No</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Staff Code</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Staff Name</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Role</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Mobile No</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Status</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                   @if(count($staffs) > 0)
                                        @foreach($staffs as $staff)

                                        <tr>
                                        
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkbox{{ $staff->id }}" name="staff[]" value="{{ $staff->id }}">
                                                    <label class="form-check-label" for="checkbox{{ $staff->id }}"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <h6 class="mb-0 text-sm">{{ $loop->iteration }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">{{ $staff->staff_code }}</p>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">{{ $staff->staff_name }}</p>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">{{ $staff->role->name ?? 'Role not found' }}</p>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">{{ $staff->staff_mobile }}</p>
                                            </td>
                                            <td>
                                                <h6 style="margin-bottom: 0px !important;">
                                                    @if($staff->staff_status == 1)
                                                        <span class="badge bg-success">Active</span>
                                                    @else
                                                        <span class="badge bg-danger">InActive</span>
                                                    @endif
                                                </h6>
                                            </td>
                                             <td>
                                                <ul class="nav table-btn-group" style="flex-wrap: nowrap;">
                                                    <li class="nav-item" style="display: flex;
                                                    align-items: center;">
                                                        <a class="mb-0 mx-2" style="display: inline-block;"
                                                            href="{{ route('admin.staff-listing.edit', $staff->id) }}"><i class="fas fa-edit"></i></a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" role="button"
                                                            data-bs-toggle="modal" data-bs-target="#exampleModal{{ $staff->id }}"
                                                            href="#">Change Status</a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                       <div class="modal fade" id="exampleModal{{ $staff->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $staff->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <form action="{{ route('admin.staff-listing.status.update', ['id' => $staff->id]) }}" method="POST">
                                                    @csrf
                                                    <div class="modal-body pb-0">
                                                        <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel{{ $staff->id }}">Do you want to change the status ?</h1>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="inlineCheckboxYes{{ $staff->id }}" name="status" value="1">
                                                            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxYes{{ $staff->id }}">Active</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="inlineCheckboxNo{{ $staff->id }}" name="status" value="0">
                                                            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxNo{{ $staff->id }}">Inactive</label>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer border-0 pt-0">
                                                        <button type="submit" class="btn bg-gradient-info mb-0 mr-2 btn-sm">Confirm</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                        @endforeach
                                    @else
                                        <p>No data available</p>
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

<!-- Include SweetAlert CSS and JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script src="{{ asset('js/app.js') }}"></script>
<script>
$(document).ready(function() {
// Initialize DataTable when the document is ready
    let table = new DataTable('#myTable', {
        responsive: true, 
        pageLength: 20,
        dom: 'Bfrtip', // Add buttons
        buttons: ['copy'], // You can add more buttons like 'excel', 'pdf', etc.
    });

     // Add an event listener for the search input
     $('#search_name').on('input', function () {
            table.search(this.value).draw(); // Apply the search and redraw the table
        });

    });
  $(document).ready(function() {
    $('#selectAll').change(function() {
        $('input[name="staff[]"]').prop('checked', this.checked);
    });

    // Handle delete button click
    $('#deleteSelected').on('click', function() {
        const selectedIds = $('input[name="staff[]"]:checked').map(function() {
            return this.value;
        }).get();

        if (selectedIds.length === 0) {
            alert('Please select at least one record to delete.');
            return;
        }

        // Show SweetAlert confirmation
        swal({
            title: "Confirm Deletion",
            text: "Are you sure you want to delete the selected records?",
            icon: "warning",
            buttons: {
                cancel: "Cancel",
                confirm: "Delete"
            },
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                // User confirmed, send the selectedIds to your server using an AJAX POST request
                $.ajax({
                    url: '{{ route('admin.staff-listing.delete-selected') }}',
                    type: 'POST',
                    data: {
                        selectedIds: selectedIds,
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        if (response.success) {
                            // Handle successful deletion
                            swal("Success", "Selected records deleted successfully.", "success");
                            location.reload();
                            // You can also refresh the DataTable or update the table as needed.
                            // For example: table.ajax.reload();
                        } else {
                            swal("Error", "Failed to delete selected records.", "error");
                        }
                    },
                    error: function() {
                        swal("Error", "An error occurred while deleting records.", "error");
                    }
                });
            }
        });
    });

// Handle export CSV button click
$('#exportCSV').on('click', function() {
    const selectedIds = $('input[name="staff[]"]:checked').map(function() {
        return this.value;
    }).get();

    if (selectedIds.length === 0) {
        alert('Please select at least one record to export as CSV.');
        return;
    }

    // Send a request to the export route
    $.ajax({
        url: '{{ route('admin.staff-listing.export-csv') }}',
        type: 'POST',
        data: {
            selectedIds: selectedIds,
            _token: '{{ csrf_token() }}', // Include CSRF token for Laravel
        },
        xhrFields: {
            responseType: 'blob' // Ensure the response is treated as a blob
        },
        success: function(response, status, xhr) {
            if (response.size > 0) {
                // Create a blob URL and initiate the download
                const blob = new Blob([response], { type: 'text/csv' });
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'selected_records.csv';
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            } else {
                alert('Failed to export CSV.');
            }
        },
        error: function() {
            alert('An error occurred while exporting CSV.');
        }
    });
});

    });


    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-right",
    }
</script>
@endsection