@extends('front::layouts.master')

@section('title', $product_detail->title)

@section('content')

<style>
/* ---------- PAGE HEADER ---------- */

/* Container for the file row */
.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* File name container */
.file-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.4;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  padding-right: 8px;
}

/* Download button */
.download-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .file-row {
    gap: 8px;
    padding: 12px 8px;
  }
  
  .file-name {
    font-size: 14px;
  }
  
  @media (max-width: 480px) {
    .file-row {
      flex-wrap: wrap;
    }
    
    .file-name {
      width: 100%;
      white-space: normal;
      margin-bottom: 8px;
    }
    
    .download-btn {
      width: 100%;
      text-align: center;
    }
  }
}

/* Optional: Add tooltip on hover for truncated filenames */
.file-name {
  position: relative;
}

.file-name:hover::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 100%;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: normal;
  max-width: 300px;
  word-break: break-all;
  z-index: 1000;
  pointer-events: none;
}

/* Container styles */
.container.mt-4.mb-4 {
    max-width: 100%;
    overflow-x: auto;
    padding: 0 15px;
}

/* Header styles */
.order-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 15px;
    background: #f8f9fa;
    font-weight: 600;
    min-width: min-content;
}

.order-header > div {
    flex: 0 0 auto;
    min-width: 120px;
    padding: 0 10px;
}

.order-header > div:first-child {
    min-width: 150px;
}

.order-header > div:nth-child(2) {
    min-width: 200px;
}

.order-header > div:nth-child(3) {
    min-width: 100px;
}

.order-header > div:nth-child(4) {
    min-width: 100px;
}

.order-header > div:nth-child(5) {
    min-width: 100px;
}

/* Row styles */
.order-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background: #fff;
    min-width: min-content;
}

.order-row > div:first-child {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 0 10px;
    font-weight: 600;
    color: #333;
}

.order-row > form {
    flex: 0 0 auto;
    min-width: 200px;
    padding: 0 10px;
    margin: 0;
}

.order-row form {
    display: flex;
    align-items: center;
}

.order-row .quantity {
    display: none !important;
}

.order-row .add-to-cart {
    margin: 0 !important;
}

.order-row .add-to-cart .btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.3s;
    width: 100%;
}

.order-row .add-to-cart .btn:hover {
    background: #218838;
}

.order-row > div:nth-child(3) {
    flex: 0 0 auto;
    min-width: 100px;
    padding: 0 10px;
    text-align: center;
}

.order-row > div:nth-child(4) {
    flex: 0 0 auto;
    min-width: 100px;
    padding: 0 10px;
    font-weight: 600;
    color: #28a745;
}

.order-row > div:nth-child(5) {
    flex: 0 0 auto;
    min-width: 100px;
    padding: 0 10px;
}

.order-row > div:nth-child(5) {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 13px;
    display: inline-block;
    text-align: center;
    background: #d4edda;
    color: #155724;
}

/* Horizontal scroll container */
.order-header, .order-row {
    overflow-x: visible;
}

/* Scrollbar styling */
.container.mt-4.mb-4::-webkit-scrollbar {
    height: 8px;
}

