@extends('layout')
@section('content')
    <div class="my-3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4 bg-light border-0 breadcrumb-content">
                        <div class="theme-border-radius theme-box-shadow card-body p-3 theme-bg-white">
                            <ul>
                                <li><a href="@localeUrl('home.page')">@translate('catalogue', 'category_home')</a></li>
                                <li><a href="@localeUrl('part.category')">@translate('catalogue', 'category_category')</a></li>
                                @for ($i = 0; $i < count($categoryDepth); $i++)
                                    <li><a href="" onmousedown="if (event.button===1)event.preventDefault()"
                                            onmouseup="if (event.button===1)this.click()"
                                            onclick="addUrlParam({param: {
                                            @for ($j = $i; $j >= 0; $j--)
                                                'cat{{ $j + 1 }}': `{{ $j == $i ? $categoryDepth[$j]['title'] : $categoryDepth[$j]['id'] }}`,
                                            @endfor
                                            }, loc: `{{ $i >= 2 ? @localeUrlE('part.list') : @localeUrlE('part.category') }}`, delparams: ['cat1', 'cat2', 'cat3', 'page']}).go(event.pointerId===-1);return false">{{ $categoryDepth[$i]['title'] }}</a>
                                    </li>
                                @endfor
                            </ul>

                            <div class="row mt-5">
                                <div class="col-12 col-lg-5">
                                    <div class="product-gallery">
                                        <div class="slider slider-for">
                                            @forelse ($part->images as $image)
                                                <div class="zoom" onmousemove="zoom(event)"
                                                    style="background-image: url({{ $image->image }})">
                                                    <img src="{{ $image->image }}" loading="lazy"
                                                        alt="{{ $part->category->lang_or_any->title }}">
                                                </div>
                                            @empty
                                                <div class="zoom" onmousemove="zoom(event)"
                                                    style="background-image: url({{ $part->photo }})">
                                                    <img src="{{ $part->photo }}" loading="lazy"
                                                        alt="{{ $part->category->lang_or_any->title }}">
                                                </div>
                                            @endforelse
                                        </div>
                                        <div class="slider slider-nav gallery-thumb">
                                            @forelse ($part->images as $image)
                                                <div>
                                                    <img src="{{ $image->image }}"
                                                        alt="{{ $part->category->lang_or_any->title }}">
                                                </div>
                                            @empty
                                                <div>
                                                    <img src="{{ $part->photo }}"
                                                        alt="{{ $part->category->lang_or_any->title }}">
                                                </div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-7">
                                    <div class="mt-6 mt-lg-0">
                                        <h2 class="mb-1 h4">{{ $part->category->lang_or_any->title }}
                                        </h2>
                                        <div class="mb-4">
                                            <span>@translate('catalogue', 'filter_quality'):
                                                {{ @$part->partQuality->lang_or_any->title ?: 'Unspecified' }}</span>
                                        </div>
                                        <div class="mb-4">
                                            @if ($part->manufacturer_code)
                                                <span
                                                    class="badge rounded-pill theme-bg-accent-two theme-text-accent-one p-3 mb-2">@translate('vehiclePartDetails', 'part_code'):
                                                    {{ $part->manufacturer_code }}</span>
                                            @endif
                                            @if ($part->visible_code)
                                                <span
                                                    class="badge rounded-pill theme-bg-accent-two theme-text-accent-one p-3 mb-2">@translate('vehiclePartDetails', 'part_visible_code'):
                                                    {{ $part->visible_code }}</span>
                                            @endif
                                            <span
                                                class="badge rounded-pill theme-bg-accent-two theme-text-accent-one p-3 mb-2">@translate('vehiclePartDetails', 'part_brand'):
                                                {{ $part->vehicle->model->maker->name }}
                                                {{ $part->vehicle->model->name }}</span>
                                            <span
                                                class="badge rounded-pill theme-bg-accent-two theme-text-accent-one p-3 mb-2">@translate('vehiclePartDetails', 'part_vehice_engine'):
                                                {{ $part->vehicle->engine_code }}
                                                ({{ @$part->vehicle->fuel->lang_or_any->title ?: 'Unspecified' }})</span>
                                        </div>
                                        @if ($part->notes)
                                            <p class="mb-3 theme-text-accent-one font-small">{{ $part->notes }}</p>
                                        @endif
                                        <div class="my-2">
                                            <span
                                                class="fw-bold theme-text-secondary">{{ number_format($part->pvnPrice, 2, ',', ' ') }}
                                                {{ $part->currency }}</span>
                                            @if (isset($part->partStatus->lang_or_any->title))
                                                <span
                                                    class="badge text-bg-success ms-3">{{ $part->partStatus->lang_or_any->title }}</span>
                                            @endif
                                        </div>
                                        <hr class="my-6">
                                        <div class="mt-3 row justify-content-start g-2 align-items-center">
                                            <div class="col-12 col-md-5 custom-button">
                                                <button type="button"
                                                    u-init="Livewire.on('itemChanged', (event)=>{ const data = event[0]; if(data[0] != {{ $part->id }} ) return; if(data[1]) this.innerText = '@translate('vehiclePartDetails', 'part_btn_remove_from_cart')'; else this.innerText = '@translate('vehiclePartDetails', 'part_btn_add_to_cart')'; this.blur(); setTimeout(()=>void window.regeneratePriceButtons(), 100); })"
                                                    class="custom-btn-primary font-small button-effect justify-content-center align-items-center d-flex"
                                                    onclick="document.getElementById('cardWireData').dispatchEvent(new CustomEvent('toggle-cart-item', { detail: {{ $part->id }} }) );">
                                                    <i
                                                        class="feather-icon icon-shopping-bag me-2"></i>{{ $cartItemNode == null ? @translateE('vehiclePartDetails', 'part_btn_add_to_cart') : @translateE('vehiclePartDetails', 'part_btn_remove_from_cart') }}
                                                </button>
                                            </div>
                                            {{-- <div class="col-12 col-md-4">
                                                <a class="btn btn-light" href="#" data-bs-toggle="tooltip"
                                                    data-bs-html="true" aria-label="Wishlist"><i
                                                        class="bi bi-heart"></i></a>
                                            </div> --}}
                                        </div>
                                        <hr class="my-6">
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <ul class="nav nav-pills nav-lb-tab d-flex justify-content-center" id="myTab"
                                        role="tablist">
                                        <li class="nav-item" style="margin:0" role="presentation">
                                            <button class="nav-link active" id="product-tab" data-bs-toggle="tab"
                                                data-bs-target="#product-tab-pane" type="button" role="tab"
                                                aria-controls="product-tab-pane"
                                                aria-selected="true">@translate('vehiclePartDetails', 'info_tab_general')</button>
                                        </li>
                                        <li class="nav-item" style="margin:0" role="presentation">
                                            <button class="nav-link" id="details-tab" data-bs-toggle="tab"
                                                data-bs-target="#details-tab-pane" type="button" role="tab"
                                                aria-controls="details-tab-pane"
                                                aria-selected="false">@translate('vehiclePartDetails', 'info_tab_details')</button>
                                        </li>
                                        <li class="nav-item" style="margin:0" role="presentation">
                                            <button class="nav-link" id="dimensions-tab" data-bs-toggle="tab"
                                                data-bs-target="#dimensions-tab-pane" type="button" role="tab"
                                                aria-controls="dimensions-tab-pane"
                                                aria-selected="false">@translate('vehiclePartDetails', 'info_tab_dimensions')</button>
                                        </li>
                                    </ul>
                                    <div class="tab-content" id="myTabContent">
                                        <!-- Apraksts -->
                                        <div class="tab-pane fade show active" id="product-tab-pane" role="tabpanel"
                                            aria-labelledby="product-tab" tabindex="0">
                                            <div class="my-5">
                                                <div class="mb-5">
                                                    <p class="mb-4 fs-5 fw-bold">@translate('vehiclePartDetails', 'part_description')</p>
                                                    <p class="mb-0 theme-text-accent-one small">

                                                        <strong>{{ $part->category->lang_or_any->title }}</strong> for a
                                                        <strong>{{ $part->vehicle->model->maker->name }}
                                                            {{ $part->vehicle->model->name }}</strong>
                                                        ({{ $part->vehicle->year }}).
                                                        @if ($part->notes)
                                                            <br>@translate('vehiclePartDetails', 'notes'): {{ $part->notes }}
                                                        @endif
                                                        <br>@translate('vehiclePartDetails', 'price'):
                                                        {{ number_format($part->pvnPrice, 2, ',', ' ') }}
                                                        {{ $part->currency }}
                                                        @if ($part->original_price != $part->pvnPrice || $part->original_currency != $part->currency)
                                                            <br>@translate('vehiclePartDetails', 'original_price'):
                                                            {{ number_format($part->original_price, 2, ',', ' ') }}
                                                            {{ $part->original_currency }}
                                                        @endif
                                                        <br>@translate('vehiclePartDetails', 'added_to_catalog'): {{ $part->create_date }}
                                                    </p>
                                                </div>
                                                <div>
                                                    {{-- <p class="mb-1 fs-5">@translate('vehiclePartDetails', 'disclaimer')</p>
                                                    <p class="mb-0 theme-text-accent-one small">
                                                        @translate('vehiclePartDetails', 'disclaimer_content')
                                                        {{ $part->create_date }}.
                                                    </p> --}}
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Detaļas -->
                                        <div class="tab-pane fade" id="details-tab-pane" role="tabpanel"
                                            aria-labelledby="details-tab" tabindex="0">
                                            <div class="my-5">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <p class="mb-4 fs-5 fw-bold">@translate('vehiclePartDetails', 'info_tab_details')</p>
                                                    </div>
                                                    <div class="col-12">
                                                        @if ($part->vehicle->photo)
                                                            <div class="mb-4">
                                                                <img src="{{ $part->vehicle->photo }}"
                                                                    alt="Vehicle Photo" class="img-fluid"
                                                                    style="min-width: 300px;">
                                                                <p class="small text-muted mt-2">@translate('vehiclePartDetails', 'vehicle_photo')</p>
                                                            </div>
                                                        @endif
                                                        <table class="table table-bordered small">
                                                            <tbody>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'part_category')</th>
                                                                    <td>{{ $part->category->lang_or_any->title }}</td>
                                                                </tr>
                                                                @if ($part->manufacturer_code)
                                                                    <tr>
                                                                        <th>@translate('vehiclePartDetails', 'part_code')</th>
                                                                        <td>{{ $part->manufacturer_code }}</td>
                                                                    </tr>
                                                                @endif
                                                                @if ($part->visible_code)
                                                                    <tr>
                                                                        <th>@translate('vehiclePartDetails', 'part_visible_code')</th>
                                                                        <td>{{ $part->visible_code }}</td>
                                                                    </tr>
                                                                @endif
                                                                @if ($part->other_code)
                                                                    <tr>
                                                                        <th>@translate('vehiclePartDetails', 'part_other_code')</th>
                                                                        <td>{{ $part->other_code }}</td>
                                                                    </tr>
                                                                @endif
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'quality')</th>
                                                                    <td>{{ @$part->partQuality->lang_or_any->title ?: 'Unspecified' }}
                                                                    </td>
                                                                </tr>
                                                                @if ($part->position)
                                                                    <tr>
                                                                        <th>@translate('vehiclePartDetails', 'position')</th>
                                                                        <td>{{ $part->position }}</td>
                                                                    </tr>
                                                                @endif
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'maker')</th>
                                                                    <td>{{ $part->vehicle->model->maker->name }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'model')</th>
                                                                    <td>{{ $part->vehicle->model->name }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'model_year')</th>
                                                                    <td>{{ $part->vehicle->model_year }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'producted_year')</th>
                                                                    <td>{{ $part->vehicle->year }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'engine_code')</th>
                                                                    <td>{{ $part->vehicle->engine_code }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'engine_capacity')</th>
                                                                    <td>{{ $part->vehicle->engine_cubic_capacity }} cc</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'engine_power')</th>
                                                                    <td>{{ $part->vehicle->engine_power }} kW</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'fuel_type')</th>
                                                                    <td>{{ @$part->vehicle->fuel->lang_or_any->title ?: 'Unspecified' }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'gearbox_code')</th>
                                                                    <td>{{ $part->vehicle->gearbox_code ?: 'N/A' }}</td>
                                                                </tr>
                                                                @if ($part->vehicle->color_code)
                                                                    <tr>
                                                                        <th>@translate('vehiclePartDetails', 'color_code')</th>
                                                                        <td>{{ $part->vehicle->color_code }}</td>
                                                                    </tr>
                                                                @endif
                                                                {{-- <tr>
                                                                    <th>@translate('vehiclePartDetails', 'body_number')</th>
                                                                    <td>{{ $part->vehicle->body_number ?: 'N/A' }}</td>
                                                                </tr> --}}
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'engine_number')</th>
                                                                    <td>{{ $part->vehicle->engine_number ?: 'N/A' }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>@translate('vehiclePartDetails', 'mileage')</th>
                                                                    <td>{{ $part->vehicle->mileage }} km</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Izmēri -->
                                        <div class="tab-pane fade" id="dimensions-tab-pane" role="tabpanel"
                                            aria-labelledby="dimensions-tab" tabindex="0">
                                            <div class="my-5">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <p class="mb-4 fs-5 fw-bold">@translate('vehiclePartDetails', 'sizes')</p>
                                                    </div>
                                                    <div class="col-12 col-lg-6">
                                                        <table class="table table-bordered small">
                                                            <tbody>
                                                                @if ($part->rims || $part->tires)
                                                                    @if ($part->rims_fixing_points)
                                                                        <tr>
                                                                            <th>@translate('vehiclePartDetails', 'rims_fixing_points')</th>
                                                                            <td>{{ $part->rims_fixing_points }}</td>
                                                                        </tr>
                                                                    @endif
                                                                    @if ($part->rims_spacing)
                                                                        <tr>
                                                                            <th>@translate('vehiclePartDetails', 'rims_spacing')</th>
                                                                            <td>{{ $part->rims_spacing }}</td>
                                                                        </tr>
                                                                    @endif
                                                                    @if ($part->rims_quantity)
                                                                        <tr>
                                                                            <th>@translate('vehiclePartDetails', 'rims_quantity')</th>
                                                                            <td>{{ $part->rims_quantity }}</td>
                                                                        </tr>
                                                                    @endif
                                                                    @if ($part->rims_central_diameter)
                                                                        <tr>
                                                                            <th>@translate('vehiclePartDetails', 'rims_central_diameter')</th>
                                                                            <td>{{ $part->rims_central_diameter }}</td>
                                                                        </tr>
                                                                    @endif
                                                                    @if ($part->tires_width)
                                                                        <tr>
                                                                            <th>@translate('vehiclePartDetails', 'tires_width')</th>
                                                                            <td>{{ $part->tires_width }}</td>
                                                                        </tr>
                                                                    @endif
                                                                    @if ($part->tires_height)
                                                                        <tr>
                                                                            <th>@translate('vehiclePartDetails', 'tires_height')</th>
                                                                            <td>{{ $part->tires_height }}</td>
                                                                        </tr>
                                                                    @endif
                                                                    @if ($part->tires_quantity)
                                                                        <tr>
                                                                            <th>@translate('vehiclePartDetails', 'tires_quantity')</th>
                                                                            <td>{{ $part->tires_quantity }}</td>
                                                                        </tr>
                                                                    @endif
                                                                @else
                                                                    <tr>
                                                                        <td colspan="2">
                                                                            @translate('vehiclePartDetails', 'no_dimension_data')</td>
                                                                    </tr>
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection