@extends('layouts.tenant.master')
@section('title', 'Product Menu')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/datatables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/datatable-extension.css') }}">
@endsection
<style>
.product_img_center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-image {
    width: 50%;
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 500px) {
    .product-image {
        max-width: 300px;
        width: 100%;
    }
}
</style>

@section('style')
@endsection

@section('breadcrumb-title')
    <h2>Product<span>Details</span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Products</li>
    <li class="breadcrumb-item active">View</li>
@endsection

@section('content')
    <div class="container-fluid d-flex justify-content-center">
        <div class="row" style="width:100%">
            <!-- Personal Information -->
            <div class="p-2 col-xs-12 col-sm-12 col-md-12 col-lg-6 product_img_center">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th>Catalog:</th>
                            <td>{{ $product->productCatalog->name }}</td>
                        </tr>
                        <tr>
                            <th>Cabinet Label:</th>                                
                            <td>{{ $product->productCategory->cabinets_name }}</td>
                        </tr>
                        <tr>
                            <th>SKU:</th>
                            <td>{{ $product->sku }}</td>
                        </tr>
                        <tr>
                            <th>Description:</th>
                            <td>{{ $product->description }}</td>
                        </tr>
                        <tr>
                            <th>Weight:</th>
                            <td>{{ $product->weight }}</td>
                        </tr>
                        <tr>
                            <th>Cost:</th>
                            <td>{{ $product->cost }}</td>
                        </tr>
                        <tr>
                            <th>Quantity:</th>
                            <td>{{ $product->qty }}</td>
                        </tr>
                        <tr>
                            <th>Manufacture Date:</th>
                            <td>{{ $product->manufacture_date }}</td>
                        </tr>
                        <tr>
                            <th>Image</th>
                            <td>{{ $product->image }}</td>
                        </tr>
                        <!-- <tr>
                            <th>Detail</th>
                            <td>{{ $product->description }}</td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
            
            <div class="p-2 col-xs-12 col-sm-12 col-md-12 col-lg-6 product_img_center">
                <img src="{{ dynamic_url($product->image) }}" class="product-image" alt="">   
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{ dynamic_url('assets/main/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.buttons.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/jszip.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.colVis.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/pdfmake.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/vfs_fonts.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.autoFill.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.select.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.html5.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.print.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.responsive.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.keyTable.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.colReorder.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.fixedHeader.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.rowReorder.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.scroller.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/custom.js') }}"></script>
@endsection