@extends('layouts.app')

@section('title', 'Products View')

@section('content')
    <!-- [ page-header ] start -->
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">Products</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('myactivities') }}">Home</a></li>
                <li class="breadcrumb-item">View</li>
            </ul>
        </div>
        <div class="page-header-right ms-auto">
            <div class="page-header-right-items">
                <div class="d-flex d-md-none">
                    <a href="javascript:void(0)" class="page-header-right-close-toggle">
                        <i class="feather-arrow-left me-2"></i>
                        <span>Back</span>
                    </a>
                </div>
                <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                    <a href="javascript:void(0);" class="btn btn-icon btn-light-brand successAlertMessage">
                        <i class="feather-star"></i>
                    </a>
                    <a href="javascript:void(0);" class="btn btn-icon btn-light-brand">
                        <i class="feather-eye me-2"></i>
                        <span>Follow</span>
                    </a>
                    <a href="{{ route('products-create') }}" class="btn btn-primary">
                        <i class="feather-plus me-2"></i>
                        <span>Create Product</span>
                    </a>
                </div>
            </div>
            <div class="d-md-none d-flex align-items-center">
                <a href="javascript:void(0)" class="page-header-right-open-toggle">
                    <i class="feather-align-right fs-20"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- [ page-header ] end -->
    <!-- [ Main Content ] start -->
    <div class="main-content">

        <div class="row">
            <div class="col-xxl-4 col-xl-6">
                <div class="card stretch stretch-full">
                    <div class="card-body">
                        <div class="mb-4 text-center">
                            <div class="container my-5">
                                <!-- First (Main) Image -->
                                <div class="text-center mb-4">
                                    <div class="position-relative border border-gray-3 p-1"
                                        style="max-width: 500px; margin: auto;">
                                        <img src="{{ asset('storage/' . ($product->images[0] ?? 'default.png')) }}"
                                            alt="Main Product Image" class="img-fluid rounded w-100"
                                            style="height: auto; object-fit: cover;">
                                    </div>
                                </div>

                                <!-- Additional Images -->
                                <div class="row justify-content-center gap-3">
                                    @if (!empty($product->images) && is_array($product->images))
                                        @foreach ($product->images as $key => $image)
                                            @if ($key > 0)
                                                <div class="col-md-2 col-4 w-25 gap-3">
                                                    <div class="border">
                                                        <img src="{{ asset('storage/' . $image) }}"
                                                            alt="Product Image {{ $key }}"
                                                            class="img-fluid rounded"
                                                            style="height: auto; object-fit: cover;">
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @else
                                        <p class="text-muted text-center">No additional images available.</p>
                                    @endif
                                </div>

                            </div>
                            <div class="mb-4">
                                <a href="javascript:void(0);" class="fs-20 fw-bold d-block">
                                    {{ $product->product_name }}</a>
                            </div>
                        </div>

                        <div class="d-flex gap-2 text-center pt-4">
                            @can('delete_products')
                            <a href="javascript:void(0);" class="w-50 btn btn-light-brand">
                                <i class="feather-trash-2 me-2"></i>
                                <span>Delete</span>
                            </a>
                            @endcan
                            @can('update_products')
                            <a href="{{ route('products.edit') }}?id={{ $product->id }}"
                                class="w-50 btn btn-primary">
                                <i class="feather-edit me-2"></i>
                                <span>Edit Product</span>
                            </a>
                            @endcan
                        </div>
                    </div>
                </div>

                {{-- <div class="card stretch stretch-full">
                            <div class="card-header">
                                <h2 class="card-title">Suggestions</h2>
                                <div class="dropdown">
                                    <a href="javascript:void(0);" class="avatar-text avatar-sm"
                                        data-bs-toggle="dropdown" data-bs-offset="25,25">
                                        <i class="feather feather-more-vertical"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather feather-lock me-3"></i>
                                                <span>Only Me</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather feather-globe me-3"></i>
                                                <span>Everyone</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather feather-users me-3"></i>
                                                <span>Anonymous</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather feather-user-check me-3"></i>
                                                <span>People I Follow</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather feather-eye me-3"></i>
                                                <span>People Follow Me</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather feather-settings me-3"></i>
                                                <span>Custom Selections Ever</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="avatar-image flex-shrink-0 me-3">
                                        <img src="assets/images/avatar/1.png" class="img-fluid" alt="">
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <h5 class="fs-13 mb-1">Alexandra Della</h5>
                                            <p class="fs-12 text-muted mb-0">Frontend Developer</p>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0 ms-2">
                                        <a href="javascript:void(0);" class="avatar-text avatar-md"><i
                                                class="feather feather-user-plus align-middle"></i></a>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-4">
                                    <div class="flex-shrink-0 me-3">
                                        <div class="bg-warning text-white avatar-text">B</div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <h5 class="fs-13 mb-1">Bryan Waters</h5>
                                            <p class="fs-12 text-muted mb-0">UI/UX Designer</p>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0 ms-2">
                                        <a href="javascript:void(0);" class="avatar-text avatar-md"><i
                                                class="feather feather-user-plus align-middle"></i></a>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-4">
                                    <div class="avatar-image flex-shrink-0 me-3">
                                        <img src="assets/images/avatar/2.png" class="img-fluid" alt="">
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <h5 class="fs-13 mb-1">Curtis Green</h5>
                                            <p class="fs-12 text-muted mb-0">Backend Developer</p>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0 ms-2">
                                        <a href="javascript:void(0);" class="avatar-text avatar-md"><i
                                                class="feather feather-user-plus align-middle"></i></a>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-4">
                                    <div class="flex-shrink-0 me-3">
                                        <div class="bg-danger text-white avatar-text">E</div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <h5 class="fs-13 mb-1">Edward Andrade</h5>
                                            <p class="fs-12 text-muted mb-0">Fullstack Designer</p>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0 ms-2">
                                        <a href="javascript:void(0);" class="avatar-text avatar-md"><i
                                                class="feather feather-user-plus align-middle"></i></a>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-image flex-shrink-0 me-3">
                                        <img src="assets/images/avatar/3.png" class="img-fluid" alt="">
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <h5 class="fs-13 mb-1">Marianne Audrey</h5>
                                            <p class="fs-12 text-muted mb-0">Fullstack Developer</p>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0 ms-2">
                                        <a href="javascript:void(0);" class="avatar-text avatar-md"><i
                                                class="feather feather-user-plus align-middle"></i></a>
                                    </div>
                                </div>
                            </div>
                            <a href="javascript:void(0);" class="ladda-button zoom-out" data-bs-toggle="tooltip"
                                data-bs-trigger="hover" title="Refresh Now">
                                <span>Refresh</span>
                                <span class="spinner"></span>
                            </a>
                        </div> --}}
            </div>
            <div class="col-xxl-8 col-xl-6">
                <div class="card border-top-0">
                    <div class="card-header p-0">
                        <!-- Nav tabs -->
                        {{-- <ul class="nav nav-tabs flex-wrap w-100 text-center customers-nav-tabs" id="myTab"
                                    role="tablist">
                                    <li class="nav-item flex-fill border-top" role="presentation">
                                        <a href="javascript:void(0);" class="nav-link active" data-bs-toggle="tab"
                                            data-bs-target="#overviewTab" role="tab">Overview</a>
                                    </li>
                                    <li class="nav-item flex-fill border-top" role="presentation">
                                        <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                            data-bs-target="#billingTab" role="tab">Billing</a>
                                    </li>
                                    <li class="nav-item flex-fill border-top" role="presentation">
                                        <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                            data-bs-target="#activityTab" role="tab">Activity</a>
                                    </li>
                                    <li class="nav-item flex-fill border-top" role="presentation">
                                        <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                            data-bs-target="#notificationsTab" role="tab">Notifications</a>
                                    </li>
                                    <li class="nav-item flex-fill border-top" role="presentation">
                                        <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                            data-bs-target="#connectionTab" role="tab">Connection</a>
                                    </li>
                                    <li class="nav-item flex-fill border-top" role="presentation">
                                        <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                            data-bs-target="#securityTab" role="tab">Security</a>
                                    </li>
                                </ul> --}}
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active p-4" id="overviewTab" role="tabpanel">
                            {{-- <div class="about-section mb-5">
                                        <div class="mb-4 d-flex align-items-center justify-content-between">
                                            <h5 class="fw-bold mb-0">Profile About:</h5>
                                            <a href="javascript:void(0);"
                                                class="btn btn-sm btn-light-brand">Updates</a>
                                        </div>
                                        <p>
                                            {{ $contact->description }}
                                        </p>
                                    </div> --}}
                            <div class="profile-details mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-between">
                                    <h5 class="fw-bold mb-0">Profile Details:</h5>
                                    @can('update_products')
                                    <a href="{{ route('products.edit') }}?id={{ $product->id }}"
                                        class="btn btn-sm btn-light-brand">Edit Product</a>
                                    @endcan
                                </div>
                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Name:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->product_name }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Product Code:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->product_code }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Product Type:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->product_type_id }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Unit:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->unit_id }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Price:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->price }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Tax:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->tax }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Discount:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->discount }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Category:</div>
                                    <div class="col-sm-6 fw-semibold">
                                        {{ $product->product_category_id }}
                                    </div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Description:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->description }}</div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Created Date:</div>
                                    <div class="col-sm-6 fw-semibold">
                                        {{ \Carbon\Carbon::parse($product->created_at)->format('d M, Y') }}
                                    </div>
                                </div>

                                <div class="row g-0 mb-4">
                                    <div class="col-sm-6 text-muted">Status:</div>
                                    <div class="col-sm-6 fw-semibold">{{ $product->status }}</div>
                                </div>
                            </div>
                            {{-- <div class="alert alert-dismissible mb-4 p-4 d-flex alert-soft-warning-message profile-overview-alert"
                                        role="alert">
                                        <div class="me-4 d-none d-md-block">
                                            <i class="feather feather-alert-triangle fs-1"></i>
                                        </div>
                                        <div>
                                            <p class="fw-bold mb-1 text-truncate-1-line">Your profile has not been
                                                updated yet!!!</p>
                                            <p class="fs-10 fw-medium text-uppercase text-truncate-1-line">Last
                                                Update:
                                                <strong>26 Dec, 2023</strong>
                                            </p>
                                            <a href="javascript:void(0);"
                                                class="btn btn-sm bg-soft-warning text-warning d-inline-block">Update
                                                Now</a>
                                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                                aria-label="Close"></button>
                                        </div>
                                    </div>
                                    <div class="project-section">
                                        <div class="mb-4 d-flex align-items-center justify-content-between">
                                            <h5 class="fw-bold mb-0">Projects Details:</h5>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-light-brand">View
                                                Alls</a>
                                        </div>
                                        <div class="row">
                                            <div class="col-xxl-6 col-xl-12 col-md-6">
                                                <div class="border border-dashed border-gray-5 rounded mb-4 md-lg-0">
                                                    <div class="p-4">
                                                        <div class="d-sm-flex align-items-center">
                                                            <div class="wd-50 ht-50 p-2 bg-gray-200 rounded-2">
                                                                <img src="assets/images/brand/github.png"
                                                                    class="img-fluid" alt="">
                                                            </div>
                                                            <div class="ms-0 mt-4 ms-sm-3 mt-sm-0">
                                                                <a href="javascript:void(0);" class="d-block">Mailbox
                                                                    Platform Github</a>
                                                                <div class="fs-12 d-block text-muted">Development
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="my-4 text-muted text-truncate-2-line">Lorem
                                                            ipsum
                                                            dolor sit amet consectetur adipisicing elit. Molestias
                                                            dolorem necessitatibus temporibus nemo commodi eaque
                                                            dignissimos itaque unde hic, sed rerum doloribus
                                                            possimus
                                                            minima nobis porro facilis voluptatum atque asperiores
                                                            perspiciatis saepe laboriosam rem cupiditate libero sit.
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="img-group lh-0 ms-3">
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Janette Dalton">
                                                                    <img src="assets/images/avatar/2.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Michael Ksen">
                                                                    <img src="assets/images/avatar/3.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Socrates Itumay">
                                                                    <img src="assets/images/avatar/4.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Marianne Audrey">
                                                                    <img src="assets/images/avatar/5.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Marianne Audrey">
                                                                    <img src="assets/images/avatar/6.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-text avatar-sm bg-soft-primary"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Explorer More">
                                                                    <i class="feather feather-more-horizontal"></i>
                                                                </a>
                                                            </div>
                                                            <div class="badge bg-soft-primary text-primary">
                                                                Inprogress
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="px-4 py-3 border-top border-top-dashed border-gray-5 d-flex justify-content-between gap-2">
                                                        <div class="w-75 d-none d-md-block">
                                                            <small
                                                                class="fs-11 fw-medium text-uppercase text-muted d-flex align-items-center justify-content-between">
                                                                <span>Progress</span>
                                                                <span>80%</span>
                                                            </small>
                                                            <div class="progress mt-1 ht-3">
                                                                <div class="progress-bar bg-primary"
                                                                    role="progressbar" style="width: 80%"></div>
                                                            </div>
                                                        </div>
                                                        <span class="mx-2 text-gray-400 d-none d-md-block">|</span>
                                                        <a href="javascript:void(0);" class="fs-12 fw-bold">View
                                                            &rarr;</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xxl-6 col-xl-12 col-md-6">
                                                <div class="border border-dashed border-gray-5 rounded">
                                                    <div class="p-4">
                                                        <div class="d-sm-flex align-items-center">
                                                            <div class="wd-50 ht-50 p-2 bg-gray-200 rounded-2">
                                                                <img src="assets/images/brand/figma.png"
                                                                    class="img-fluid" alt="">
                                                            </div>
                                                            <div class="ms-0 mt-4 ms-sm-3 mt-sm-0">
                                                                <a href="javascript:void(0);" class="d-block">Chatting
                                                                    Platform Figme</a>
                                                                <div class="fs-12 text-muted">Design</div>
                                                            </div>
                                                        </div>
                                                        <div class="my-4 text-muted text-truncate-2-line">Lorem
                                                            ipsum
                                                            dolor sit amet consectetur adipisicing elit. Molestias
                                                            dolorem necessitatibus temporibus nemo commodi eaque
                                                            dignissimos itaque unde hic, sed rerum doloribus
                                                            possimus
                                                            minima nobis porro facilis voluptatum atque asperiores
                                                            perspiciatis saepe laboriosam rem cupiditate libero sit.
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="img-group lh-0 ms-3">
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Janette Dalton">
                                                                    <img src="assets/images/avatar/2.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Michael Ksen">
                                                                    <img src="assets/images/avatar/3.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Socrates Itumay">
                                                                    <img src="assets/images/avatar/4.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Marianne Audrey">
                                                                    <img src="assets/images/avatar/5.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-image avatar-sm"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Marianne Audrey">
                                                                    <img src="assets/images/avatar/6.png"
                                                                        class="img-fluid" alt="image">
                                                                </a>
                                                                <a href="javascript:void(0);"
                                                                    class="avatar-text avatar-sm bg-soft-primary"
                                                                    data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                    title="Explorer More">
                                                                    <i class="feather feather-more-horizontal"></i>
                                                                </a>
                                                            </div>
                                                            <div class="badge bg-soft-success text-success">
                                                                Completed
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="px-4 py-3 border-top border-top-dashed border-gray-5 d-flex justify-content-between gap-2">
                                                        <div class="w-75 d-none d-md-block">
                                                            <small
                                                                class="fs-10 fw-medium text-uppercase text-muted d-flex align-items-center justify-content-between">
                                                                <span>progress</span>
                                                                <span>100%</span>
                                                            </small>
                                                            <div class="progress mt-1 ht-3">
                                                                <div class="progress-bar bg-success"
                                                                    role="progressbar" style="width: 100%"></div>
                                                            </div>
                                                        </div>
                                                        <span class="mx-2 text-gray-400 d-none d-md-block">|</span>
                                                        <a href="javascript:void(0);" class="fs-12 fw-bold">View
                                                            &rarr;</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> --}}
                        </div>




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

    </div>
    <!-- [ Main Content ] end -->
@endsection
