@push('title')
    Add Routes to Cortx
@endpush
<div class="content-wrapper">

    <!-- Row to contain both cards -->
    <div class="row">

        <!-- First card for form and buttons -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <i class="fas fa-edit"></i> Input Data
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label><strong>Enter IPs and Names (one per line):</strong></label>
                        <textarea wire:model="serverDataTextArea" class="form-control" rows="5"></textarea>
                    </div>

                    <div class="form-group">
                        <label><strong>Enter Domains (one per line):</strong></label>
                        <textarea wire:model="domains" class="form-control" rows="5"></textarea>
                    </div>
                    <button wire:click="runPythonScript" class="btn btn-primary ml-2" wire:loading.attr="disabled">
                        <span wire:loading wire:target="runPythonScript">
                            <i class="fas fa-spinner fa-spin mr-2"></i>
                        </span>
                        Add Routes
                    </button>


                    <!-- Alerts for messages and errors -->
                    @if(session('message'))
                    <div class="alert alert-success mt-3">
                        <i class="fas fa-check-circle"></i> {{ session('message') }}
                    </div>
                    @endif

                    @if(session('error'))
                    <div class="alert alert-danger mt-3">
                        <i class="fas fa-exclamation-triangle"></i> {{ session('error') }}
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Second card for tables -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header bg-info text-white text-sm">
                    <i class="fas fa-table "></i> Results
                </div>
                <div class="card-body text-sm">

                    @if(!empty($excelRoutsData) && count($excelRoutsData) > 1)
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>{{ $excelRoutsData[0][0] ?? 'Name' }}</th>
                                <th>{{ $excelRoutsData[0][1] ?? 'Root' }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(array_slice($excelRoutsData, 1) as $dataRow)
                            <tr>
                                <td>{{ $dataRow[0] ?? '' }}</td>
                                <td>{{ $dataRow[1] ?? '' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @endif

                    @if(!empty($mergeroutstatus))
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>{{ $mergeroutstatus[0][0] }}</th>
                                <th>{{ $mergeroutstatus[0][1] }}</th>
                                <th>{{ $mergeroutstatus[0][2] }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(array_slice($mergeroutstatus, 1) as $statusRow)
                            <tr>
                                <td>{{ $statusRow[0] ?? '' }}</td>
                                <td>{{ $statusRow[1] ?? '' }}</td>
                                <td>{{ $statusRow[2] ?? '' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @endif
                </div>
            </div>
        </div>
    </div> <!-- End of row -->
</div>