@extends('operations.layout.mainlayout')

@section('content')

{{--    @if(session('role') != 4 && session('role') != 3 && session('role') != 7 && session('role') != 9 && session('role') != 13)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            color: black;
        }

        .item {
            background-color: rgb(18 221 24 / 13%) !important;
        }

        table.dataTable tr.dtrg-group td {
            background-color: white;
            border-bottom: 1px solid #e7e7e7 !important;
            font-size: 15px;
        }

        .btn-blz {
            color: #e35a80;
            border-color: #e35a80;
            width: 20%;
            margin: 2px;
        }

        .btn-blz:hover {
            color: #fff;
            background-color: #e35a80;
            border-color: #e35a80;
        }

        .active {
            color: #fff;
            background-color: #e35a80;
            border-color: #e35a80;
        }

        .canvasjs-chart-credit {
            display: none;
        }

        .btn-corrective {
            white-space: nowrap;
            text-align: center;
        }

        /* Responsive table adjustments */
        @media (max-width: 768px) {
            .table-responsive {
                font-size: 0.875rem;
            }
            .btn-sm {
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
            }
        }
    </style>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Corrective Actions Management</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <!-- /.card -->
                        <div class="col-12 col-sm-12 col-md-12">
                            <br/>
                            <div class="card bg-light">
                                <div class="card-header text-muted border-bottom-0">
                                    <h3 class="card-title">Corrective Actions</h3>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="status-filter">Filter by Status:</label>
                                                        <select class="form-control" id="status-filter">
                                                            <option value="">All Status</option>
                                                            <option value="active">Active</option>
                                                            <option value="inactive">Inactive</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 text-right">
                                                    @if(in_array('add_corrective_actions', session('permissions', []) ?? []))
                                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#corrective-action-modal" id="add-corrective-action-btn">
                                                        <i class="fas fa-plus"></i> Add New Corrective Action
                                                    </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body table-responsive">
                                <table id="corrective-actions-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </div>
        </section>
        <!-- /.content -->
    </div>

    <!-- Create/Edit Modal -->
    <div class="modal fade" id="corrective-action-modal" tabindex="-1" role="dialog" aria-labelledby="corrective-action-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="corrective-action-modal-label">Add Corrective Action</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="corrective-action-form">
                    <div class="modal-body">
                        <div id="form-errors" class="alert alert-danger" style="display: none;"></div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name" class="required">Name</label>
                                    <input type="text" class="form-control" id="name" name="NAME" required maxlength="255">
                                    <div class="invalid-feedback">Please provide a valid name.</div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea class="form-control" id="description" name="DESCRIPTION" rows="4" maxlength="1000"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status" class="required">Status</label>
                                    <select class="form-control" id="status" name="STATUS" required>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                    <div class="invalid-feedback">Please select a status.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="save-corrective-action-btn">
                            <i class="fas fa-save"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="delete-modal-label" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="delete-modal-label">Confirm Delete</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the corrective action "<span id="delete-name"></span>"?</p>
                    <p class="text-danger">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete-btn">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('footer-scripts')
    <script>
        $(document).ready(function() {
            // Initialize DataTable
            const correctiveActionsTable = $('#corrective-actions-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/operations/corrective-actions/datatable',
                    type: 'GET',
                    data: function(d) {
                        d.status = $('#status-filter').val();
                    }
                },
                columns: [
                    { data: 'ID', name: 'ID', width: '5%' },
                    { data: 'NAME', name: 'NAME', width: '20%' },
                    { data: 'DESCRIPTION', name: 'DESCRIPTION', width: '35%' },
                    {
                        data: 'STATUS',
                        name: 'STATUS',
                        width: '10%',
                        render: function(data) {
                            return data === 'active'
                                ? '<span class="badge badge-success">Active</span>'
                                : '<span class="badge badge-danger">Inactive</span>';
                        }
                    },
                    { data: 'CREATED_AT', name: 'CREATED_AT', width: '15%' },
                    {
                        data: 'ACTIONS',
                        name: 'ACTIONS',
                        orderable: false,
                        searchable: false,
                        width: '15%'
                    }
                ],
                pageLength: 25,
                responsive: false,
                order: [[4, 'desc']], // Order by Created At descending
                language: {
                    processing: '<i class="fas fa-spinner fa-spin"></i> Loading...'
                }
            });

            // Status filter change
            $('#status-filter').on('change', function() {
                correctiveActionsTable.ajax.reload();
            });

            // Add new corrective action button
            $('#add-corrective-action-btn').on('click', function() {
                resetForm();
                $('#corrective-action-modal-label').text('Add Corrective Action');
                $('#corrective-action-modal').modal('show');
            });

            // Edit corrective action
            $(document).on('click', '.edit-btn', function() {
                const id = $(this).data('id');
                loadCorrectiveAction(id);
            });

            // Delete corrective action
            $(document).on('click', '.delete-btn', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                $('#delete-name').text(name);
                $('#confirm-delete-btn').data('id', id);
                $('#delete-modal').modal('show');
            });

            // Confirm delete
            $('#confirm-delete-btn').on('click', function() {
                const id = $(this).data('id');
                deleteCorrectiveAction(id);
            });

            // Form submission
            $('#corrective-action-form').on('submit', function(e) {
                e.preventDefault();
                saveCorrectiveAction();
            });

            // Form validation
            $('#name, #status').on('blur', function() {
                validateField($(this));
            });

            function resetForm() {
                $('#corrective-action-form')[0].reset();
                $('#form-errors').hide();
                $('.is-invalid').removeClass('is-invalid');
                $('#corrective-action-form').data('id', null);
            }

            function validateField(field) {
                const value = field.val().trim();
                const isRequired = field.prop('required');

                if (isRequired && !value) {
                    field.addClass('is-invalid');
                    return false;
                } else {
                    field.removeClass('is-invalid');
                    return true;
                }
            }

            function loadCorrectiveAction(id) {
                $.ajax({
                    url: '/operations/corrective-actions/' + id,
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            const data = response.data;
                            $('#name').val(data.NAME);
                            $('#description').val(data.DESCRIPTION);
                            $('#status').val(data.STATUS);
                            $('#corrective-action-form').data('id', data.ID);
                            $('#corrective-action-modal-label').text('Edit Corrective Action');
                            $('#corrective-action-modal').modal('show');
                        }
                    },
                    error: function(xhr) {
                        showError('Failed to load corrective action data');
                    }
                });
            }

            function saveCorrectiveAction() {
                const formData = new FormData($('#corrective-action-form')[0]);
                const id = $('#corrective-action-form').data('id');
                const isEdit = !!id;

                // Basic validation
                let isValid = true;
                $('#name, #status').each(function() {
                    if (!validateField($(this))) {
                        isValid = false;
                    }
                });

                if (!isValid) {
                    return;
                }

                const url = isEdit
                    ? '/operations/corrective-actions/' + id
                    : '/operations/corrective-actions';

                const method = 'POST';

                if (isEdit) {
                    formData.append('_method', 'PUT');
                }

                $('#save-corrective-action-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('#corrective-action-modal').modal('hide');
                            correctiveActionsTable.ajax.reload();
                            showSuccess(response.message || (isEdit ? 'Corrective action updated successfully' : 'Corrective action created successfully'));
                        } else {
                            showFormErrors(response.errors);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            showFormErrors(xhr.responseJSON.errors);
                        } else {
                            showError(xhr.responseJSON?.message || 'An error occurred while saving');
                        }
                    },
                    complete: function() {
                        $('#save-corrective-action-btn').prop('disabled', false).html('<i class="fas fa-save"></i> Save');
                    }
                });
            }

            function deleteCorrectiveAction(id) {
                $('#confirm-delete-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Deleting...');

                $.ajax({
                    url: '/operations/corrective-actions/' + id,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.success) {
                            $('#delete-modal').modal('hide');
                            correctiveActionsTable.ajax.reload();
                            showSuccess(response.message || 'Corrective action deleted successfully');
                        }
                    },
                    error: function(xhr) {
                        showError(xhr.responseJSON?.message || 'Failed to delete corrective action');
                    },
                    complete: function() {
                        $('#confirm-delete-btn').prop('disabled', false).html('<i class="fas fa-trash"></i> Delete');
                    }
                });
            }

            function showFormErrors(errors) {
                let errorHtml = '<ul class="mb-0">';
                for (const field in errors) {
                    errorHtml += `<li>${errors[field][0]}</li>`;
                }
                errorHtml += '</ul>';
                $('#form-errors').html(errorHtml).show();
            }

            function showSuccess(message) {
                toastr.success(message);
            }

            function showError(message) {
                toastr.error(message);
            }
        });
    </script>
@endsection