.container.mt-4.mb-4::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.container.mt-4.mb-4::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.container.mt-4.mb-4::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive styles */
@media (max-width: 768px) {
    .order-header > div,
    .order-row > div:first-child,
    .order-row > form,
    .order-row > div:nth-child(3),
    .order-row > div:nth-child(4),
    .order-row > div:nth-child(5) {
        font-size: 14px;
    }
    
    .order-header > div:first-child,
    .order-row > div:first-child {
        min-width: 130px;
    }
    
    .order-header > div:nth-child(2),
    .order-row > form {
        min-width: 180px;
    }
    
    .order-row .add-to-cart .btn {
        padding: 6px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .order-header > div,
    .order-row > div:first-child,
    .order-row > form,
    .order-row > div:nth-child(3),
    .order-row > div:nth-child(4),
    .order-row > div:nth-child(5) {
        font-size: 12px;
    }
    
    .order-header > div:first-child,
    .order-row > div:first-child {
        min-width: 110px;
    }
    
    .order-header > div:nth-child(2),
    .order-row > form {
        min-width: 160px;
    }
    
    .order-row .add-to-cart .btn {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* For guest view */
.order-row .purchase-link {
    flex: 0 0 auto;
    min-width: 200px;
    padding: 0 10px;
}

.order-row .purchase-link a {
    background: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    transition: background 0.3s;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.order-row .purchase-link a:hover {
    background: #0056b3;
}

.breadcrumb {
    font-size: 16px;
    margin-bottom: 10px;
    color: #444;
    background-color: #ffffff;
}
.breadcrumb a {
    color: #0072c6;
    text-decoration: none;
}
.status-active {
    color: #007C8C;
    font-size: 13px;
    margin-left: 10px;
}

/* ---------- TAB NAVIGATION ---------- */
.page-tabs {
    border-bottom: 1px solid #e0e0e0;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    gap: 25px;
    background-color: #e0e0e0;
}
.page-tabs a {
    padding: 12px 20px;
    color: #333;
    font-size: 15px;
    text-decoration: none;
}
.page-tabs a.active {
    border-bottom: 2px solid #d70000;
    color: #d70000;
    font-weight: 600;
}
i.fa.fa-bell {
    padding-right: 6px;
    font-size: 14px;
}

/* ---------- MAIN LAYOUT ---------- */
.product-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* LEFT SIDE — PARAMETERS BOX */
.parameters-box {
    width: 100%;
}
.parameters-title {
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: bold;
}
.add-to-cart.mt-4 {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
}
.parameters-table {
    width: 100%;
    border-collapse: collapse;
}
.parameters-table tr td {
    padding: 9px 5px;
    font-size: 14px;
    color: #444;
    border-bottom: 1px solid #eeeeee;
}
.parameters-table tr td:first-child {
    color: #000;
    font-weight: 500;
}

.btn{
    background: #3465A4;
}

.sheet {
    margin-top: 10px;
}
.sheet p {
    color: #757575;
    margin: 0;
    line-height: 24px;
    display: flex;
    font-size: 16px;
}
.sheet span {
    color: #3465a4;
    padding-left: 20px;
    padding-right: 10px;
}
.sheet i {
    color: #007c8c;
}
.sheet a {
    padding-right: 10px;
    padding-left: 10px;
}
.tab-section.active {
    display: flex;
    gap: 64px;
}
.parameters-table {
    width: 65%;
    border-collapse: collapse;
}

button.btn {
    background: #fff;
    color: #2d67b1;
    text-decoration: underline;
}
.btn:hover {
    color:#2d67b1;
    background: #fff;
}

.media-box {
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 26px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    aspect-ratio: 16/9;
    max-height: 450px;
    overflow: hidden;
}

.media-box img {
    max-width: 100%;
    object-fit: fill;
    height: 280px;
}
.media-box video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    display: block;
}

.tab-section {
    display: none;
}
.tab-section.active {
    display: flex;
}
.parameters-table {
    height: 100px;
}

tr.view_all td {
    border-bottom: none !important;
}
tr.view_all td a {
    color: #007c8c !important;
    text-align: left;
    font-weight: 500;
}

/* Filter bar styles */
.filter-bar {
    background: #f5f5f5;
    padding: 15px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-left {
    display: flex;
    align-items: center;
    gap: 100px;
    flex: 1;
    flex-wrap: wrap;
}

.filter-left select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-box {
    position: relative;
    width: 35%;
    min-width: 200px;
}

.search-box input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@media(max-width:768px){
.search-box i {
    position: absolute;
    right: 10px;
    top:22px !important;
    color: #555;
    cursor: pointer;
}    
}

.search-box i {
    position: absolute;
    top:12px;
    right: 10px;
    color: #555;
    cursor: pointer;
}

.nice-select{
height: 30px;
line-height: 32px;
width: 175px;
}

.docs-row {
    display: flex;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px solid #e0e0e0;
}

.star-icon {
    color: #444;
    margin-right: 10px;
    font-size: 18px;
    min-width: 20px;
}

.doc-type {
    width: 15%;
    color: #2d67b1;
    font-weight: 600;
}

.doc-title {
    width: 45%;
    color: #2d67b1;
    font-size: 16px;
    text-decoration: none;
}

.doc-links {
    width: 20%;
    color: #2d67b1;
    font-size: 14px;
}

.doc-links a {
    color: #2d67b1;
    text-decoration: none;
    margin-right: 8px;
}

.doc-date {
    width: 20%;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.doc-date i {
    font-size: 12px;
    color: #2d67b1;
}

.category-tabs {
    margin-bottom: 10px;
    font-size: 15px;
}

.category-tabs a {
    text-decoration: none;
    color: #2d67b1;
    margin-right: 10px;
}

.category-tabs a.active {
    color: #ff6600 !important;
    font-weight: bold;
}

.section-line {
    border-bottom: 1px solid #2d67b1;
    margin: 8px 0 20px 0;
}

.ordering-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.order-line {
    border-bottom: 1px solid #2d67b1;
    margin: 5px 0 15px 0;
}

/* Contact/support styles */
.contact-hero {
    text-align: center;
}
.contact-hero img {
    max-width: 40%;
    width: 100%;
}
.support-boxes {
    display: flex;
    justify-content: space-evenly;
    gap: 40px;
    padding: 50px 0;
}
.support-box {
    padding: 25px 40px;
    color: #000;
    font-size: 22px;
    text-align: center;
    border-radius: 4px;
    transition: 0.3s;
}
.locations {
    padding: 40px 104px;
}
.location-container {
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.locations h2 {
    margin-bottom: 20px;
}
.locations p {
    margin: 4px 0;
    font-size: 14px;
}
.locations a {
    color: #f7941d;
}

/* Date sort button styles */
#dateSortBtn {
    padding: 5px 10px;
    border-radius: 4px;
    background: #f8f9fa;
    transition: all 0.3s;
    margin-left: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

#dateSortBtn:hover {
    background: #e9ecef;
}

#dateSortBtn.active {
    background: #2d67b1;
    color: white;
    border-color: #2d67b1;
}

.sort-icon {
    margin-left: 5px;
    font-size: 12px;
}

/* Price styling */
.current-price {
    color: #28a745;
    font-weight: bold;
    font-size: 16px;
}

.original-price {
    color: #999;
    font-size: 13px;
    text-decoration: line-through;
    margin-left: 5px;
}

.discount-badge {
    background: #28a745;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 5px;
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-left {
        flex-direction: column;
        gap: 20px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .docs-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .doc-type, .doc-title, .doc-links, .doc-date {
        width: 100%;
        text-align: left;
    }
    
    .doc-date {
        text-align: left;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .support-boxes {
        flex-direction: column;
        gap: 20px;
    }
    
    .locations {
        padding: 20px;
    }
    
    .location-container {
        width: 100%;
    }
}
</style>

<div class="container">
    <form action="{{route('single-add-to-cart')}}" method="POST">
        @csrf
        <div class="quantity" style="display:none;">
            <h6>Quantity :</h6>
            <div class="input-group">
                <div class="button minus">
                    <button type="button" class="btn btn-primary btn-number"
                            disabled="disabled" data-type="minus"
                            data-field="quantity[1]">
                        <i class="ti-minus"></i>
                    </button>
                </div>
                <input type="hidden" name="slug" value="{{$product_detail->slug}}">
                <input type="text" name="quantity[1]" class="input-number" data-min="1"
                       data-max="1000" value="1" id="quantity">
                <div class="button plus">
                    <button type="button" class="btn btn-primary btn-number"
                            data-type="plus" data-field="quantity[1]">
                        <i class="ti-plus"></i>
                    </button>
                </div>
            </div>
        </div>  
        
        <!-- Breadcrumb -->
        <div class="breadcrumb">
            <a href="{{route('front.index')}}">Home</a> /
            <a href="{{route('front.index')}}/product-grids">Products</a> /
            <span>{{ $product_detail->title }}</span>
        </div>
        
        <div class="add-to-cart mt-4">                                           
            <button type="submit" class="btn-submit">Order Now</button>                                            
        </div>
    </form>

    <!-- Title -->
    <div class="tital">
        <h2>{{ $product_detail->title }}
            <span class="status-active"><i class="fa fa-check-circle" aria-hidden="true"></i>ACTIVE</span>
        </h2>
    </div>

    <h3 class="pro_head" style="margin-top:5px; font-size:20px;">
        {{ $product_detail->summary }}
    </h3>

    <!-- Data Sheet Links -->
@if($documents->count())
    @foreach($documents as $document)
        @if($document->product_page_location == 'Data Sheet')
            <div class="sheet">
                <p>
                    DATA SHEET..
                    <span>
                        <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                        {{$document->title}}
                    </span>
                    <a download href="{{ asset('storage/documents/'.$document->file) }}" style="color:#007c8c; font-size:14px;">PDF</a> |
                    <a href="https://docs.google.com/viewer?url={{ urlencode(asset('storage/documents/'.$document->file)) }}&embedded=true" target="_blank" style="color:#007c8c; font-size:14px;">HTML</a>
                </p>
            </div>
        @endif
    @endforeach
@endif

    <!-- Tabs -->
    <div class="page-tabs">
        <a href="#tab1" class="tab-link active" data-target="tab1">Product details</a>
        <a href="#tab2" class="tab-link" data-target="tab2">Technical documentation</a>
        <a href="#tab3" class="tab-link" data-target="tab3">Design & development</a>
        <a href="#tab4" class="tab-link" data-target="tab4">Ordering</a>
        <a href="#tab5" class="tab-link" data-target="tab5">Support & training</a>
    </div>

    <!-- Main Product Layout -->
    <div class="product-container">
        <!-- LEFT SIDE — PARAMETERS -->
        <div class="parameters-box">
            <div id="tab-content">
                <!-- Tab 1: Product Details -->
                <div id="tab1" class="tab-section active">
                    <table class="parameters-table">
                        @php
                        // Calculate discounted price
                        $originalPrice = $product_detail->price;
                        $finalPrice = $originalPrice;
                        $hasDiscount = false;
                        $discountPercentage = 0;
                        
                        if ($product_detail->discount > 0) {
                            $finalPrice = $originalPrice - ($originalPrice * $product_detail->discount / 100);
                            $hasDiscount = true;
                            $discountPercentage = $product_detail->discount;
                        } elseif ($product_detail->special_price && $product_detail->special_price < $originalPrice) {
                            $finalPrice = $product_detail->special_price;
                            $hasDiscount = true;
                            $discountPercentage = round((($originalPrice - $product_detail->special_price) / $originalPrice) * 100);
                        }
                        
                        $allFields = [
                            ['Input Voltage Max (Volts)', $product_detail->input_voltage_max ? $product_detail->input_voltage_max . '' : 'N/A'],
                            ['Input Voltage Min (Volts)', $product_detail->input_voltage_min ? $product_detail->input_voltage_min . '' : 'N/A'],
                            ['Input Current Max (Volts)', $product_detail->input_current_max ? $product_detail->input_current_max . '' : 'N/A'],
                            ['Output Voltage Max (Volts)', $product_detail->output_voltage_max ? $product_detail->output_voltage_max . '' : 'N/A'],
                            ['Output Voltage Min (Volts)', $product_detail->output_voltage_min ? $product_detail->output_voltage_min . '' : 'N/A'],
                            ['Output Current Max (Amps)', $product_detail->output_current_max ? $product_detail->output_current_max . '' : 'N/A'],
                            ['Max Output Power (Watts)', $product_detail->max_output_power ? $product_detail->max_output_power . '' : 'N/A'],
                            ['Max Temperature (C)', $product_detail->max_temperature ? $product_detail->max_temperature . '' : 'N/A'],
                            ['Min Temperature (C)', $product_detail->min_temperature ? $product_detail->min_temperature . '' : 'N/A'],
                            ['Product Dimension (LxWxH in mm)', $product_detail->product_dimension ? $product_detail->product_dimension . '' : 'N/A'],
                            ['Part Number', $product_detail->part_number],
                            ['Stock', $product_detail->stock],
                            ['Status', ucfirst($product_detail->status)],
                            ['Price', $hasDiscount ? $finalPrice : $originalPrice], // This will be handled specially below
                            ['Original Price', $originalPrice],
                            ['Discount', $discountPercentage > 0 ? $discountPercentage . '%' : 'No Discount'],
                            ['Brand', $product_detail->brand?->title ?? 'N/A'],
                            ['SKU', $product_detail->sku ?? 'N/A'], 
                        ];

                        $visibleCount = 14;
                        @endphp
                        
                        @foreach($allFields as $index => $field)
                            @if($field[0] == 'Price')
                                <!-- Custom price display with discount logic -->
                                <tr class="{{ $index >= $visibleCount ? 'extra-field' : '' }}" 
                                    style="{{ $index >= $visibleCount ? 'display:none;' : '' }}">
                                    <td>Price</td>
                                    <td>
                                        @if($hasDiscount)
                                            <span class="current-price">${{ number_format($finalPrice, 2) }}</span>
                                            <span class="original-price">${{ number_format($originalPrice, 2) }}</span>
                                            @if($discountPercentage > 0)
                                                <span class="discount-badge">{{ $discountPercentage }}% OFF</span>
                                            @endif
                                        @else
                                            <span>${{ number_format($originalPrice, 2) }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @elseif($field[0] == 'Original Price' || $field[0] == 'Discount')
                                <!-- Skip these as they're handled in the Price row -->
                            @else
                                <tr class="{{ $index >= $visibleCount ? 'extra-field' : '' }}" 
                                    style="{{ $index >= $visibleCount ? 'display:none;' : '' }}">
                                    <td>{{ $field[0] }}</td>
                                    <td>{{ $field[1] }}</td>
                                </tr>
                            @endif
                        @endforeach
                        
                        <tr class="view_all">
                            <td colspan="2" style="text-align: center;">
                                <a href="javascript:void(0);" id="toggleFields" 
                                   style="display:block; margin-top:10px;">View All ▼</a>
                            </td>
                        </tr>
                    </table>
                    
                    <!-- RIGHT SIDE — PRODUCT IMAGE + VIDEO -->
                    <div class="right-side">
                        <div class="media-box">              
                            <img src="{{ $product_detail->imageUrl }}" alt="{{ $product_detail->title }}">
                        </div>
                        
                        @if($product_detail->getFirstMediaUrl('videos'))
                            <div class="media-box">
                                <video controls preload="metadata">
                                    <source src="{{ $product_detail->getFirstMediaUrl('videos') }}" type="video/mp4">
                                </video>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Tab 2: Technical Documentation with Working Filters -->
                <div id="tab2" class="tab-section">
                    <div class="container mt-4 mb-4">
                        <div class="filter-bar">
                            <div class="filter-left">
                                <div>
                                    <label>Type</label><br>
                                    <select id="docTypeFilter">
                                        <option value="all">All</option>
                                        @php
                                            $uniqueTypes = $documents->where('file_type', 'Technical Documentation')
                                                ->pluck('type')
                                                ->unique()
                                                ->filter();
                                        @endphp
                                        @foreach($uniqueTypes as $type)
                                            <option value="{{ $type }}">{{ $type }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="search-box">
                                    <input type="text" id="keywordSearch" placeholder="Filter title by keyword">
                                    <i class="fa fa-search" id="searchIcon"></i>
                                </div>
                            </div>

                            <div style="white-space: nowrap;">
                                <strong>Date</strong>
                                <button id="dateSortBtn" style="background: none; border: 1px solid #ccc; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-left: 5px;">
                                    <i class="fa fa-sort" aria-hidden="true"></i>
                                    <span id="sortDirection">Newest First</span>
                                    <i class="fa fa-chevron-down sort-icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                        
                        {{-- DOCUMENT ROWS --}}
                        <div id="documentList">
                            @if($documents->count())
                                @foreach($documents as $document)
                                    @if($document->file_type == 'Technical Documentation')
                                        <div class="docs-row document-item" 
                                             data-type="{{ $document->type }}"
                                             data-title="{{ strtolower($document->title) }}"
                                             data-date="{{ $document->created_at->format('Y-m-d') }}"
                                             data-timestamp="{{ strtotime($document->created_at) }}">
                                            <span class="star-icon">★</span>
                                            <div class="doc-type">{{ $document->type }}</div>
                                            <a href="#" class="doc-title">{{ $document->title }}</a>
                                            <div class="doc-links">
                                                <a download href="{{ asset('storage/documents/'.$document->file) }}" style="color:#007c8c; font-size:14px;">PDF</a> |
                                                <a download href="{{ asset('storage/documents/'.$document->file) }}" style="color:#007c8c; font-size:14px;">HTML</a>
                                            </div>
                                            <div class="doc-date">
                                                {{ $document->created_at->format('d M Y') }}
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            @else
                                <div class="docs-row">
                                    <div class="doc-type" colspan="5">No documents available</div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Tab 3: Design & Development -->
                <div id="tab3" class="tab-section">
                    <div class="container mt-4 mb-4">
                        <div class="category-tabs">
                            <a href="#" class="tab active" data-category="Tools">Tools</a>
                            <span class="separator">|</span>
                            <a href="#" class="tab" data-category="Software">Software</a>
                            <span class="separator">|</span>
                            <a href="#" class="tab" data-category="Misc">Misc</a>
                        </div>
                        <div class="section-line"></div>

                        <div id="documents-container">
                            @if($documents->count())
                                @foreach($documents as $document)
                                    @if($document->file_type == 'Tools')
                                        <div class="file-row" data-category="Tools">
                                            <div class="file-name">
                                                {{ $document->file }}
                                            </div>
                                            <a download
                                               href="{{ asset('storage/documents/'.$document->file) }}"
                                               class="download-btn">
                                                Download
                                            </a>
                                        </div>
                                    @elseif($document->file_type == 'Software')
                                        <div class="file-row" data-category="Software">
                                            <div class="file-name">
                                                {{ $document->file }}
                                            </div>
                                            <a download
                                               href="{{ asset('storage/documents/'.$document->file) }}"
                                               class="download-btn">
                                                Download
                                            </a>
                                        </div>
                                    @elseif($document->file_type == 'Misc')
                                        <div class="file-row" data-category="Misc">
                                            <div class="file-name">
                                                {{ $document->file }}
                                            </div>
                                            <a download
                                               href="{{ asset('storage/documents/'.$document->file) }}"
                                               class="download-btn">
                                                Download
                                            </a>
                                        </div>
                                    @endif 
                                @endforeach
                            @else
                                <div class="file-row">
                                    <div class="file-name">
                                        No documents available
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Tab 4: Ordering -->
                <div id="tab4" class="tab-section">
                    <div class="container mt-4 mb-4">
                        <div class="ordering-title">Ordering</div>
                        <div class="order-line"></div>

                        <div class="order-header">
                            <div>Part Number</div>
                            <div>Purchase</div>
                            <div>Inventory</div>
                            <div>Price</div>
                            <div>Status</div>
                        </div>

                        <div class="order-line"></div>

                        <div class="order-row">
                            <div>{{$product_detail->part_number}}</div>

                            @guest
                                <div class="purchase-link">
                                    <a href="{{ route('login') }}">Login to Purchase</a>
                                </div>
                            @endguest

                            @auth
                                <form action="{{ route('single-add-to-cart') }}" method="POST">
                                    @csrf
                                    <div class="quantity" style="display:none;">
                                        <h6>Quantity :</h6>
                                        <div class="input-group">
                                            <div class="button minus">
                                                <button type="button" class="btn btn-primary btn-number"
                                                        disabled="disabled" data-type="minus"
                                                        data-field="quantity[1]">
                                                    <i class="ti-minus"></i>
                                                </button>
                                            </div>
                                            <input type="hidden" name="slug" value="{{ $product_detail->slug }}">
                                            <input type="text" name="quantity[1]" class="input-number"
                                                   data-min="1" data-max="1000" value="1" id="quantity">
                                            <div class="button plus">
                                                <button type="button" class="btn btn-primary btn-number"
                                                        data-type="plus" data-field="quantity[1]">
                                                    <i class="ti-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="add-to-cart mt-4">
                                        <!-- <button type="submit" class="btn">Purchase Now</button> -->
                                          <p>Orders are typically<br> processed within 2–3<br> business days.</p>
                                    </div>
                                </form>
                            @endauth

                            <div>{{$product_detail->stock}}</div>
                            
                            <!-- Price with discount in ordering tab -->
                            <div>
                                @if($hasDiscount)
                                    <span class="current-price">${{ number_format($finalPrice, 2) }}</span>
                                    <br>
                                    <small class="original-price">${{ number_format($originalPrice, 2) }}</small>
                                @else
                                    ${{ number_format($originalPrice, 2) }}
                                @endif
                            </div>
                            
                            <div>{{ucfirst($product_detail->status)}}</div>
                        </div>

                        <div class="order-line"></div>
                    </div>
                </div>

                <!-- Tab 5: Support & Training -->
                <div id="tab5" class="tab-section">
                    <div class="support-boxes">
                        <div class="support-box">Sales support</div>
                        <div class="support-box">Technical support</div>
                        <div class="support-box">Feedback</div>
                    </div>

                    <div class="locations">
                        <div class="location-container">
                            <h2>Locations</h2>
                            <p><strong>Executive office:</strong> {{ $settings->address ?? 'Dallas TX 75238' }}</p>
                            <p><strong>Email:</strong> 
                                <a href="mailto:{{ $settings->email ?? 'contact@aatral.com' }}">
                                    {{ $settings->email ?? 'contact@aatral.com' }}
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ================= TAB SWITCH ================= */
    document.querySelectorAll('.tab-link').forEach(link => {
        link.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelectorAll('.tab-link').forEach(t => t.classList.remove('active'));
            this.classList.add('active');

            document.querySelectorAll('.tab-section').forEach(sec => sec.classList.remove('active'));

            let target = this.getAttribute('data-target');
            document.getElementById(target).classList.add('active');
        });
    });


    /* ================= VARIABLES ================= */
    const documentList = document.getElementById('documentList');
    let documentItems = Array.from(document.querySelectorAll('.document-item'));

    let sortDirection = 'desc'; // default newest first


    /* ================= FILTER FUNCTION ================= */
        function filterDocuments() {

            let selectedType = 'all';

            const niceSelect = document.querySelector('.nice-select .current');
            if (niceSelect) {
                selectedType = niceSelect.textContent.trim();
            }

            const keyword = document.getElementById('keywordSearch').value.toLowerCase().trim();

            let visibleCount = 0;

            documentItems.forEach(item => {

                const type = item.getAttribute('data-type');

                // 🔥 FIX: Direct DOM se title lo
                const title = item.querySelector('.doc-title')?.textContent.toLowerCase() || '';

                let show = true;

                // Type filter
                if (selectedType !== 'All' && selectedType !== 'all') {
                    if (type !== selectedType) {
                        show = false;
                    }
                }

                // Keyword filter
                if (show && keyword !== '') {
                    if (!title.includes(keyword)) {
                        show = false;
                    }
                }

                item.style.display = show ? 'flex' : 'none';

                if (show) visibleCount++;
            });

            // No result message
            let noMsg = document.getElementById('noResults');

            if (visibleCount === 0) {
                if (!noMsg) {
                    noMsg = document.createElement('div');
                    noMsg.id = 'noResults';
                    noMsg.className = 'docs-row';
                    noMsg.innerHTML = '<div style="width:100%;text-align:center;padding:20px;">No document found</div>';
                    document.getElementById('documentList').appendChild(noMsg);
                }
            } else {
                if (noMsg) noMsg.remove();
            }
        }


    /* ================= SORT FUNCTION ================= */
    function sortDocuments() {

        documentItems.sort((a, b) => {
            let aTime = parseInt(a.getAttribute('data-timestamp'));
            let bTime = parseInt(b.getAttribute('data-timestamp'));

            return sortDirection === 'desc' ? bTime - aTime : aTime - bTime;
        });

        documentItems.forEach(item => documentList.appendChild(item));

        filterDocuments();
    }


    /* ================= SEARCH ================= */
    const searchInput = document.getElementById('keywordSearch');

    searchInput.addEventListener('keyup', function () {
        filterDocuments(); // live search
    });

    document.getElementById('searchIcon').addEventListener('click', filterDocuments);


    /* ================= TYPE FILTER (nice-select click detect) ================= */
    document.addEventListener('click', function (e) {
        if (e.target.closest('.nice-select .option')) {
            setTimeout(() => {
                filterDocuments();
            }, 100);
        }
    });


    /* ================= DATE SORT ================= */
    const dateBtn = document.getElementById('dateSortBtn');

    dateBtn.addEventListener('click', function () {

        sortDirection = sortDirection === 'desc' ? 'asc' : 'desc';

        document.getElementById('sortDirection').textContent =
            sortDirection === 'desc' ? 'Newest First' : 'Oldest First';

        sortDocuments();
    });


    /* ================= INIT ================= */
    sortDocuments(); // default load

});
</script>
@endsection