@extends('admin.layouts.app')
@push('style')
<link rel="stylesheet" href="{{asset('assets/css/ecommerce.css')}}">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    .product_item {
        background-color: #eee !important;
    }

    .image-container {
        width: 200px;
        height: 250px;
        overflow: hidden;
        position: relative;
    }

    .image-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .product_image {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }


    .hover-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .image-container:hover .hover-item {
        opacity: 1;
    }

    .hover-item a {
        text-align: center;
        color: aliceblue !important;
    }
</style>
@endpush

@section('content')
<section class="content home">

    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"><i class="zmdi zmdi-account"></i>
                    View Vendor
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin-manage_vendor')}}"></a>Manage Vendors</li>
                    <li class="breadcrumb-item active">View Vendor</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card text-center mt-3">
                    <div class="card-body">

                        <a class="btn btn-white float-left ml-3 mt-2" href="{{ back()->getTargetUrl() }}">
                            <i class="material-icons text-muted">arrow_back</i>
                        </a>

                        <div class="row py-5 px-4 col-12">
                            <div class="col-12 mx-auto">

                                <div class="rounded-image-wrapper">
                                    @if ($vendor->profile_image == 'default.png')
                                    <img src="{{asset('assets/images/user_square_default.jpg')}}" class="avatar-lg img-thumbnail mb-3 image" alt="profile-image" width="200" height="150px">
                                    @endif


                                    <div class="body col-12">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="card-box m-t-20 text-left m-l-10">
                                                    <h4 class="m-t-0"><b>Personal Information</b></h4>
                                                    <br>
                                                    <div class="p-20">
                                                        <div class="about-info-p">
                                                            <strong>Name</strong>
                                                            <br>
                                                            <p class="text-muted">{{$vendor->name ?? 'N/A'}}</p>
                                                        </div>

                                                        <div class="about-info-p">
                                                            <strong>Email</strong>
                                                            <br>
                                                            <p class="text-muted">{{$vendor->email ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Country Code</strong>
                                                            <br>
                                                            <p class="text-muted">{{$vendor->country_code ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Phone Number</strong>
                                                            <br>
                                                            <p class="text-muted">{{$vendor->phone ?? 'N/A'}}</p>
                                                        </div>

                                                        <div class="about-info-p">
                                                            <strong>Contact Details</strong>
                                                            <br>
                                                            <p class="text-muted">{{$vendor->contact_details ?? 'N/A'}}</p>
                                                        </div>

                                                        <div class="about-info-p">
                                                            <strong>Registration Date</strong>
                                                            <br>

                                                            <p class="text-muted"> </p>

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

                                            <div class="col-md-5 offset-md-1">
                                                <div class="card-box m-t-20 text-left m-l-10">
                                                    <h4 class="m-t-0"><b>Vendor Details</b></h4>
                                                    <br>
                                                    <div class="p-20">
                                                        <div class="about-info-p">
                                                            <strong>Description</strong>
                                                            <br>
                                                            <p class="text-muted">{{$vendor->description ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Address</strong>
                                                            <br>

                                                            <p class="text-muted">{{$vendor->address ?? 'N/A'}}</p>

                                                        </div>

                                                        <div class="about-info-p">
                                                            <strong>Attached Document</strong>
                                                            <br>
                                                            @php
                                                            $documentUrl = env("AWS_URL") . env("AWS_FOLDER") . env("VENDOR_DOCUMENT") . $vendor->document;
                                                            $isPdf = pathinfo($documentUrl, PATHINFO_EXTENSION) === 'pdf';
                                                            @endphp
                                                            <a href="{{ $documentUrl }}" target="_blank">
                                                                <img src="{{ asset('assets/images/pdf.png') }}" class="mt-2 mb-1 ml-3" alt="PDF" height="80" width="80">
                                                                <p class="text-muted">Click to Download</p>
                                                            </a>
                                                        </div>



                                                        <!-- <h4 class="mt-4 mb-2"><b>Device Information</b></h4>
                                                        <br>
                                                        <div class="about-info-p">
                                                            <strong>Os version</strong>
                                                            <br>
                                                            <p class="text-muted"></p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Device name</strong>
                                                            <br>
                                                            <p class="text-muted"> </p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Device type</strong>
                                                            <br>

                                                            <p class="text-muted"></p>

                                                        </div>-->
                                                    </div>

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

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

                        <h4 class="m-t-0"><b>Vendor Product Listing</b></h4>
                        <br><br>

                        <div class="container-fluid">
                            <div class="row clearfix">

                                @foreach ($vendorProducts as $product )


                                <div class="col-lg-3 col-md-4 col-sm-12">
                                    <div class="card product_item">
                                        <div class="body">
                                            <div class="cp_img image-container">
                                                <div class="image-wrapper">
                                                    <img src='{{ env("AWS_URL").env("AWS_FOLDER").env("PRODUCT_IMAGE").$product->image }}' alt="Product" class="img-fluid product_image" />
                                                </div>
                                                <div class="hover-item">
                                                    <a href="{{route('admin-view_vendor_product',['id' => Crypt::encrypt($product->id)])}}" class=""><i class="zmdi zmdi-eye mr-1"> View Product</i></a>
                                                </div>
                                            </div>

                                            <div class="product_details">
                                                <h5><a href="javascript:void(0);">{{$product->product_name}}</a></h5>
                                                <ul class="product_price list-unstyled">
                                                    <p class="text-muted">Price : {{$product->price ?? 'N/A'}}</p>
                                                    <!-- <li class="old_price">Price :</li>
                                                    <li class="new_price ml-0">{{$product->price ?? 'N/A'}}</li> -->
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @endforeach


                            </div>
                        </div>

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


</section>
@endsection


@push('script')
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>


@endpush