@extends('secretary::layouts.master')

@section('title', 'Priority Settings')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Priority Settings</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('secretary.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Priority Settings</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Ticket Priorities</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addPriorityModal">
                                    <i class="fas fa-plus"></i> Add Priority
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Description</th>
                                            <th>Color</th>
                                            <th>Response Time</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="prioritiesTableBody">
                                        @forelse($priorities as $priority)
                                        <tr data-priority-id="{{ $priority->id }}">
                                            <td>{{ $priority->id }}</td>
                                            <td>{{ $priority->name }}</td>
                                            <td>{{ $priority->description }}</td>
                                            <td><span class="badge {{ $priority->color_badge }}">{{ ucfirst($priority->color) }}</span></td>
                                            <td>{{ $priority->formatted_response_time }}</td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button class="btn btn-sm btn-warning edit-priority" data-priority='{{ $priority->toJson() }}'>
                                                        <i class="fas fa-edit"></i> Edit
                                                    </button>
                                                    <button class="btn btn-sm {{ $priority->is_active ? 'btn-success' : 'btn-secondary' }} toggle-status" 
                                                            data-priority-id="{{ $priority->id }}" 
                                                            data-status="{{ $priority->is_active ? 'active' : 'inactive' }}">
                                                        <i class="fas fa-{{ $priority->is_active ? 'check' : 'times' }}"></i> 
                                                        {{ $priority->is_active ? 'Active' : 'Inactive' }}
                                                    </button>
                                                    <button class="btn btn-sm btn-danger delete-priority" data-priority-id="{{ $priority->id }}" data-priority-name="{{ $priority->name }}">
                                                        <i class="fas fa-trash"></i> Delete
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">No priorities found. <a href="#" data-toggle="modal" data-target="#addPriorityModal">Add your first priority</a></td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Add/Edit Priority Modal -->
<div class="modal fade" id="addPriorityModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Add New Priority</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="priorityForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="priorityName">Priority Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="priorityName" name="name" placeholder="Enter priority name" required>
                        <div class="invalid-feedback" id="nameError"></div>
                    </div>
                    <div class="form-group">
                        <label for="priorityDescription">Description</label>
                        <textarea class="form-control" id="priorityDescription" name="description" rows="3" placeholder="Enter priority description"></textarea>
                        <div class="invalid-feedback" id="descriptionError"></div>
                    </div>
                    <div class="form-group">
                        <label for="priorityColor">Color <span class="text-danger">*</span></label>
                        <select class="form-control" id="priorityColor" name="color" required>
                            <option value="secondary">Secondary (Gray)</option>
                            <option value="primary">Primary (Blue)</option>
                            <option value="success">Success (Green)</option>
                            <option value="info">Info (Light Blue)</option>
                            <option value="warning">Warning (Yellow)</option>
                            <option value="danger">Danger (Red)</option>
                            <option value="dark">Dark (Black)</option>
                        </select>
                        <div class="invalid-feedback" id="colorError"></div>
                    </div>
                    <div class="form-group">
                        <label for="responseTime">Response Time (hours) <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="responseTime" name="response_time_hours" 
                               placeholder="Enter response time in hours" min="1" max="8760" required>
                        <small class="form-text text-muted">Maximum 8760 hours (1 year)</small>
                        <div class="invalid-feedback" id="responseTimeError"></div>
                    </div>
                    <div class="form-group">
                        <label for="sortOrder">Sort Order</label>
                        <input type="number" class="form-control" id="sortOrder" name="sort_order" 
                               placeholder="Enter sort order (optional)" min="0">
                        <small class="form-text text-muted">Lower numbers appear first. Leave empty for auto-assignment.</small>
                        <div class="invalid-feedback" id="sortOrderError"></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="saveButton">Save Priority</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deletePriorityModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the priority "<span id="deletePriorityName"></span>"?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Warning:</strong> This action cannot be undone. If this priority is being used by any tickets, the deletion will be prevented.
                </div>
            </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="confirmDelete">Delete Priority</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentPriorityId = null;
    let isEditMode = false;

    // Form submission handler
    $('#priorityForm').on('submit', function(e) {
        e.preventDefault();
        
        // Get form data
        const formData = {
            name: $('#priorityName').val(),
            description: $('#priorityDescription').val(),
            color: $('#priorityColor').val(),
            response_time_hours: $('#responseTime').val(),
            sort_order: $('#sortOrder').val() || null,
            _token: $('meta[name="csrf-token"]').attr('content')
        };

        // Determine URL and method
        let url, method;
        if (isEditMode) {
            url = '{{ route("secretary.settings.priorities.update", ":id") }}'.replace(':id', currentPriorityId);
            method = 'PUT';
            formData._method = 'PUT';
        } else {
            url = '{{ route("secretary.settings.priorities.store") }}';
            method = 'POST';
        }

        // Clear previous errors
        clearErrors();
        
        // Show loading state
        setButtonLoading($('#saveButton'), true);

        // Make AJAX request
        $.ajax({
            url: url,
            type: method,
            data: formData,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    showAlert('success', response.message);
                    $('#addPriorityModal').modal('hide');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showAlert('error', response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    displayValidationErrors(errors);
                } else {
                    showAlert('error', 'An error occurred while saving the priority.');
                }
            },
            complete: function() {
                setButtonLoading($('#saveButton'), false);
            }
        });
    });

    // Edit priority handler
    $(document).on('click', '.edit-priority', function() {
        try {
            // Use attr() instead of data() to get the raw string
            const priorityDataString = $(this).attr('data-priority');
            
            if (!priorityDataString) {
                throw new Error('No priority data found');
            }
            
            // Parse the JSON string
            const priority = JSON.parse(priorityDataString);
            
            // Set edit mode
            isEditMode = true;
            currentPriorityId = priority.id;
            
            // Update modal title
            $('#modalTitle').text('Edit Priority');
            $('#saveButton').text('Update Priority');
            
            // Populate form
            $('#priorityName').val(priority.name);
            $('#priorityDescription').val(priority.description);
            $('#priorityColor').val(priority.color);
            $('#responseTime').val(priority.response_time_hours);
            $('#sortOrder').val(priority.sort_order);
            
            // Show modal
            $('#addPriorityModal').modal('show');
            
        } catch (error) {
            console.error('Error parsing priority data:', error);
            showAlert('error', 'Error loading priority data: ' + error.message);
        }
    });

    // Toggle status handler
    $(document).on('click', '.toggle-status', function(e) {
        e.preventDefault();
        
        const priorityId = $(this).data('priority-id');
        const currentStatus = $(this).data('status');
        
        if (!priorityId) {
            showAlert('error', 'No priority ID found!');
            return;
        }
        
        // Disable button during request
        $(this).prop('disabled', true);
        
        const url = '{{ route("secretary.settings.priorities.toggle-status", ":id") }}'.replace(':id', priorityId);
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        
        $.ajax({
            url: url,
            type: 'PATCH',
            data: {
                _token: csrfToken
            },
            success: function(response) {
                if (response.success) {
                    showAlert('success', response.message);
                    // Reload page to show updated status
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showAlert('error', response.message);
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showAlert('error', response?.message || 'An error occurred while updating the priority status.');
            },
            complete: function() {
                // Re-enable button
                $('.toggle-status[data-priority-id="' + priorityId + '"]').prop('disabled', false);
            }
        });
    });

    // Delete priority handler
    $(document).on('click', '.delete-priority', function() {
        const priorityId = $(this).data('priority-id');
        const priorityName = $(this).data('priority-name');
        
        $('#deletePriorityName').text(priorityName);
        $('#confirmDelete').data('priority-id', priorityId);
        $('#deletePriorityModal').modal('show');
    });

    // Confirm delete handler
    $('#confirmDelete').on('click', function() {
        const priorityId = $(this).data('priority-id');
        
        $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Deleting...');
        
        $.ajax({
            url: '{{ route("secretary.settings.priorities.destroy", ":id") }}'.replace(':id', priorityId),
            type: 'DELETE',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    showAlert('success', response.message);
                    $('#deletePriorityModal').modal('hide');
                    location.reload();
                } else {
                    showAlert('error', response.message);
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showAlert('error', response.message || 'An error occurred while deleting the priority.');
            },
            complete: function() {
                $('#confirmDelete').prop('disabled', false).html('Delete Priority');
            }
        });
    });


    // Reset form when modal is closed
    $('#addPriorityModal').on('hidden.bs.modal', function() {
        resetForm();
    });

    // Add new priority button handler
    $('[data-target="#addPriorityModal"]').on('click', function() {
        resetForm();
    });

    function resetForm() {
        isEditMode = false;
        currentPriorityId = null;
        
        // Reset form
        $('#priorityForm')[0].reset();
        $('#modalTitle').text('Add New Priority');
        $('#saveButton').text('Save Priority');
        clearErrors();
    }

    function clearErrors() {
        $('.form-control').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }

    // Add loading states to buttons
    function setButtonLoading(button, loading = true) {
        if (loading) {
            button.prop('disabled', true);
            const originalText = button.html();
            button.data('original-text', originalText);
            button.html('<i class="fas fa-spinner fa-spin mr-1"></i> Processing...');
        } else {
            button.prop('disabled', false);
            button.html(button.data('original-text'));
        }
    }

    function displayValidationErrors(errors) {
        Object.keys(errors).forEach(function(field) {
            const input = $(`[name="${field}"]`);
            const errorDiv = $(`#${field}Error`);
            
            input.addClass('is-invalid');
            errorDiv.text(errors[field][0]);
        });
    }

    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';
        
        const alert = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <i class="fas ${icon}"></i> ${message}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        `;
        
        // Remove existing alerts
        $('.alert').remove();
        
        // Add new alert
        $('.content-header').after(alert);
        
        // Auto-hide after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut();
        }, 5000);
    }
});
</script>
@endpush