@extends('layouts.app')

@section('title', 'Statuses')

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

    .statuses-table01 input{
        height: 20px;
    }
    
    .select2-container {
        width: 100% !important;
    }
    
    /* Drag and Drop Styles */
    .sortable-list {
        min-height: 100px;
        border: 1px dashed #ddd;
        padding: 10px;
        border-radius: 4px;
    }
    
    .sortable-item {
        padding: 10px 15px;
        margin-bottom: 5px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        cursor: move;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .sortable-item:hover {
        background: #e9ecef;
    }
    
    .sortable-item.dragging {
        opacity: 0.5;
        background: #007bff;
        color: white;
    }
    
    .sortable-item .drag-handle {
        cursor: move;
        color: #6c757d;
        margin-right: 10px;
    }
    
    .sortable-item .default-badge {
        background: #28a745;
        color: white;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        margin-left: 10px;
    }
    
    .module-selector-container {
        margin-bottom: 20px;
    }
</style>
@endpush

@section('content')

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

                @can('status.reorder')
                <button data-toggle="modal"
                        data-target="#reorderModal"
                        class="btn btn-info">
                    <i class="las la-sort"></i> Reorder Statuses
                </button>
                @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="status-list" class="table statuses-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>Order</th>
                  <th>Module</th>
                  <th>Name</th>
                  <th>Stage</th>
                  <th>Color</th>
                  <th>Status</th>
                  <th>Created At</th>
                  <th>Actions</th>
               </tr>
            </thead>
         </table>
      </div>
   </div>
</div>

<!-- Add Status Modal -->
@push('modals')
@can('status.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 Status</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="status_add_form" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Module <span class="asterisk">*</span></label>
                        <select class="form-control select2" name="module_id" id="module_id" required>
                            <option value="">Select Module</option>
                            @foreach($modules as $module)
                                <option value="{{ $module->id }}">{{ $module->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="row">
                        <div class="col">
                            <label>Name <span class="asterisk">*</span></label>
                            <input required name="name" minlength="4" type="text" class="form-control" placeholder="Name">
                        </div>
                        <div class="col">
                            <label>Stage <span class="asterisk">*</span></label>
                            <select required name="state" class="form-control">
                                <option value="1">Open</option>
                                <option value="0">Closed</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col">
                            <label>Color <span class="asterisk">*</span></label>
                            <input required name="color" type="color" class="form-control" placeholder="Color">
                        </div>
                        <div class="col">
                            <label>Status <span class="asterisk">*</span></label>
                            <select required name="status" class="form-control">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </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

<!-- Reorder Statuses Modal -->
@can('status.reorder')
<div class="modal fade" id="reorderModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reorder Statuses</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group module-selector-container">
                    <label>Select Module <span class="asterisk">*</span></label>
                    <select class="form-control select2" id="reorder_module_id" required>
                        <option value="">Select Module</option>
                        @foreach($modules as $module)
                            <option value="{{ $module->id }}">{{ $module->name }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div id="reorderContainer" style="display: none;">
                    <p class="text-muted mb-3">Drag and drop to reorder statuses. The first status will be the default.</p>
                    <div class="sortable-list" id="sortableList">
                        <!-- Status items will be loaded here -->
                    </div>
                </div>
                
                <div id="noStatusMessage" class="alert alert-warning" style="display: none;">
                    No active statuses found for this module.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btn_save_order" style="display: none;">
                    <i class="las la-save"></i> Save Order
                </button>
            </div>
        </div>
    </div>
</div>
@endcan

<!-- Edit Status Modal -->
@can('status.edit')
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- ... existing edit modal content ... -->
</div>
@endcan
@endpush

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        width: 'resolve',
        placeholder: "Select a module",
        allowClear: true
    });

    // Close Select2 dropdown when modal closes
    $('.modal').on('hidden.bs.modal', function() {
        $('.select2').val(null).trigger('change');
    });

    // Initialize DataTable with sort_order column
    var table = $('#status-list').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('masters.status.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 status data.');
                    setTimeout(() => { errorShown = false; }, 5000);
                }
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { 
                data: 'default_indicator', 
                name: 'default_indicator',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return data + ' ' + (row.sort_order + 1); // Display position (1-based)
                }
            },
            { data: 'module_name', name: 'module.name' },
            { data: 'name', name: 'name' },
            { data: 'stage', name: 'state' },
            { 
                data: 'color', 
                name: 'color',
                render: function(data, type, row) {
                    return '<div style="width: 30px; height: 20px; background-color: ' + data + '; border: 1px solid #ccc;"></div>';
                }
            },
            { 
                data: 'status', 
                name: 'status',
                render: function(data, type, row) {
                    var status = data == 1 ? 'Active' : 'Inactive';
                    var badge = data == 1 ? 'success' : 'danger';
                    return '<span class="badge badge-' + badge + '">' + status + '</span>';
                }
            },
            { 
                data: 'created_at', 
                name: 'created_at',
                render: function(data) {
                    return new Date(data).toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric'
                    });
                }
            },
            { 
                data: 'actions', 
                name: 'actions', 
                orderable: false, 
                searchable: false,
                render: function(data, type, row) {
                    var html = '<div class="dropdown ml-auto">';
                    html += '<a href="#" class="text-dark" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
                    html += '<i class="las la-ellipsis-v" aria-hidden="true"></i>';
                    html += '</a>';
                    html += '<div class="dropdown-menu dropdown-menu-right">';
                    
                    @can('status.edit')
                    html += '<a class="dropdown-item btn-edit-status" href="#" data-id="' + row.encrypted_id + '">';
                    html += '<i class="las la-edit"></i> Edit';
                    html += '</a>';
                    @endcan
                    
                    @can('status.delete')
                    html += '<a class="dropdown-item btn-delete-status" href="#" data-id="' + row.encrypted_id + '">';
                    html += '<i class="las la-trash"></i> Delete';
                    html += '</a>';
                    @endcan
                    
                    @can('status.reorder')
                    html += '<div class="dropdown-divider"></div>';
                    html += '<a class="dropdown-item btn-move-up" href="#" data-id="' + row.encrypted_id + '">';
                    html += '<i class="las la-arrow-up"></i> Move Up';
                    html += '</a>';
                    html += '<a class="dropdown-item btn-move-down" href="#" data-id="' + row.encrypted_id + '">';
                    html += '<i class="las la-arrow-down"></i> Move Down';
                    html += '</a>';
                    @endcan
                    
                    html += '</div></div>';
                    return html;
                }
            }
        ],
        order: [[1, 'asc']], // Order by sort_order
        responsive: true,
        language: {
            processing: '<i class="fa fa-spinner fa-spin"></i> Loading...'
        }
    });

    // Load statuses for reordering when module is selected
    $('#reorder_module_id').on('change', function() {
        var moduleId = $(this).val();
        
        if (!moduleId) {
            $('#reorderContainer').hide();
            $('#btn_save_order').hide();
            $('#noStatusMessage').hide();
            return;
        }
        
        $.ajax({
            url: "{{ route('masters.status.get-by-module') }}",
            method: "GET",
            data: { module_id: moduleId },
            success: function(response) {
                if (response.status && response.data.length > 0) {
                    var html = '';
                    response.data.forEach(function(status, index) {
                        var isDefault = status.sort_order === 0;
                        html += '<div class="sortable-item" data-id="' + status.id + '" data-order="' + index + '">';
                        html += '<div>';
                        html += '<span class="drag-handle"><i class="las la-bars"></i></span>';
                        html += '<strong>' + status.name + '</strong>';
                        if (isDefault) {
                            html += '<span class="default-badge">Default</span>';
                        }
                        html += '</div>';
                        html += '<span class="text-muted">Position: ' + (index + 1) + '</span>';
                        html += '</div>';
                    });
                    
                    $('#sortableList').html(html);
                    $('#reorderContainer').show();
                    $('#btn_save_order').show();
                    $('#noStatusMessage').hide();
                    
                    // Initialize Sortable
                    initializeSortable();
                } else {
                    $('#reorderContainer').hide();
                    $('#btn_save_order').hide();
                    $('#noStatusMessage').show();
                }
            },
            error: function(xhr) {
                toastr.error('Failed to load statuses for this module.');
            }
        });
    });

    // Initialize drag and drop
    function initializeSortable() {
        var sortableList = document.getElementById('sortableList');
        
        Sortable.create(sortableList, {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'dragging',
            onEnd: function(evt) {
                // Update position indicators
                updatePositionIndicators();
            }
        });
    }

    // Update position indicators after reorder
    function updatePositionIndicators() {
        $('#sortableList .sortable-item').each(function(index) {
            $(this).attr('data-order', index);
            $(this).find('.text-muted').text('Position: ' + (index + 1));
            
            // Update default badge
            if (index === 0) {
                if (!$(this).find('.default-badge').length) {
                    $(this).find('div').append('<span class="default-badge">Default</span>');
                }
            } else {
                $(this).find('.default-badge').remove();
            }
        });
    }

    // Save reordered statuses
    $('#btn_save_order').on('click', function() {
        var moduleId = $('#reorder_module_id').val();
        var order = [];
        
        $('#sortableList .sortable-item').each(function(index) {
            order.push({
                id: $(this).data('id'),
                sort_order: index
            });
        });
        
        var $btn = $(this);
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
        
        $.ajax({
            url: "{{ route('masters.status.reorder') }}",
            method: "POST",
            data: {
                module_id: moduleId,
                order: order,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.status) {
                    toastr.success(response.message);
                    table.ajax.reload();
                    $('#reorderModal').modal('hide');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else if (xhr.status === 403) {
                    toastr.error('You do not have permission to reorder statuses.');
                } else {
                    toastr.error('Failed to save order.');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="las la-save"></i> Save Order');
            }
        });
    });

    // Move status up/down
    $(document).on('click', '.btn-move-up, .btn-move-down', function(e) {
        e.preventDefault();
        
        var statusId = $(this).data('id');
        var direction = $(this).hasClass('btn-move-up') ? 'up' : 'down';
        
        $.ajax({
            url: "{{ route('masters.status.move') }}",
            method: "POST",
            data: {
                id: statusId,
                direction: direction,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.status) {
                    toastr.success(response.message);
                    table.ajax.reload();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    toastr.error(xhr.responseJSON.message);
                } else if (xhr.status === 403) {
                    toastr.error('You do not have permission to move statuses.');
                } else {
                    toastr.error('Failed to move status.');
                }
            }
        });
    });

    // Add Status Form Submission
    $('#status_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.status.store') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(response) {
                if (response.status) {
                    $('#createModal').modal('hide');
                    $('#status_add_form')[0].reset();
                    $('.select2').val(null).trigger('change');
                    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 status.');
                } 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 status.');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="las la-save"></i> Save');
            }
        });
    });

    // Edit Status
    $(document).on('click', '.btn-edit-status', function() {
        var statusId = $(this).data('id');
        
        $.ajax({
            url: "{{ route('masters.status.edit') }}",
            method: "GET",
            data: { id: statusId },
            success: function(response) {
                if (response.status) {
                    $('#edit_status_id').val(statusId);
                    $('#edit_module_id').val(response.data.module_id).trigger('change');
                    $('#edit_name').val(response.data.name);
                    $('#edit_state').val(response.data.state);
                    $('#edit_color').val(response.data.color);
                    $('#edit_status').val(response.data.status);
                    $('#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 status.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Status 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 status data.');
                }
            }
        });
    });

    // Delete Status
    $(document).on('click', '.btn-delete-status', function(e) {
        e.preventDefault();
        
        var statusId = $(this).data('id');
        
        swal({
            title: "Are you sure?",
            text: "Deleting this status will reorder remaining statuses. This action cannot be undone!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ route('masters.status.delete') }}",
                    type: "DELETE",
                    data: {
                        id: statusId,
                        _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 delete status.');
                        } else if (xhr.status === 401) {
                            toastr.error('Please login to continue.');
                            window.location.href = "{{ route('admin.login') }}";
                        } else if (xhr.status === 404) {
                            toastr.error('Status not found.');
                        } else {
                            toastr.error('An error occurred while deleting status.');
                        }
                    }
                });
            }
        });
    });
});
</script>
@endpush