@extends('layouts.vertical')

@section('content')
<div class="container-fluid">
    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-layer-group me-2"></i>{{ __('brands.product_lines_title') }}</h1>
            <p class="text-muted mb-0">{{ __('brands.product_lines_subtitle') }}</p>
        </div>
    </div>

    {{-- Breadcrumbs --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('brands.breadcrumb_products') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('brands.breadcrumb_catalogs') }}</a></li>
            <li class="breadcrumb-item active">{{ __('brands.product_lines_title') }}</li>
        </ol>
    </nav>

    {{-- Main Content --}}
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0"><i class="fad fa-list me-2"></i>{{ __('brands.product_lines_list') }}</h5>
        </div>
        <div class="card-body">
            <button class="btn btn-primary btn-sm mb-3" onclick="openLineModal()">
                <i class="fad fa-plus me-1"></i>{{ __('brands.new_product_line') }}
            </button>

            <div class="table-responsive">
                <table id="linesTable" class="table table-sm table-hover">
                    <thead>
                        <tr>
                            <th>{{ __('brands.col_id') }}</th>
                            <th>{{ __('brands.col_name') }}</th>
                            <th>{{ __('brands.col_description') }}</th>
                            <th>{{ __('brands.col_status') }}</th>
                            <th class="text-center">{{ __('brands.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Include Product Line Modal (Shared) --}}
@include('products::shared.product-line-modal')

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    loadLines();
});

// Load product lines
function loadLines() {
    $.get('/products/product-lines/get', function(data) {
        let html = '';
        data.forEach(l => {
            const status = l.active
                ? '<span class="badge bg-success">{{ __('brands.status_active') }}</span>'
                : '<span class="badge bg-secondary">{{ __('brands.status_inactive') }}</span>';
            
            html += `<tr>
                <td>${l.id}</td>
                <td><strong>${l.name}</strong></td>
                <td>${l.description || '-'}</td>
                <td>${status}</td>
                <td class="text-center">
                    <button class="btn btn-sm btn-warning" onclick="editLine(${l.id})">
                        <i class="fad fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="deleteLine(${l.id})">
                        <i class="fad fa-trash"></i>
                    </button>
                </td>
            </tr>`;
        });
        $('#linesTable tbody').html(html);
    });
}
</script>
@endsection