{{-- New-Unity ERP | Modules/Products/Resources/Views/products/details.blade.php | v1.0 | 28/06/2026 --}}
{{-- v1.0 — Vista de detalles del producto (renombrado desde show.blade.php). --}}
{{--         Acceso directo desde Sales, Warehouse y Billing. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">
    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <a href="{{ route('products.show', $product->id) }}" class="btn btn-sm btn-light">
                <i class="fad fa-arrow-left me-1"></i>{{ __('products.back') }}
            </a>
        </div>
        <div>
            <a href="{{ route('products.show', $product->id) }}" class="btn btn-sm btn-secondary me-1">
                <i class="fad fa-chart-bar me-1"></i>{{ __('products.technical-sheet') }}
            </a>
            <a href="{{ route('products.edit', $product->id) }}" class="btn btn-sm btn-warning">
                <i class="fad fa-edit me-1"></i>{{ __('products.edit') }}
            </a>
            <button class="btn btn-sm btn-danger" onclick="deleteProduct()">
                <i class="fad fa-trash me-1"></i>{{ __('products.delete-btn') }}
            </button>
        </div>
    </div>

    <div class="row">
        {{-- Left Column: Product Image & Quick Info --}}
        <div class="col-lg-4">
            {{-- Product Image Card --}}
            <div class="card mb-3">
                <div class="card-body text-center p-3">
                    @if($product->photo)
                        <img src="{{ asset('storage/' . $product->photo) }}" class="img-fluid rounded mb-2" style="max-height: 180px; object-fit: contain;" alt="{{ $product->product_name }}">
                    @else
                        <div class="bg-light rounded d-flex align-items-center justify-content-center mb-2" style="height: 180px;">
                            <div class="text-muted">
                                <i class="fad fa-box fa-3x mb-1"></i>
                                <p class="mb-0 small">{{ __('products.no-image') }}</p>
                            </div>
                        </div>
                    @endif
                    
                    <h6 class="mb-1">{{ $product->brand->validbrand_id }}</h6>
                    <p class="text-muted mb-2 small">{{ $product->family }} {{ $product->model }}</p>
                    
                    {{-- Quick Stats --}}
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="border rounded p-2">
                                <small class="text-muted d-block">{{ __('products.sku') }}</small>
                                <strong>{{ $product->sku }}</strong>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-2">
                                <small class="text-muted d-block">{{ __('products.code') }}</small>
                                <strong>{{ $product->product_code }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Category & Classification --}}
            <div class="card mb-3">
                <div class="card-header py-2">
                    <h6 class="mb-0 small"><i class="fad fa-sitemap me-1"></i>{{ __('products.show-classification') }}</h6>
                </div>
                <div class="card-body p-3">
                    <div class="mb-2">
                        <small class="text-muted d-block" style="font-size: 0.7rem;">{{ __('products.show-group') }}</small>
                        <p class="mb-0 fw-bold small">{{ $product->category->group->es_name }}</p>
                    </div>
                    <div class="mb-2">
                        <small class="text-muted d-block" style="font-size: 0.7rem;">{{ __('products.show-category') }}</small>
                        <p class="mb-0 fw-bold small">{{ $product->category->name }}</p>
                    </div>
                    <div class="mb-2">
                        <small class="text-muted d-block" style="font-size: 0.7rem;">{{ __('products.show-group-code') }}</small>
                        <p class="mb-0">
                            <span class="badge bg-secondary small">{{ $product->group_code }}</span>
                        </p>
                    </div>
                    <div class="mb-0">
                        <small class="text-muted d-block" style="font-size: 0.7rem;">{{ __('products.show-sat-code') }}</small>
                        <p class="mb-0">
                            <span class="badge bg-info small">{{ $product->tax_code }}</span>
                        </p>
                    </div>
                </div>
            </div>

            {{-- Barcode Info --}}
            @if($product->barcode)
            <div class="card">
                <div class="card-header py-2">
                    <h6 class="mb-0 small"><i class="fad fa-barcode me-1"></i>{{ __('products.barcode') }}</h6>
                </div>
                <div class="card-body text-center p-3">
                    <h6 class="mb-1">{{ $product->barcode }}</h6>
                    @if($product->generic_barcode)
                        <span class="badge bg-warning">{{ __('products.generic') }}</span>
                    @endif
                </div>
            </div>
            @endif
        </div>

        {{-- Right Column: Product Details --}}
        <div class="col-lg-8">
            {{-- Product Title --}}
            <div class="card mb-3">
                <div class="card-body p-3">
                    <h5 class="mb-2">{{ $product->product_name }}</h5>
                    <p class="text-muted mb-0 small">
                        <span class="badge bg-success me-1">{{ __('products.part-hash') }}{{ $product->id }}</span>
                        <span class="badge bg-primary">{{ $product->key_name }}</span>
                    </p>
                </div>
            </div>

            {{-- Tabs for Details --}}
            <div class="card">
                <div class="card-body p-3">
                    <ul class="nav nav-tabs nav-tabs-sm mb-2" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active py-2" data-bs-toggle="tab" href="#details-tab">
                                <i class="fad fa-info-circle me-1"></i><span class="small">{{ __('products.tab-details') }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-2" data-bs-toggle="tab" href="#description-tab">
                                <i class="fad fa-align-left me-1"></i><span class="small">{{ __('products.tab-descriptions') }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-2" data-bs-toggle="tab" href="#specs-tab">
                                <i class="fad fa-list me-1"></i><span class="small">{{ __('products.tab-specifications') }}</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        {{-- Details Tab --}}
                        <div class="tab-pane fade show active" id="details-tab">
                            <div class="row g-2">
                                <div class="col-md-4">
                                    <div class="p-2 border rounded">
                                        <small class="text-muted d-block mb-1" style="font-size: 0.7rem;">
                                            <i class="fad fa-tag me-1"></i>{{ __('products.brand') }}
                                        </small>
                                        <h6 class="mb-0">{{ $product->brand->validbrand_id }}</h6>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="p-2 border rounded">
                                        <small class="text-muted d-block mb-1" style="font-size: 0.7rem;">
                                            <i class="fad fa-layer-group me-1"></i>{{ __('products.family') }}
                                        </small>
                                        <h6 class="mb-0">{{ $product->family }}</h6>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="p-2 border rounded">
                                        <small class="text-muted d-block mb-1" style="font-size: 0.7rem;">
                                            <i class="fad fa-cube me-1"></i>{{ __('products.model') }}
                                        </small>
                                        <h6 class="mb-0">{{ $product->model }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Description Tab --}}
                        <div class="tab-pane fade" id="description-tab">
                            @if($product->description)
                            <div class="mb-3">
                                <h6 class="text-primary mb-2 small">
                                    <i class="fad fa-file-invoice me-1"></i>{{ __('products.for-quotations') }}
                                </h6>
                                <div class="p-2 bg-light rounded small">
                                    {!! nl2br(e($product->description)) !!}
                                </div>
                            </div>
                            @endif

                            @if($product->store_description)
                            <div>
                                <h6 class="text-success mb-2 small">
                                    <i class="fad fa-shopping-cart me-1"></i>{{ __('products.for-ecommerce') }}
                                </h6>
                                <div class="p-2 bg-light rounded small">
                                    {!! nl2br(e($product->store_description)) !!}
                                </div>
                            </div>
                            @endif

                            @if(!$product->description && !$product->store_description)
                            <div class="text-center text-muted py-3">
                                <i class="fad fa-file-alt fa-2x mb-2"></i>
                                <p class="small mb-0">{{ __('products.no-descriptions') }}</p>
                            </div>
                            @endif
                        </div>

                        {{-- Specifications Tab --}}
                        <div class="tab-pane fade" id="specs-tab">
                            <div class="row">
                                @php
                                    $hasSpecs = false;
                                    for($i = 1; $i <= 8; $i++) {
                                        if($product->{'additional_description_'.$i}) {
                                            $hasSpecs = true;
                                            break;
                                        }
                                    }
                                @endphp

                                @if($hasSpecs)
                                    @for($i = 1; $i <= 8; $i++)
                                        @if($product->{'additional_description_'.$i})
                                        <div class="col-md-6 mb-2">
                                            <div class="d-flex align-items-start p-2 border-start border-primary border-2">
                                                <div class="flex-grow-1">
                                                    <small class="text-muted d-block" style="font-size: 0.7rem;">
                                                        {{ $product->category->{'custom_field_'.$i} ?? __('products.custom-field-num').' '.$i }}
                                                    </small>
                                                    <strong class="small">{{ $product->{'additional_description_'.$i} }}</strong>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    @endfor
                                @else
                                    <div class="col-12 text-center text-muted py-3">
                                        <i class="fad fa-list-ul fa-2x mb-2"></i>
                                        <p class="small mb-0">{{ __('products.no-specifications') }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Metadata Card --}}
            <div class="card mt-3">
                <div class="card-body p-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted" style="font-size: 0.75rem;">
                                <i class="fad fa-clock me-1"></i>{{ __('products.created-label') }}
                                <strong>{{ $product->created_at->format('d M Y, H:i') }}</strong>
                            </small>
                        </div>
                        @if($product->updated_at != $product->created_at)
                        <div>
                            <small class="text-muted" style="font-size: 0.75rem;">
                                <i class="fad fa-sync me-1"></i>{{ __('products.last-updated') }}
                                <strong>{{ $product->updated_at->format('d M Y, H:i') }}</strong>
                            </small>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function deleteProduct() {
    if (confirm('{{ __('products.delete-product-confirm') }}')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("products.destroy", $product->id) }}';
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        
        form.appendChild(csrfToken);
        form.appendChild(methodField);
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection