@extends('layouts.app')

@section('title', 'Statuses')

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

   .statuses-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('status.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="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>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

<!-- Edit Status Modal -->
@can('status.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 Status</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_status_id">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Module <span class="asterisk">*</span></label>
                        <select class="form-control select2" name="module_id" id="edit_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" id="edit_name" placeholder="Name">
                        </div>
                        <div class="col">
                            <label>Stage <span class="asterisk">*</span></label>
                            <select required name="state" class="form-control" id="edit_state">
                                <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" id="edit_color" placeholder="Color">
                        </div>
                        <div class="col">
                            <label>Status <span class="asterisk">*</span></label>
                            <select required name="status" class="form-control" id="edit_status">
                                <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_update">
                        <i class="las la-save"></i> Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan
@endpush

@endsection

@push('scripts')
<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
    var errorShown = false;
    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: '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
                    
                    html += '</div></div>';
                    return html;
                }
            }
        ],
        order: [[2, 'asc']],
        responsive: true,
        language: {
            processing: '<i class="fa fa-spinner fa-spin"></i> Loading...'
        }
    });

    // 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...');
         $('#loaderStatus').text('Starting saving...');
        $('#refreshLoader').removeClass('d-none');
        $.ajax({
            url: "{{ route('masters.status.store') }}",
            method: "POST",
            data: $(this).serialize(),
             beforeSend: function() {
               $('#permissionsContainer').hide();
               $('#loaderStatus').text('Please wait...');
            },
            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');
                 setTimeout(() => {
                     $('#refreshLoader').addClass('d-none');
                  }, 1000);
            }
        });
    });

    // Edit Status - Show Modal
    $(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.');
                }
            }
        });
    });

    // Edit Status 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...');
         $('#loaderStatus').text('Starting saving...');
        $('#refreshLoader').removeClass('d-none');
        $.ajax({
            url: "{{ route('masters.status.update') }}",
            method: "POST",
            data: $(this).serialize(),
             beforeSend: function() {
               $('#permissionsContainer').hide();
               $('#loaderStatus').text('Please wait...');
            },
            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 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 updating status.');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="las la-save"></i> Update');
                  setTimeout(() => {
                     $('#refreshLoader').addClass('d-none');
                  }, 1000);
            }
        });
    });

    // Delete Status
    $(document).on('click', '.btn-delete-status', function() {
        var statusId = $(this).data('id');
        
        swal({
            title: "Are you sure?",
            text: "Do you really want to delete this status?",
            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.');
                        }
                    }
                });
            }
        });
    });

    // Reset form when modal closes
    function common_reset_form(formId) {
        $(formId)[0].reset();
        $('.select2').val(null).trigger('change');
    }
});
</script>
@endpush