@extends('user.layout')

{{-- this style will be applied when the direction of language is right-to-left --}}
@includeIf('user.partials.rtl-style')

@section('content')
<style>
    .ref-main-card {
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px !important;
        background-color: #ffffff;
    }
    .ref-table th {
        background-color: #fafbfe !important;
        color: #718096 !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px;
        padding: 16px 24px !important;
        border-bottom: 1px solid #edf2f9 !important;
        border-top: none !important;
    }
    .ref-table td {
        padding: 24px 24px !important;
        vertical-align: middle !important;
        border-top: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .ref-table tr:last-child td {
        border-bottom: none !important;
    }
    .custom-bg-light-success {
        background-color: #e6f6ec !important;
        color: #28a745 !important;
    }
    .custom-bg-light-danger {
        background-color: #fde8e8 !important;
        color: #dc3545 !important;
    }
    .custom-bg-light-warning {
        background-color: #fff8eb !important;
        color: #f5a623 !important;
    }
    .ref-action-btn {
        border-radius: 8px !important;
        font-weight: 500;
        font-size: 0.875rem;
        padding: 8px 16px;
    }
    .style-select-all-box {
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 0 16px;
        background-color: #fff;
        height: 42px;
        display: inline-flex;
        align-items: center;
    }
    .ref-search-input {
        height: 42px;
        border-color: #e2e8f0;
        font-size: 0.9rem;
    }
    .ref-badge-meli {
        border-radius: 6px;
        padding: 8px 14px;
        font-weight: 600;
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
    }
    .ref-btn-edit {
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.85rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        color: #4a5568;
        padding: 6px 16px;
        height: 36px;
    }
    .ref-btn-edit:hover {
        background: #f8fafc;
        color: #0061f2;
    }
    .ref-btn-star {
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.85rem;
        background: #fff8e7;
        border: 1px solid #ffeeba;
        color: #e0a800;
        padding: 6px 14px;
        height: 36px;
    }
    .ref-btn-pdf {
        border-radius: 6px;
        width: 36px;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #fde8e8;
        border: 1px solid #f8d7da;
        color: #dc3545;
    }
    .ref-btn-pdf:hover {
        background-color: #dc3545;
        color: #ffffff;
        border-color: #dc3545;
    }
    .filter-toggle-btn.active {
        background-color: #e6f0ff !important;
        border-color: #0061f2 !important;
        color: #0061f2 !important;
    }
    .filter-badge-count {
        background-color: #0061f2;
        color: #fff;
        border-radius: 50%;
        font-size: 0.7rem;
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px;
    }
</style>

    {{-- Top Heading Layout Row --}}
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between mb-4 px-1">
        <div>
            <h2 class="font-weight-bold text-dark mb-1" style="font-size: 1.65rem; letter-spacing: -0.5px;">{{ __('Gestión de Autos') }}</h2>
            <p class="text-muted mb-0" style="font-size: 0.9rem;">{{ __('Administra tus publicaciones de vehículos.') }}</p>
        </div>
        <div class="d-flex align-items-center mt-3 mt-md-0">
            <button type="button" id="exportExcelBtn"
                class="btn btn-white border ref-action-btn bg-white text-secondary mr-2 shadow-sm">
                <i class="fas fa-file-excel mr-2 text-muted"></i>{{ __('Exportar') }}
            </button>
            <a href="{{ route('user.property_management.type') }}"
                class="btn btn-primary ref-action-btn mr-2 shadow-sm" style="background-color: #0061f2; border-color: #0061f2;">
                <i class="fas fa-plus mr-2"></i>{{ __('Nuevo Auto') }}
            </a>
            <a href="{{ route('reda.integraciones.mercado_libre.user.sync_all') }}"
                class="btn btn-dark ref-action-btn shadow-sm" style="background-color: #2d3238; border-color: #2d3238;">
                <i class="fas fa-sync-alt mr-2"></i>{{ __('Mercadolibre') }}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card ref-main-card shadow-sm">

                {{-- Unified Toolbar Header Strip --}}
                <div class="card-header bg-white border-bottom-0 pt-4 pb-3 px-4">
                    <div class="d-flex align-items-center justify-content-between w-100">

                        {{-- Left Side Side-by-Side: Checkbox + Action --}}
                        <div class="d-flex align-items-center">
                            <div class="style-select-all-box mr-2">
                                <input type="checkbox" class="bulk-check mr-2" data-val="all" id="selectAllMain" style="transform: scale(1.1); cursor:pointer;">
                                <label for="selectAllMain" class="mb-0 text-secondary font-weight-normal" style="cursor: pointer; font-size: 0.9rem; color: #4a5568 !important;">{{ __('Seleccionar todo') }}</label>
                            </div>

                            <button class="btn btn-white border text-danger ref-action-btn bulk-delete d-none"
                                data-href="{{ route('user.property_management.bulk_delete_property') }}" style="height: 42px; background-color: #fff; border-color: #e2e8f0;">
                                <i class="far fa-trash-alt mr-2"></i>{{ __('Eliminar seleccionados') }}
                            </button>
                        </div>

                        {{-- Right Side Side-by-Side: Filters + Search Input Component --}}
                        <div class="d-flex align-items-center">
                            <button class="btn btn-white border ref-action-btn text-secondary mr-2 filter-toggle-btn {{ !empty($filters) && count(array_filter($filters)) ? 'active' : '' }}"
                                type="button" data-toggle="collapse" data-target="#filterPanel" aria-expanded="false" aria-controls="filterPanel"
                                style="height: 42px; background-color: #fff; border-color: #e2e8f0; padding: 0 20px;">
                                <i class="fas fa-filter mr-2 text-muted"></i>{{ __('Filtros') }}
                                @php $activeFilterCount = !empty($filters) ? count(array_filter($filters, fn($v) => $v !== null && $v !== '')) : 0; @endphp
                                @if($activeFilterCount > 0)
                                    <span class="filter-badge-count">{{ $activeFilterCount }}</span>
                                @endif
                            </button>

                            <form action="{{ route('user.property_management.properties') }}" method="get" id="carSearchForm" class="mb-0 mr-2">
                                <div class="input-group" style="width: 280px;">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-white border-right-0" style="border-color: #e2e8f0;"><i class="fas fa-search text-muted"></i></span>
                                    </div>
                                    <input type="text" name="title" value="{{ request()->input('title') }}"
                                        class="form-control border-left-0 text-muted ref-search-input" placeholder="{{ __('Buscar autos...') }}" onchange="document.getElementById('carSearchForm').submit();">
                                </div>
                            </form>
                            {{--
                            @if(View::exists('user.partials.languages'))
                                <div style="height: 42px; display: inline-block;">
                                    @includeIf('user.partials.languages')
                                </div>
                            @endif
                            --}}
                        </div>

                    </div>
                </div>

                {{-- Collapsible Filter Panel --}}
                @include('user.property-management.partials.filter-panel')

                {{-- Table Grid Display Layout --}}
                <div class="card-body p-0">
                    @if (count($properties) == 0)
                        <h3 class="text-center py-5 text-muted font-weight-normal">{{ __('NO SE ENCONTRARON VEHÍCULOS') }}</h3>
                    @else
                        <div class="table-responsive">
                            <table class="table ref-table mb-0">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 60px;" class="text-center"></th>
                                        <th scope="col" style="min-width: 260px;">{{ __('AUTO') }}</th>
                                        <th scope="col">{{ __('CONDICIÓN Y PRECIO') }}</th>
                                        <th scope="col" style="width: 140px;">{{ __('ESTADO') }}</th>
                                        <th scope="col" style="min-width: 180px;">{{ __('MERCADOLIBRE') }}</th>

                                        <th scope="col" class="text-center" style="width: 240px;">{{ __('ACCIONES') }}</th>
                                         <th scope="col" class="text-center" style="width: 80px;">{{ __('FICHA QR') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($properties as $property)
                                        <tr>
                                            <td class="text-center">
                                                <input type="checkbox" class="bulk-check" data-val="{{ $property->id }}" style="transform: scale(1.1); cursor:pointer;">
                                            </td>

                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if($property->featured_image)
                                                        <img src="{{ asset('assets/img/property/featureds/' . $property->featured_image) }}"
                                                             alt="Vehicle image"
                                                             class="rounded border mr-3"
                                                             style="width: 85px; height: 64px; object-fit: cover; border-color: #e2e8f0 !important;">
                                                    @else
                                                        <div class="rounded border bg-light d-flex align-items-center justify-content-center mr-3" style="width: 85px; height: 64px; border-color: #e2e8f0 !important;">
                                                            <i class="fas fa-car text-muted" style="font-size: 1.2rem;"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <h6 class="mb-1 font-weight-bold" style="color: #1a202c; font-size: 0.95rem; line-height: 1.4;">
                                                            {{ strlen($property->title) > 45 ? mb_substr($property->title, 0, 45, 'utf-8') . '...' : $property->title }}
                                                        </h6>
                                                        <small class="text-muted font-weight-normal" style="font-size: 0.825rem; color: #718096 !important;">Autos y Camionetas</small>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="text-muted small mb-1 font-weight-normal" style="color: #718096 !important;">
                                                    {{ $property->year ? 'Usado' : 'Nuevo' }}
                                                </div>
                                                <div class="font-weight-bold text-success" style="font-size: 1rem; color: #38a169 !important;">
                                                    {{ $property->currency_symbol ?? 'US$' }} {{ number_format($property->price, 0, '', '.') }}
                                                </div>
                                            </td>

                                            <td>
                                                <form id="statusForm{{ $property->id }}" class="d-inline-block"
                                                    action="{{ route('user.property_management.update_status') }}" method="post">
                                                    @csrf
                                                    <input type="hidden" name="propertyId" value="{{ $property->id }}">

                                                    <select class="form-control form-control-sm border-0 font-weight-bold py-1 px-2 {{ $property->status == 1 ? 'custom-bg-light-success text-success' : 'custom-bg-light-danger text-danger' }}"
                                                        name="status" onchange="document.getElementById('statusForm{{ $property->id }}').submit();"
                                                        style="border-radius: 6px; cursor: pointer; width: 105px; font-size: 0.85rem; height: 34px; display: inline-block;">
                                                        <option value="1" {{ $property->status == 1 ? 'selected' : '' }}>{{ __('Activo') }}</option>
                                                        <option value="0" {{ $property->status == 0 ? 'selected' : '' }}>{{ __('Inactivo') }}</option>
                                                    </select>
                                                </form>
                                            </td>

                                            <td>
                                                <div class="d-flex flex-column align-items-start">
                                                    @if($property->meli_item_id && $property->meli_status == 'active')
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="badge ref-badge-meli custom-bg-light-success text-success mr-2">
                                                                <i class="fas fa-check-circle mr-1" style="font-size: 0.75rem;"></i> Publicado
                                                            </span>
                                                            @if($property->meli_permalink)
                                                                <a href="{{ $property->meli_permalink }}" target="_blank" class="text-muted small d-inline-flex align-items-center">
                                                                    <i class="fas fa-external-link-alt" style="font-size: 0.8rem; color: #a0aec0;"></i>
                                                                </a>
                                                            @endif
                                                        </div>
                                                        @if($property->meli_listing_type)
                                                         <div class="text-capitalize d-flex align-items-center"
     style="font-size: 0.85rem; font-weight: 600; color: #4a5568 !important; letter-spacing: 0.2px; margin-top: 6px; padding-left: 4px;">
    {{-- Up-scaled clean circular check with inline spacing --}}
    <svg viewBox="0 0 24 24" fill="none" stroke="#4a5568" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
         style="width: 16px; height: 16px; flex-shrink: 0; margin-right: 6px;">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M9 11l3 3 5-5"></path>
    </svg>
    {{ str_replace('_', ' ', $property->meli_listing_type) }}
</div>
                                                        @endif
                                                    @elseif($property->meli_status == 'payment_required')
                                                        <div class="d-flex align-items-center">
                                                            <span class="badge ref-badge-meli custom-bg-light-warning text-warning mr-2">
                                                                <i class="fas fa-exclamation-triangle mr-1" style="font-size: 0.75rem;"></i> Pendiente Pago
                                                            </span>
                                                            <a href="{{ !empty($property->meli_payment_link) ? $property->meli_payment_link : $property->meli_permalink }}" target="_blank" class="text-muted small d-inline-flex align-items-center">
                                                                <i class="fas fa-external-link-alt" style="font-size: 0.8rem; color: #a0aec0;"></i>
                                                            </a>
                                                        </div>
                                                    @else
                                                        <div class="d-flex align-items-center">
                                                            <span class="badge ref-badge-meli custom-bg-light-warning text-warning mr-2">
                                                                <i class="far fa-clock mr-1" style="font-size: 0.75rem;"></i> No publicado
                                                            </span>
                                                            @if($property->meli_permalink)
                                                                <a href="{{ $property->meli_permalink }}" target="_blank" class="text-muted small d-inline-flex align-items-center">
                                                                    <i class="fas fa-external-link-alt" style="font-size: 0.8rem; color: #a0aec0;"></i>
                                                                </a>
                                                            @endif
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>

                                            <td class="text-center">
                                                <div class="d-flex align-items-center justify-content-center">
                                                    {{-- Edit Button --}}
                                                    <a class="btn btn-sm ref-btn-edit d-inline-flex align-items-center mr-2"
                                                       href="{{ route('user.property_management.edit', $property->id) }}">
                                                        <i class="fas fa-pencil-alt text-primary mr-2" style="font-size: 0.75rem;"></i>{{ __('Editar') }}
                                                    </a>

                                                    {{-- Highlights Status Feature Toggle --}}
                                                    <form id="featureForm{{ $property->id }}" class="d-inline-block m-0 mr-2"
                                                        action="{{ route('user.property_management.update_featured') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="requestId" value="{{ $property->id }}">
                                                        <input type="hidden" name="featured" value="{{ $property->featured == 1 ? '0' : '1' }}">

                                                        <button type="submit" class="btn btn-sm ref-btn-star d-inline-flex align-items-center"
                                                            title="{{ $property->featured == 1 ? __('Quitar Destacado') : __('Destacar Publicación') }}">
                                                            <i class="fas fa-star mr-2" style="font-size: 0.8rem;"></i>
                                                            <span>{{ __('Destacar') }}</span>
                                                        </button>
                                                    </form>

                                                    {{-- Delete Button Wrapper Layout Component --}}
                                                    <form class="d-inline-block deleteForm m-0"
                                                        action="{{ route('user.property_management.delete_property') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="property_id" value="{{ $property->id }}">
                                                        <button type="submit" class="btn btn-sm btn-white text-muted d-inline-flex align-items-center justify-content-center deletebtn" style="border-radius: 6px; width: 36px; height: 36px; padding: 0; background: #fff; border: 1px solid #e2e8f0;">
                                                            <i class="fas fa-trash-alt text-danger" style="font-size: 0.8rem;"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                              {{-- PDF Column Content --}}
                                            <td class="text-center">
                                                <a href="{{ route('user.property_management.pdf', $property->id) }}"
                                                   class="btn ref-btn-pdf shadow-sm"
                                                   target="_blank">
                                                    <i class="fas fa-file-pdf"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        {{-- Pagination Data Navigation Layout Panel --}}
                        <div class="card-footer bg-white border-top-0 py-4 px-4">
                            <div class="d-flex align-items-center justify-content-between flex-column flex-sm-row">
                                <div class="text-muted font-weight-normal mb-3 mb-sm-0" style="font-size: 0.9rem; color: #718096 !important;">
                                    {{ __('Mostrando') }} {{ $properties->firstItem() }} {{ __('a') }} {{ $properties->lastItem() }} {{ __('de') }} {{ $properties->total() }} {{ __('resultados') }}
                                </div>
                                <div class="pagination-isolated-block">
                                    {{ $properties->appends(array_merge($filters ?? [], ['title' => request()->input('title')]))->links() }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('assets/js/feature-payment.js') }}"></script>
    <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"
        onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';"></script>

    {{-- Cascading dropdown logic for the filter panel (Brand -> Model -> Version, State -> City) --}}

    <script>
        document.getElementById('selectAllMain').addEventListener('change', function() {
            let checkboxes = document.querySelectorAll('.table tbody .bulk-check');
            checkboxes.forEach(cb => cb.checked = this.checked);

            let deleteBulkBtn = document.querySelector('.bulk-delete');
            if(this.checked && checkboxes.length > 0) {
                deleteBulkBtn.classList.remove('d-none');
            } else {
                deleteBulkBtn.classList.add('d-none');
            }
        });

        // ===================== Export to Excel (client-side, no server round-trip) =====================
        document.getElementById('exportExcelBtn').addEventListener('click', function () {

            if (typeof XLSX === 'undefined') {
                console.error('XLSX library failed to load from CDN. Check network/CSP and console for blocked requests.');
                alert('{{ __('No se pudo cargar la librería de exportación. Revisa tu conexión e inténtalo de nuevo.') }}');
                return;
            }

            const table = document.querySelector('.ref-table');
            if (!table) {
                console.error('Export: .ref-table not found in DOM.');
                return;
            }

            const rows = table.querySelectorAll('tbody tr');
            if (rows.length === 0) {
                alert('{{ __('No hay vehículos para exportar.') }}');
                return;
            }

            try {
                const data = [
                    ['ID', 'Auto', 'Categoría', 'Condición', 'Precio', 'Moneda', 'Estado', 'MercadoLibre']
                ];

                rows.forEach(function (row) {
                    const checkbox = row.querySelector('.bulk-check');
                    const id = checkbox ? checkbox.getAttribute('data-val') : '';

                    const titleEl = row.querySelector('td:nth-child(2) h6');
                    const title = titleEl ? titleEl.textContent.trim() : '';

                    const categoryEl = row.querySelector('td:nth-child(2) small');
                    const category = categoryEl ? categoryEl.textContent.trim() : '';

                    const conditionEl = row.querySelector('td:nth-child(3) div:first-child');
                    const condition = conditionEl ? conditionEl.textContent.trim() : '';

                    const priceEl = row.querySelector('td:nth-child(3) div:nth-child(2)');
                    const priceText = priceEl ? priceEl.textContent.trim() : '';
                    // priceText looks like "US$ 35.500" -> split currency symbol from the number
                    const priceParts = priceText.split(/\s+/);
                    const currency = priceParts.shift() || '';
                    const price = priceParts.join(' ').replace(/\./g, '');

                    const statusEl = row.querySelector('td:nth-child(4) select');
                    const status = statusEl ? statusEl.options[statusEl.selectedIndex].text.trim() : '';

                    const meliEl = row.querySelector('td:nth-child(5) .ref-badge-meli');
                    const meli = meliEl ? meliEl.textContent.trim() : '';

                    data.push([id, title, category, condition, currency, price, status, meli]);
                });

                console.log('Export: rows collected', data);

                const worksheet = XLSX.utils.aoa_to_sheet(data);

                // Reasonable column widths
                worksheet['!cols'] = [
                    { wch: 8 },  // ID
                    { wch: 45 }, // Auto
                    { wch: 20 }, // Categoría
                    { wch: 12 }, // Condición
                    { wch: 10 }, // Moneda
                    { wch: 14 }, // Precio
                    { wch: 12 }, // Estado
                    { wch: 18 }  // MercadoLibre
                ];

                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook, worksheet, 'Autos');

                const today = new Date().toISOString().slice(0, 10);
                XLSX.writeFile(workbook, 'autos_' + today + '.xlsx');
            } catch (err) {
                console.error('Export failed:', err);
                alert('{{ __('Ocurrió un error al exportar. Revisa la consola para más detalles.') }}');
            }
        });
        // ===================== End Export to Excel =====================
    </script>

@endsection