@section('title', $title)
@section('description', $description)
@extends('layout.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">

            <div class="breadcrumb-main user-member justify-content-sm-between">
                <div class="d-flex flex-wrap justify-content-center breadcrumb-main__wrapper">
                    <div class="d-flex align-items-center user-member__title justify-content-center me-sm-25">
                        <h4 class="text-capitalize fw-500 breadcrumb-title">{{ trans('menu.user-table') }}</h4>
                        <span class="sub-title ms-sm-25 ps-sm-25">Home</span>
                    </div>

                    <form action="/" class="d-flex align-items-center user-member__form my-sm-0 my-2">
                        <img src="{{ asset('assets/img/svg/search.svg') }}" alt="search" class="svg">
                        <input class="form-control me-sm-2 border-0 box-shadow-none" type="search" placeholder="Search by Name" aria-label="Search">
                    </form>
                    
                   
                </div>
                 <div class="d-flex gap-2">
                        <a href="{{route('product.stock')}}" class="btn btn-outline-primary"><i class="uil uil-arrow-left"></i> Back</a>
  
                    </div>
            </div>

        </div>
    </div>
  <!-- File Display Section -->
    <div class="row">
        <div class="col-lg-12">
            <div class="userDatatable global-shadow border-light-0 p-30 bg-white radius-xl w-100 mb-30">
                <div class="row">
                    @if(count($imagesOrfiles) > 0)
                        @foreach($imagesOrfiles as $file)
                            @php
                                $filePath = asset($folderUrl . '/' . basename($file));
                                $fileExtension = pathinfo($file, PATHINFO_EXTENSION);
                                $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
                                $isImage = in_array(strtolower($fileExtension), $imageExtensions);
                            @endphp

                            <div class="col-md-3 mb-4">
                                <div class="file-container position-relative">
                                    @if($isImage)
                                        <!-- Show Image -->
                                        <img src="{{ $filePath }}" alt="Image" class="img-fluid rounded shadow-sm file-preview">
                                    @else
                                        <!-- Show File Icon -->
                                        <div class="file-preview d-flex align-items-center justify-content-center">
                                            <img src="{{ asset('assets/img/svg/file.svg') }}" alt="File" class="file-icon">
                                        </div>
                                    @endif

                                    <!-- Download Button (Hidden by Default, Shown on Hover) -->
                                    <a href="{{ $filePath }}" class="download-btn" download>
                                        📥 Download
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- details Section -->
   <div class="row">
    <div class="col-lg-12">
        <div class="card shadow-sm border-0 p-3">
            <div class="row g-3">
                <!-- Product Image (Left Side) -->
                <div class="col-md-4 text-center">
                    <img src="{{ optional($product->accountProfile)->logo ? asset($product->accountProfile->logo) : asset('/assets/img/jpg@2x.png') }}" 
                        alt="{{ $product->product_name }}" 
                        class="img-fluid rounded shadow-sm" 
                        style="max-width: 100%; height: auto;">
                </div>

                <!-- Product Information (Right Side) -->
                <div class="col-md-8">
                    <h3 class="fw-bold text-dark">{{ $product->product_name }}</h3>
                    <p class="mb-2"><strong>Account Holder:</strong> {{ $product->account_holder }}</p>
                    <p class="mb-2"><strong>Email:</strong> <a href="mailto:{{ $product->email }}" class="text-decoration-none text-primary">{{ $product->email }}</a></p>
                    <p class="mb-2"><strong>Cost:</strong> <span class="fw-bold text-success">{{ $product->product_cost }}</span></p>
                    
                    <!-- Attachment -->
                    <p class="mb-3">
                        <strong>Attachment:</strong> 
                        @if($product->attachment)
                            <a href="{{ route('product.attachment_view', $product->attachment->id) }}" 
                               class="text-decoration-none text-info fw-medium">
                                <i class="uil uil-paperclip"></i> {{ $product->attachment->attachment_name }}
                            </a>
                        @else
                            <span class="text-muted">No Attachment</span>
                        @endif
                    </p>

 
                </div>
            </div>
        </div>
    </div>
</div>

</div>

</div>

<!-- Custom Styles -->
<style>
    .file-container {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
    }

    .file-preview {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }

    .file-icon {
        width: 60px;
    }

    .download-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 8px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .file-container:hover .download-btn {
        opacity: 1;
    }

    .file-container:hover .file-preview {
        transform: scale(1.05);
    }
</style>
@endsection