@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('rooms.index') }}">Rooms</a></li>
                <li class="breadcrumb-item active">Import Rooms</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">Import Rooms from Excel</h1>

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Excel Import</h4>
                    <div class="panel-heading-btn">
                        <a href="{{ route('rooms.index') }}" class="btn btn-custom">
                            <i class="fa fa-arrow-left"></i> Back to Rooms
                        </a>
                        <a href="{{ route('rooms.downloadTemplate') }}" class="btn btn-custom">
                            <i class="fa fa-download"></i> Download Template
                        </a>
                    </div>
                </div>

                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <h6><i class="fa fa-exclamation-triangle"></i> Please correct the following errors:</h6>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (session('success'))
                        <div class="alert alert-success">
                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                        </div>
                    @endif

                    <!-- Import Errors Display -->
                    @if (session('import_errors'))
                        <div class="alert alert-warning">
                            <h6><i class="fa fa-exclamation-triangle"></i> Import Errors Details:</h6>
                            <div class="error-details" style="max-height: 300px; overflow-y: auto;">
                                @foreach (session('import_errors') as $error)
                                    <div class="error-item mb-2 p-2 bg-light border-left border-warning">
                                        <strong>Row {{ $error['row'] }}:</strong>
                                        <ul class="mb-0 mt-1">
                                            @foreach ($error['errors'] as $errorMsg)
                                                <li>{{ $errorMsg }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Instructions Section -->
                    <div class="row">
                        <div class="col-md-6">
                            <!-- Import Form -->
                            <div class="import-section">
                                <h5 class="section-title">Upload Excel File</h5>

                                <!-- Debug Form Information -->
                                <div class="alert alert-info">
                                    <small><strong>Debug Info:</strong> Form action: {{ route('rooms.import') }}</small>
                                </div>

                                <form action="{{ route('rooms.import') }}" method="POST" enctype="multipart/form-data"
                                    id="importForm">
                                    @csrf

                                    <div class="form-group">
                                        <label for="excel_file"><strong>Select Excel File *</strong></label>
                                        <input type="file" name="excel_file" id="excel_file" class="form-control-file"
                                            accept=".xlsx,.xls" required
                                            style="display: block; width: 100%; padding: 10px; border: 2px dashed #007bff; border-radius: 5px; background: #f8f9fa;">

                                        <small class="form-text text-muted mt-2">
                                            <i class="fa fa-info-circle"></i>
                                            Supported formats: .xlsx, .xls. Maximum size: 10MB
                                        </small>

                                        <!-- File Info Display -->
                                        <div id="fileInfo"
                                            style="display: none; margin-top: 10px; padding: 10px; background: #e7f3ff; border-radius: 5px;">
                                            <strong>Selected File:</strong>
                                            <div id="fileName"></div>
                                            <div id="fileSize"></div>
                                            <div id="fileType"></div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <button type="submit" class="btn btn-custom" id="importBtn">
                                            <i class="fa fa-upload"></i> Import Rooms
                                        </button>
                                        <button type="button" class="btn btn-custom" onclick="resetForm()">
                                            <i class="fa fa-refresh"></i> Reset
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <!-- Instructions -->
                            <div class="instructions-section">
                                <h5 class="section-title">Import Instructions</h5>

                                <div class="alert alert-info">
                                    <h6><i class="fa fa-info-circle"></i> Before You Start</h6>
                                    <ol class="mb-0">
                                        <li>Download the Excel template using the button above</li>
                                        <li>Fill in your room data according to the template format</li>
                                        <li>Save your file and upload it here</li>
                                    </ol>
                                </div>

                                <div class="requirements-box">
                                    <h6><i class="fa fa-list"></i> Column Requirements</h6>
                                    <div class="requirement-item">
                                        <strong>room:</strong> <span class="badge badge-danger">Required</span>
                                        <small class="d-block text-muted">Unique room number/name (max 128
                                            characters)</small>
                                    </div>
                                    <div class="requirement-item">
                                        <strong>guestname:</strong> <span class="badge badge-secondary">Optional</span>
                                        <small class="d-block text-muted">Guest name (max 256 characters)</small>
                                    </div>
                                    <div class="requirement-item">
                                        <strong>description:</strong> <span class="badge badge-secondary">Optional</span>
                                        <small class="d-block text-muted">Room description (max 1000 characters)</small>
                                    </div>
                                    <div class="requirement-item">
                                        <strong>username_cast:</strong> <span class="badge badge-secondary">Optional</span>
                                        <small class="d-block text-muted">WiFi network name/SSID (max 2048
                                            characters)</small>
                                    </div>
                                    <div class="requirement-item">
                                        <strong>password_cast:</strong> <span class="badge badge-secondary">Optional</span>
                                        <small class="d-block text-muted">WiFi password (8-12 characters)</small>
                                    </div>
                                </div>

                                <div class="alert alert-warning">
                                    <h6><i class="fa fa-exclamation-triangle"></i> Important Notes</h6>
                                    <ul class="mb-0">
                                        <li>Room type will be automatically set to default (ID: 1)</li>
                                        <li>Both WiFi SSID and password are required for QR code generation</li>
                                        <li>Duplicate room names will be skipped</li>
                                        <li>Invalid rows will be skipped with error details shown</li>
                                        <li>Room status will be set to "checked_out" by default</li>
                                    </ul>
                                </div>

                                <!-- Troubleshooting Section -->
                                <div class="alert alert-secondary">
                                    <h6><i class="fa fa-wrench"></i> Troubleshooting</h6>
                                    <ul class="mb-0">
                                        <li>Make sure your file is saved as .xlsx or .xls format</li>
                                        <li>Check that the file size is under 10MB</li>
                                        <li>Ensure the first row contains the column headers exactly as shown in the
                                            template</li>
                                        <li>Don't leave empty rows between data</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <style>
        .section-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #007bff;
            display: inline-block;
        }

        .import-section {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            margin-bottom: 1rem;
        }

        .instructions-section {
            background-color: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .requirements-box {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 6px;
            margin: 1rem 0;
        }

        .requirement-item {
            margin-bottom: 0.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e9ecef;
        }

        .requirement-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .error-details {
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            background-color: #fffbf0;
        }

        .error-item {
            font-size: 0.9rem;
        }

        .alert {
            border-radius: 8px;
        }

        .badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        .border-left {
            border-left: 4px solid currentColor !important;
        }

        .border-warning {
            border-color: #ffc107 !important;
        }

        .btn-lg {
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('excel_file');
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const fileType = document.getElementById('fileType');
            const importForm = document.getElementById('importForm');
            const importBtn = document.getElementById('importBtn');

            // Handle file selection
            fileInput.addEventListener('change', function(e) {
                console.log('File input changed');
                console.log('Files:', this.files);
                console.log('Files length:', this.files.length);

                const file = this.files[0];
                if (file) {
                    console.log('Selected file:', {
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        lastModified: file.lastModified
                    });

                    // Show file info
                    fileName.textContent = `Name: ${file.name}`;
                    fileSize.textContent = `Size: ${(file.size / 1024).toFixed(2)} KB`;
                    fileType.textContent = `Type: ${file.type}`;
                    fileInfo.style.display = 'block';

                    // Validate file type
                    const allowedTypes = ['.xlsx', '.xls'];
                    const fileExtension = '.' + file.name.split('.').pop().toLowerCase();

                    if (!allowedTypes.includes(fileExtension)) {
                        alert('Please select a valid Excel file (.xlsx or .xls)');
                        resetFileInput();
                        return;
                    }

                    // Validate file size (10MB)
                    const maxSize = 10 * 1024 * 1024; // 10MB in bytes
                    if (file.size > maxSize) {
                        alert('File size cannot exceed 10MB');
                        resetFileInput();
                        return;
                    }

                    importBtn.disabled = false;
                } else {
                    console.log('No file selected');
                    fileInfo.style.display = 'none';
                    importBtn.disabled = true;
                }
            });

            // Handle form submission
            importForm.addEventListener('submit', function(e) {
                console.log('Form submit triggered');

                const file = fileInput.files[0];
                console.log('File on submit:', file);

                if (!file) {
                    e.preventDefault();
                    alert('Please select an Excel file to import.');
                    console.log('Form submission prevented - no file');
                    return false;
                }

                console.log('Form will be submitted with file:', file.name);

                // Disable button to prevent double submission
                importBtn.disabled = true;
                importBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';

                return true;
            });

            function resetFileInput() {
                fileInput.value = '';
                fileInfo.style.display = 'none';
                importBtn.disabled = true;
            }

            window.resetForm = function() {
                resetFileInput();
                importBtn.disabled = false;
                importBtn.innerHTML = '<i class="fa fa-upload"></i> Import Rooms';
            };

            // Initial state
            importBtn.disabled = true;
        });
    </script>
@endsection