@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.index') }}" class="btn btn-sm btn-light">
                <i class="fad fa-arrow-left me-1"></i>{{ __('products.back') }}
            </a>
        </div>
        <div>
            <a href="{{ route('products.edit', $product->id) }}" class="btn btn-sm btn-warning">
                <i class="fad fa-edit me-1"></i>{{ __('products.edit') }}
            </a>
            @if($product->status_id == 1)
                <button class="btn btn-sm btn-outline-secondary" onclick="toggleStatus()">
                    <i class="fad fa-toggle-on me-1"></i>{{ __('products.toggle-deactivate') }}
                </button>
            @else
                <button class="btn btn-sm btn-outline-success" onclick="toggleStatus()">
                    <i class="fad fa-toggle-off me-1"></i>{{ __('products.toggle-activate') }}
                </button>
                @can('products.delete')
                <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete()">
                    <i class="fad fa-trash-alt me-1"></i>{{ __('products.delete-btn') }}
                </button>
                @endcan
            @endif
        </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->product_number }}</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').' '.$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 confirmDelete() {
    const title = '{{ __('products.delete-confirm-title') }}';
    const body  = '{{ __('products.delete-confirm-body') }}';
    const name  = '{{ addslashes($product->product_name) }}';
    if (!confirm(title + '\n\n' + name + '\n\n' + body)) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route("products.destroy", $product->id) }}';
    const csrf = document.createElement('input');
    csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = '{{ csrf_token() }}';
    const method = document.createElement('input');
    method.type = 'hidden'; method.name = '_method'; method.value = 'DELETE';
    form.appendChild(csrf);
    form.appendChild(method);
    document.body.appendChild(form);
    form.submit();
}

function toggleStatus() {
    const activate = {{ $product->status_id == 1 ? 'false' : 'true' }};
    const msg = activate
        ? '{{ __('products.toggle-activate-confirm') }}'
        : '{{ __('products.toggle-deactivate-confirm') }}';
    if (!confirm(msg)) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route("products.toggleStatus", $product->id) }}';
    const csrf = document.createElement('input');
    csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = '{{ csrf_token() }}';
    form.appendChild(csrf);
    document.body.appendChild(form);
    form.submit();
}
</script>
@endsection