@extends('admin.layouts.app')
@push('style')

<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">

@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 Product
                    <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_products')}}"></a>Manage Vendor Products</li>
                    <li class="breadcrumb-item active">View Product</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">

                                    <img src="{{env('AWS_URL').env('AWS_FOLDER').env('PRODUCT_IMAGE').$product->image}}" class="avatar-lg img-thumbnail mb-3 image" alt="profile-image" width="220" height="200px">
                                   
                                    <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>Product Details</b></h4>
                                                    <br>
                                                    <div class="p-20">
                                                        <div class="about-info-p">
                                                            <strong>Product Name</strong>
                                                            <br>
                                                            <p class="text-muted">{{$product->product_name ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Price</strong>
                                                            <br>
                                                            <p class="text-muted">{{$product->price ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Description</strong>
                                                            <br>
                                                            <p class="text-muted">{{$product->description ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Terms of Offer</strong>
                                                            <br>
                                                            <p class="text-muted">{{$product->terms_of_offer ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Cashback</strong>
                                                            <br>
                                                            @if (empty($product->cashback))
                                                            <p class="text-muted">{{$product->cashback ?? 'N/A'}}</p>
                                                            @else
                                                            <p class="text-muted">{{$product->cashback}} %</p>
                                                            @endif
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Offer</strong>
                                                            <br>
                                                            @if (empty($product->offer))
                                                            <p class="text-muted">{{$product->offer ?? 'N/A'}}</p>
                                                            @else
                                                            <p class="text-muted">{{$product->offer}} %</p>
                                                            @endif
                                                        </div>


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

                                                            <p class="text-muted date">{{$product->created_at ?? 'N/A'}}</p>
                                                        </div>

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

                                                            <p class="text-muted updated_date">{{$product->updated_at ?? 'N/A'}}</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>Vendor Name</strong>
                                                            <br>
                                                            <p class="text-muted">{{$product->vendor->name ?? 'N/A'}}</p>
                                                        </div>
                                                        <div class="about-info-p">
                                                            <strong>Email</strong>
                                                            <br>
                                                            <p class="text-muted">{{$product->vendor->email ?? 'N/A'}}</p>
                                                        </div>

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

</section>
@endsection


@push('script')
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script>
    $(document).ready(function() {
        var $date = $('.date').text();
        var formattedDate = moment.parseZone($date).local().format('lll');
        $('.date').text(formattedDate);

        var $updated_date = $('.updated_date').text();
        var formattedDate = moment.parseZone($updated_date).local().format('lll');
        $('.updated_date').text(formattedDate);
    });
</script>

@endpush