@extends('layouts.app')

@section('title', 'Station Management')

@section('content')
<style>
    [x-cloak] { display: none !important; }
    
    /* Station badge styling */
    .station-badge {
        background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
        border-left: 3px solid #4f46e5;
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-family: 'Courier New', monospace;
        font-weight: 600;
        letter-spacing: 0.3px;
        display: inline-block;
    }
</style>

<div x-data="{ 
    baseUrl: '/tripmanager/public',
    showNewModal: false, 
    showEditModal: false,
    showDeleteModal: false,
    showUploadModal: false,
    uploading: false,
    uploadProgress: 0,
    selectedRouteId: null,
    selectedRoute: { 
        id: '', 
        from_station: '',
        to_station: '',
        bus_fare: ''
    }
}" x-init="console.log('Stations Alpine.js initialized')">
    
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">Stations</h1>
            <p class="text-slate-500 font-medium">Manage and organize bus station connections.</p>
        </div>
        <div class="flex gap-2">
            <button @click="showUploadModal = true" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded font-bold text-xs transition flex items-center gap-2 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                </svg>
                Upload CSV
            </button>
            <button @click="showNewModal = true" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded font-bold text-xs transition flex items-center gap-2 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                </svg>
                New Route
            </button>
        </div>
    </div>

    <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
            <h3 class="font-bold text-slate-700">List of Station Routes</h3>
            <div class="flex gap-2">
                <button id="editSelectedBtn" class="text-indigo-600 hover:text-indigo-900 font-bold text-xs px-3 py-1 border border-indigo-200 rounded transition">
                    Edit
                </button>
                <button id="deleteSelectedBtn" class="text-red-600 hover:text-red-900 font-bold text-xs px-3 py-1 border border-red-200 rounded transition">
                    Delete
                </button>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="text-slate-400 text-[11px] uppercase tracking-wider border-b border-slate-100">
                        <th class="px-6 py-3 font-bold w-10">
                            <input type="checkbox" id="selectAllCheckbox" class="rounded border-slate-300">
                        </th>
                        <th class="px-6 py-3 font-bold">From Station</th>
                        <th class="px-6 py-3 font-bold">To Station</th>
                        <th class="px-6 py-3 font-bold">Bus Fare (ZMW)</th>
                        <th class="px-6 py-3 font-bold">Created Date</th>
                        <th class="px-6 py-3 font-bold text-right">Actions</th>
                      </tr>
                </thead>
                <tbody class="text-slate-600 text-[13px] divide-y divide-slate-50">
                    @forelse($routes as $route)
                    <tr class="hover:bg-slate-50 transition" data-id="{{ $route->id }}">
                        <td class="px-6 py-4">
                            <input type="checkbox" class="routeCheckbox rounded border-slate-300" data-id="{{ $route->id }}">
                        </td>
                        <td class="px-6 py-4">
                            <span class="station-badge inline-block text-indigo-700 text-sm font-mono">
                                {{ strtoupper($route->from_station ?? 'N/A') }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="station-badge inline-block text-indigo-700 text-sm font-mono">
                                {{ strtoupper($route->to_station ?? 'N/A') }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="font-mono font-semibold text-slate-700">ZMW {{ number_format($route->bus_fare, 2) }}</span>
                        </td>
                        <td class="px-6 py-4 text-slate-500 text-sm">{{ $route->created_at ? $route->created_at->format('d M Y') : '—' }}</td>
                        <td class="px-6 py-4 text-right">
                            <button @click="showEditModal = true; selectedRoute = {
                                id: '{{ $route->id }}', 
                                from_station: '{{ addslashes($route->from_station) }}', 
                                to_station: '{{ addslashes($route->to_station) }}', 
                                bus_fare: '{{ $route->bus_fare }}'
                            }" class="text-indigo-600 hover:text-indigo-900 font-bold px-2 text-xs transition">Edit</button>
                            <button @click="showDeleteModal = true; selectedRouteId = '{{ $route->id }}'" class="text-red-600 hover:text-red-900 font-bold px-2 text-xs transition ml-2">Delete</button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center justify-center text-slate-400">
                                <svg class="w-16 h-16 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                </svg>
                                <p class="font-medium">No routes found</p>
                                <p class="text-sm">Click "New Route" to add your first station connection.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- New Station Route Modal -->
    <div x-show="showNewModal" x-cloak class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm overflow-y-auto" style="display: none;">
        <div @click.away="showNewModal = false" class="bg-white rounded-lg shadow-2xl w-full max-w-md overflow-hidden my-8">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-indigo-600 to-indigo-700 sticky top-0">
                <h2 class="font-black text-white text-sm tracking-wide">NEW STATION ROUTE</h2>
                <button @click="showNewModal = false" class="text-white hover:text-slate-200 transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <form action="{{ route('stations.storeRoute') }}" method="POST" class="p-6">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">From Station <span class="text-red-500">*</span></label>
                        <input type="text" 
                               name="from_station" 
                               required 
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition uppercase-input" 
                               placeholder="ENTER STATION NAME (E.G., LUSAKA CITY)"
                               style="text-transform: uppercase;"
                               oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">To Station <span class="text-red-500">*</span></label>
                        <input type="text" 
                               name="to_station" 
                               required 
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition uppercase-input" 
                               placeholder="ENTER STATION NAME (E.G., KITWE)"
                               style="text-transform: uppercase;"
                               oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Bus Fare (ZMW) <span class="text-red-500">*</span></label>
                        <input type="number" 
                               name="bus_fare" 
                               required 
                               step="0.01" 
                               min="0" 
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition" 
                               placeholder="0.00">
                    </div>
                </div>
                <div class="mt-8 flex gap-3">
                    <button type="button" @click="showNewModal = false" class="flex-1 px-4 py-2 border border-slate-300 text-slate-600 rounded-lg font-bold text-xs hover:bg-slate-50 transition">Cancel</button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg font-bold text-xs hover:bg-indigo-700 transition shadow-md">Save Route</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Edit Station Route Modal -->
    <div x-show="showEditModal" x-cloak class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm overflow-y-auto" style="display: none;">
        <div @click.away="showEditModal = false" class="bg-white rounded-lg shadow-2xl w-full max-w-md overflow-hidden my-8">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-amber-500 to-orange-500 sticky top-0">
                <h2 class="font-black text-white text-sm tracking-wide">EDIT STATION ROUTE</h2>
                <button @click="showEditModal = false" class="text-white hover:text-slate-200 transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <form :action="baseUrl + '/stations/route/' + selectedRoute.id" method="POST" class="p-6">
                @csrf
                @method('PUT')
                <div class="space-y-4">
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">From Station <span class="text-red-500">*</span></label>
                        <input type="text" 
                               name="from_station" 
                               x-model="selectedRoute.from_station"
                               required 
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition uppercase-input" 
                               style="text-transform: uppercase;"
                               oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">To Station <span class="text-red-500">*</span></label>
                        <input type="text" 
                               name="to_station" 
                               x-model="selectedRoute.to_station"
                               required 
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition uppercase-input" 
                               style="text-transform: uppercase;"
                               oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Bus Fare (ZMW) <span class="text-red-500">*</span></label>
                        <input type="number" 
                               name="bus_fare" 
                               x-model="selectedRoute.bus_fare"
                               required 
                               step="0.01" 
                               min="0" 
                               class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition" 
                               placeholder="0.00">
                    </div>
                </div>
                <div class="mt-8 flex gap-3">
                    <button type="button" @click="showEditModal = false" class="flex-1 px-4 py-2 border border-slate-300 text-slate-600 rounded-lg font-bold text-xs hover:bg-slate-50 transition">Cancel</button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg font-bold text-xs hover:bg-indigo-700 transition shadow-md">Update Route</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm overflow-y-auto" style="display: none;">
        <div @click.away="showDeleteModal = false" class="bg-white rounded-lg shadow-2xl w-full max-w-md overflow-hidden my-8">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-red-600 to-red-700">
                <h5 class="modal-title font-black text-white text-sm tracking-wide">CONFIRM DELETE</h5>
                <button @click="showDeleteModal = false" class="text-white hover:text-slate-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <div class="modal-body p-6">
                <div class="flex items-center justify-center mb-4">
                    <div class="bg-red-100 rounded-full p-3">
                        <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                </div>
                <p class="text-center text-slate-700 mb-2 font-medium">Are you sure you want to delete this station route?</p>
                <p class="text-center text-red-600 text-sm mb-4"><strong>⚠️ This action cannot be undone.</strong></p>
                <form :action="baseUrl + '/stations/' + selectedRouteId" method="POST" class="flex justify-center gap-3">
                    @csrf
                    @method('DELETE')
                    <button type="button" @click="showDeleteModal = false" class="px-5 py-2 border border-slate-300 text-slate-600 rounded-lg font-bold text-xs hover:bg-slate-50 transition">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-red-600 text-white rounded-lg font-bold text-xs hover:bg-red-700 transition shadow-md">Delete Route</button>
                </form>
            </div>
        </div>
    </div>

    <!-- CSV Upload Modal -->
    <div x-show="showUploadModal" x-cloak class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm overflow-y-auto" style="display: none;">
        <div @click.away="showUploadModal = false" class="bg-white rounded-lg shadow-2xl w-full max-w-md overflow-hidden my-8">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-green-600 to-green-700 sticky top-0">
                <h2 class="font-black text-white text-sm tracking-wide">UPLOAD STATIONS CSV</h2>
                <button @click="showUploadModal = false" class="text-white hover:text-slate-200 transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <div class="p-6">
                <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                    <p class="text-xs text-blue-800 font-medium mb-1">📋 CSV Format Requirements:</p>
                    <ul class="text-xs text-blue-700 space-y-1">
                        <li>• Columns: <strong>from, to, bus_fare</strong></li>
                        <li>• Station names will be automatically capitalized</li>
                        <li>• Example: LUSAKA CITY, KITWE, 150.00</li>
                        <li>• <a href="#" id="downloadSampleCsv" class="text-green-600 hover:text-green-700 font-medium">📥 Download Sample CSV</a></li>
                    </ul>
                </div>
                
                <form id="csvUploadForm" enctype="multipart/form-data">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">CSV File <span class="text-red-500">*</span></label>
                            <input type="file" 
                                   id="csvFile" 
                                   name="csv_file" 
                                   accept=".csv,.txt"
                                   required 
                                   class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500 transition file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100">
                            <p class="text-xs text-slate-500 mt-1">Maximum file size: 5MB</p>
                        </div>
                        
                        <!-- Progress Bar -->
                        <div x-show="uploading" x-cloak class="mt-4">
                            <div class="flex justify-between text-xs text-slate-600 mb-1">
                                <span>Uploading...</span>
                                <span x-text="uploadProgress + '%'"></span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-2 overflow-hidden">
                                <div class="bg-green-600 h-2 rounded-full transition-all duration-300" :style="'width: ' + uploadProgress + '%'"></div>
                            </div>
                        </div>
                        
                        <div class="mt-6 flex gap-3">
                            <button type="button" @click="showUploadModal = false" class="flex-1 px-4 py-2 border border-slate-300 text-slate-600 rounded-lg font-bold text-xs hover:bg-slate-50 transition">Cancel</button>
                            <button type="submit" id="uploadBtn" class="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg font-bold text-xs hover:bg-green-700 transition shadow-md">Upload & Import</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<style>
    [x-cloak] { display: none !important; }
    .uppercase-input {
        text-transform: uppercase;
    }
    .uppercase-input::placeholder {
        text-transform: none;
    }
</style>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
    console.log('Alpine.js is ready for Stations');
});

