@extends('layouts.admin')

@section('title', 'Application Steps Management')

@section('breadcrumbs')
    <li class="breadcrumb-item active">Application Steps</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Application Steps Management</h1>
            <p class="text-muted">Configure the application process steps and their order</p>
        </div>
        <div>
            <a href="{{ route('admin.application-steps.preview') }}" class="btn btn-outline-info me-2">
                <i class="fas fa-eye me-1"></i>Preview Steps
            </a>
            <a href="{{ route('admin.application-steps.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i>Add New Step
            </a>
        </div>
    </div>

    <!-- Steps Management Card -->
    <div class="card shadow">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list-ol me-2"></i>Application Steps
            </h6>
            <div>
                <span class="badge badge-info">{{ $steps->count() }} Total Steps</span>
                <span class="badge badge-success">{{ $steps->where('is_active', true)->count() }} Active</span>
            </div>
        </div>
        <div class="card-body">
            @if($steps->count() > 0)
                <!-- Drag and Drop Instructions -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Tip:</strong> Drag and drop steps to reorder them. Changes are saved automatically.
                </div>

                <!-- Steps List -->
                <div id="steps-container" class="sortable-steps">
                    @foreach($steps as $step)
                    <div class="step-item card mb-3" data-step-id="{{ $step->id }}" data-order="{{ $step->order_index }}">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <!-- Drag Handle -->
                                <div class="col-auto">
                                    <div class="drag-handle text-muted">
                                        <i class="fas fa-grip-vertical fa-lg"></i>
                                    </div>
                                </div>
                                
                                <!-- Order Number -->
                                <div class="col-auto">
                                    <div class="step-order-badge">
                                        <span class="badge badge-primary badge-lg">{{ $step->order_index }}</span>
                                    </div>
                                </div>
                                
                                <!-- Step Info -->
                                <div class="col">
                                    <div class="d-flex align-items-center">
                                        @if($step->icon)
                                            <i class="{{ $step->icon }} fa-lg text-primary me-3"></i>
                                        @endif
                                        <div>
                                            <h6 class="mb-1 font-weight-bold">{{ $step->name }}</h6>
                                            <p class="text-muted mb-0 small">{{ $step->description }}</p>
                                            <div class="mt-1">
                                                <span class="badge badge-secondary">{{ $step->component_name }}</span>
                                                @if($step->is_required)
                                                    <span class="badge badge-warning">Required</span>
                                                @endif
                                                @if($step->include_in_pdf)
                                                    <span class="badge badge-info">PDF</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Status Toggle -->
                                <div class="col-auto">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input status-toggle" 
                                               type="checkbox" 
                                               id="status-{{ $step->id }}"
                                               data-step-id="{{ $step->id }}"
                                               {{ $step->is_active ? 'checked' : '' }}>
                                        <label class="form-check-label" for="status-{{ $step->id }}">
                                            <span class="badge badge-{{ $step->is_active ? 'success' : 'secondary' }}">
                                                {{ $step->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </label>
                                    </div>
                                </div>
                                
                                <!-- Actions -->
                                <div class="col-auto">
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.application-steps.show', $step) }}" 
                                           class="btn btn-sm btn-outline-info" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.application-steps.edit', $step) }}" 
                                           class="btn btn-sm btn-outline-primary" title="Edit Step">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" 
                                                class="btn btn-sm btn-outline-danger delete-step" 
                                                data-step-id="{{ $step->id }}"
                                                data-step-name="{{ $step->name }}"
                                                title="Delete Step">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                <!-- Add Step Button -->
                <div class="text-center mt-4">
                    <a href="{{ route('admin.application-steps.create') }}" class="btn btn-success">
                        <i class="fas fa-plus me-2"></i>Add Another Step
                    </a>
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-5">
                    <i class="fas fa-list-ol fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">No Application Steps Found</h5>
                    <p class="text-muted mb-4">
                        Create your first application step to get started with the application process.
                    </p>
                    <a href="{{ route('admin.application-steps.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>Create First Step
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the step "<span id="step-name-placeholder"></span>"?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Warning:</strong> This action cannot be undone. All step configurations will be lost.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="delete-form" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Step</button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.step-item {
    border: 2px solid #e3e6f0;
    transition: all 0.3s ease;
    cursor: move;
}

.step-item:hover {
    border-color: #667eea;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.step-item.ui-sortable-helper {
    transform: rotate(5deg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.drag-handle {
    cursor: grab;
    padding: 10px;
}

.drag-handle:active {
    cursor: grabbing;
}

.step-order-badge .badge {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
}

.sortable-placeholder {
    border: 2px dashed #667eea;
    background: #f8f9fc;
    height: 100px;
    margin-bottom: 1rem;
}

.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-group .btn {
    margin-right: 2px;
}

.badge-lg {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}
</style>

@push('scripts')
<!-- jQuery (required for jQuery UI) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI for sortable -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize sortable
    $('#steps-container').sortable({
        handle: '.drag-handle',
        placeholder: 'sortable-placeholder',
        update: function(event, ui) {
            updateStepOrder();
        }
    });
    
    // Update step order
    function updateStepOrder() {
        const steps = [];
        $('.step-item').each(function(index) {
            steps.push({
                id: $(this).data('step-id'),
                order_index: index + 1
            });
        });
        
        $.ajax({
            url: '{{ route("admin.application-steps.update-order") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                steps: steps
            },
            success: function(response) {
                // Update order badges
                $('.step-item').each(function(index) {
                    $(this).find('.step-order-badge .badge').text(index + 1);
                });
                
                // Show success message
                showAlert('success', 'Step order updated successfully!');
            },
            error: function() {
                showAlert('error', 'Failed to update step order. Please try again.');
            }
        });
    }
    
    // Status toggle
    $('.status-toggle').change(function() {
        const stepId = $(this).data('step-id');
        const isActive = $(this).is(':checked');
        
        $.ajax({
            url: `/admin/application-steps/${stepId}/toggle-active`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                const badge = $(`#status-${stepId}`).next('label').find('.badge');
                if (isActive) {
                    badge.removeClass('badge-secondary').addClass('badge-success').text('Active');
                } else {
                    badge.removeClass('badge-success').addClass('badge-secondary').text('Inactive');
                }
                showAlert('success', `Step ${isActive ? 'activated' : 'deactivated'} successfully!`);
            },
            error: function() {
                // Revert toggle
                $(`#status-${stepId}`).prop('checked', !isActive);
                showAlert('error', 'Failed to update step status. Please try again.');
            }
        });
    });
    
    // Delete step
    $('.delete-step').click(function() {
        const stepId = $(this).data('step-id');
        const stepName = $(this).data('step-name');
        
        $('#step-name-placeholder').text(stepName);
        $('#delete-form').attr('action', `/admin/application-steps/${stepId}`);
        $('#deleteModal').modal('show');
    });
    
    // Show alert
    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;
        
        $('.container-fluid').prepend(alertHtml);
        
        // Auto-dismiss after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut();
        }, 5000);
    }
});
</script>
@endpush
@endsection