@extends('layouts.app')

@section('title', 'Queue Management')

@push('styles')
<style>
   .dataTables_wrapper:before {
   content: 'Queue';
   }

   .queue-table01 input{
    height: 20px;
   }
   
   .select2-container {
        width: 100% !important;
   }
</style>
@endpush

@section('content')

<div class="loadPages01">
    <div class="actionsHeader filterHeader">
        <ul class="ml-auto">
            @can('queue.create')
            <li>
                <button data-toggle="modal" data-target="#createModal" class="btn btn-block btn-add">
                    <i class="las la-plus"></i> Add New
                </button>
            </li>
            @endcan
        </ul>
    </div>

   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 pd-t-6 pd-b-6 viewContainer">
      <div class="table-distributor">
         <table id="queue-list" class="table queue-table01 table-striped table-hover table-bordered p-table app-datatable table-sm text-nowrap dt-responsive w-10" >
            <thead>
               <tr class="distributor-tr01">
                  <th>#</th>
                  <th>Name</th>
                  <th>Type</th>
                  <th>Status</th>
                  <th>Created At</th>
                  <th>Actions</th>
               </tr>
            </thead>
         </table>
      </div>
   </div>
</div>

<!-- Add Queue Modal -->
@push('modals')
@can('queue.create')
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Queue</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="queue_add_form" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Queue Name <span class="asterisk">*</span></label>
                        <input required name="name" minlength="2" type="text" class="form-control" placeholder="Queue Name">
                    </div>
                    
                    <div class="form-group">
                        <label>Queue Type <span class="asterisk">*</span></label>
                        <select required name="is_default" class="form-control">
                            <option value="0">Custom Queue</option>
                            <option value="1">System Queue</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="btn_save">
                        <i class="las la-save"></i> Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan

<!-- Edit Queue Modal -->
@can('queue.edit')
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Queue</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="edit_form" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_queue_id">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Queue Name <span class="asterisk">*</span></label>
                        <input required name="name" minlength="2" type="text" class="form-control" id="edit_name" placeholder="Queue Name">
                    </div>
                    
                    <div class="form-group">
                        <label>Queue Type <span class="asterisk">*</span></label>
                        <select required name="is_default" class="form-control" id="edit_is_default">
                            <option value="0">Custom Queue</option>
                            <option value="1">System Queue</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="btn_update">
                        <i class="las la-save"></i> Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan
@endpush

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var errorShown = false;
    var table = $('#queue-list').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('masters.queue.index') }}",
        type: "GET",
        error: function(xhr, error, thrown) {
            if (errorShown) return;
            errorShown = true;

            if (xhr.status === 403) {
                toastr.error(xhr.responseJSON?.message || 'Access denied: No permission');
                table.clear().draw();
                setTimeout(() => { errorShown = false; }, 5000);
            }
            else if (xhr.status === 401) {
                toastr.error('Please login to access this page.');
                window.location.href = "{{ route('admin.login') }}";
            }
            else if (xhr.status === 500) {
                toastr.error('Server error. Please try again later.');
                setTimeout(() => { errorShown = false; }, 10000);
            }
            else {
                toastr.error('Failed to load queue data.');
                setTimeout(() => { errorShown = false; }, 5000);
            }
        }
    },
    columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
        { data: 'name', name: 'name' },
        { 
            data: 'is_default', 
            name: 'is_default',
            orderable: false,
            searchable: false
        },
        { 
            data: 'is_delete', 
            name: 'is_delete',
            orderable: false,
            searchable: false
        },
        { 
            data: 'created_at', 
            name: 'created_at'
        },
        { 
            data: 'actions', 
            name: 'actions', 
            orderable: false, 
            searchable: false
        }
    ],
    order: [[1, 'asc']],
    responsive: true,
    language: {
        processing: '<i class="fa fa-spinner fa-spin"></i> Loading...'
    }
});

    // Add Queue Form Submission
    $('#queue_add_form').on('submit', function(e) {
        e.preventDefault();
        var $btn = $('#btn_save');
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
        
        $.ajax({
            url: "{{ route('masters.queue.store') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(response) {
                if (response.status) {
                    $('#createModal').modal('hide');
                    $('#queue_add_form')[0].reset();
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission to create queue.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while creating queue.');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="las la-save"></i> Save');
            }
        });
    });

    // Edit Queue - Show Modal
    $(document).on('click', '.btn-edit-queue', function() {
        var queueId = $(this).data('id');
        
        $.ajax({
            url: "{{ route('masters.queue.fetch') }}",
            method: "POST",
            data: { 
                id: queueId,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.status) {
                    $('#edit_queue_id').val(response.data.eid);
                    $('#edit_name').val(response.data.name);
                    $('#edit_is_default').val(response.data.is_default ? 1 : 0);
                    $('#editModal').modal('show');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission to edit queue.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Queue not found.');
                } else if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while loading queue data.');
                }
            }
        });
    });

    // Edit Queue Form Submission
    $('#edit_form').on('submit', function(e) {
        e.preventDefault();
        var $btn = $('#btn_update');
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');
        
        $.ajax({
            url: "{{ route('masters.queue.update') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(response) {
                if (response.status) {
                    $('#editModal').modal('hide');
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission to update queue.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while updating queue.');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="las la-save"></i> Update');
            }
        });
    });

    // Delete/Restore Queue
    $(document).on('click', '.btn-delete-queue', function() {
        var queueId = $(this).data('id');
        var actionText = $(this).find('i').next().text().trim();
        
        swal({
            title: "Are you sure?",
            text: "Do you really want to " + actionText.toLowerCase() + " this queue?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willProceed) => {
            if (willProceed) {
                $.ajax({
                    url: "{{ route('masters.queue.destroy') }}",
                    type: "POST",
                    data: {
                        id: queueId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 403) {
                            const response = xhr.responseJSON;
                            toastr.error(response?.message || 'You do not have permission to modify queue.');
                        } else if (xhr.status === 401) {
                            toastr.error('Please login to continue.');
                            window.location.href = "{{ route('admin.login') }}";
                        } else if (xhr.status === 404) {
                            toastr.error('Queue not found.');
                        } else {
                            toastr.error('An error occurred while modifying queue.');
                        }
                    }
                });
            }
        });
    });

    // Reset form when modal closes
    $('#createModal, #editModal').on('hidden.bs.modal', function() {
        $('#queue_add_form, #edit_form')[0].reset();
    });
});
</script>
@endpush