$(document).ready(function() {
    // Select All Checkbox
    $('#selectAllCheckbox').change(function() {
        $('.routeCheckbox').prop('checked', $(this).prop('checked'));
    });
    
    // Edit Selected Button
    $('#editSelectedBtn').click(function() {
        var selected = $('.routeCheckbox:checked');
        if (selected.length === 0) {
            alert('Please select a route to edit');
            return;
        }
        if (selected.length > 1) {
            alert('Please select only one route to edit');
            return;
        }
        
        // Find and trigger the edit button in the selected row
        var $selectedRow = selected.closest('tr');
        var $editButton = $selectedRow.find('button:contains("Edit")');
        
        if ($editButton.length) {
            $editButton.trigger('click');
        } else {
            alert('Edit button not found for selected route');
        }
    });
    
    // Delete Selected Button
    $('#deleteSelectedBtn').click(function() {
        var selected = $('.routeCheckbox:checked');
        if (selected.length === 0) {
            alert('Please select a route to delete');
            return;
        }
        if (selected.length > 1) {
            alert('Please select only one route to delete');
            return;
        }
        
        var routeId = $(selected[0]).data('id');
        var component = document.querySelector('[x-data]').__x;
        if (component) {
            component.$data.selectedRouteId = routeId;
            component.$data.showDeleteModal = true;
        }
    });
    
    // CSV Upload Handler
    $('#csvUploadForm').on('submit', function(e) {
        e.preventDefault();
        
        var fileInput = document.getElementById('csvFile');
        var file = fileInput.files[0];
        
        if (!file) {
            alert('Please select a CSV file to upload');
            return;
        }
        
        // Check file extension
        var fileExt = file.name.split('.').pop().toLowerCase();
        if (fileExt !== 'csv' && fileExt !== 'txt') {
            alert('Please upload a valid CSV file (.csv or .txt)');
            return;
        }
        
        // Check file size (max 5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('File size must be less than 5MB');
            return;
        }
        
        var formData = new FormData();
        formData.append('csv_file', file);
        formData.append('_token', $('input[name="_token"]').val());
        
        var component = document.querySelector('[x-data]').__x;
        if (component) {
            component.$data.uploading = true;
            component.$data.uploadProgress = 0;
        }
        
        $.ajax({
            url: '/tripmanager/public/stations/upload-csv',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = Math.round((evt.loaded / evt.total) * 100);
                        if (component) {
                            component.$data.uploadProgress = percentComplete;
                        }
                    }
                }, false);
                return xhr;
            },
            success: function(response) {
                if (component) {
                    component.$data.uploading = false;
                    component.$data.showUploadModal = false;
                }
                
                if (response.success) {
                    var message = response.message;
                    if (response.imported_count) {
                        message += `\n\n✅ Successfully imported: ${response.imported_count} routes`;
                    }
                    if (response.skipped_count && response.skipped_count > 0) {
                        message += `\n⚠️ Skipped (duplicates): ${response.skipped_count} routes`;
                    }
                    if (response.errors && response.errors.length > 0) {
                        message += `\n\n❌ Errors:\n${response.errors.join('\n')}`;
                    }
                    alert(message);
                    location.reload(); // Reload to show new routes
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr) {
                if (component) {
                    component.$data.uploading = false;
                }
                
                var errorMsg = 'An error occurred while uploading the file.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                alert('Upload failed: ' + errorMsg);
            }
        });
    });
    
    // Download sample CSV
    $('#downloadSampleCsv').on('click', function(e) {
        e.preventDefault();
        
        var sampleData = "from,to,bus_fare\nLUSAKA CITY,KITWE,150.00\nLUSAKA CITY,NDOLA,180.00\nKITWE,NDOLA,80.00\nLUSAKA CITY,LIVINGSTONE,220.00\n";
        
        var blob = new Blob([sampleData], { type: 'text/csv' });
        var link = document.createElement('a');
        var url = URL.createObjectURL(blob);
        link.href = url;
        link.download = 'stations_sample.csv';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    });
});
</script>
@endpush