@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.classification.index') }}" class="btn btn-sm btn-light">
                <i class="fad fa-arrow-left me-1"></i>{{ __('bundles.back') }}
            </a>
        </div>
        <div>
            <a href="/products/bundles/{{ $product->id }}/edit" class="btn btn-sm btn-warning">
                <i class="fad fa-edit me-1"></i>{{ __('bundles.edit_kit') }}
            </a>
            <button class="btn btn-sm btn-danger" onclick="deleteBundle({{ $product->id }})">
                <i class="fad fa-trash me-1"></i>{{ __('bundles.delete') }}
            </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">{{ __('bundles.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">{{ __('bundles.sku') }}</small>
                                <strong>{{ $product->sku }}</strong>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-2">
                                <small class="text-muted d-block">{{ __('bundles.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>{{ __('bundles.classification') }}</h6>
                </div>
                <div class="card-body p-3">
                    <div class="mb-2">
                        <small class="text-muted d-block" style="font-size: 0.7rem;">{{ __('bundles.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;">{{ __('bundles.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;">{{ __('bundles.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;">{{ __('bundles.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>{{ __('bundles.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">{{ __('bundles.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">{{ __('bundles.part') }} #{{ $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">{{ __('bundles.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">{{ __('bundles.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">{{ __('bundles.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>{{ __('bundles.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>{{ __('bundles.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>{{ __('bundles.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>{{ __('bundles.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>{{ __('bundles.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">{{ __('bundles.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} ?? __('bundles.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">{{ __('bundles.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>{{ __('bundles.created') }}
                                <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>{{ __('bundles.last_updated') }}
                                <strong>{{ $product->updated_at->format('d M Y, H:i') }}</strong>
                            </small>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    {{-- Bundle Components --}}
    @if($product->is_bundle)
    <div class="card mt-3">
        <div class="card-header bg-info text-white py-2 d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="fad fa-boxes me-2"></i>{{ __('bundles.bundle_components') }}</h6>
            <span class="badge bg-white text-info">{{ $product->bundleComponents->count() }} {{ __('bundles.items') }}</span>
        </div>
        <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th width="5%">#</th>
                        <th width="10%">{{ __('bundles.type') }}</th>
                        <th>{{ __('bundles.component') }}</th>
                        <th width="15%">{{ __('bundles.sku') }}</th>
                        <th width="8%">{{ __('bundles.qty') }}</th>
                        <th width="25%">{{ __('bundles.notes') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($product->bundleComponents as $idx => $item)
                    <tr>
                        <td>{{ $idx + 1 }}</td>
                        <td>
                            <span class="badge bg-{{ $item->item_type === 'product' ? 'primary' : 'info' }}">
                                {{ $item->item_type }}
                            </span>
                            @if($item->is_base)
                                <span class="badge bg-warning text-dark">{{ __('bundles.base') }}</span>
                            @endif
                        </td>
                        <td>{{ $item->product->product_name ?? 'N/A' }}</td>
                        <td><code>{{ $item->product->sku ?? '-' }}</code></td>
                        <td>{{ $item->quantity }}</td>
                        <td class="text-muted small">{{ $item->description ?? '-' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted py-3">{{ __('bundles.no_components') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @endif

@endsection

@section('scripts')
<script>
function deleteBundle(id) {
    if (confirm('{{ __('bundles.delete_kit_confirm') }}')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/products/bundles/${id}`;
        form.innerHTML = `<input type="hidden" name="_token" value="{{ csrf_token() }}">
                         <input type="hidden" name="_method" value="DELETE">`;
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection