Anons79 Mini Shell

@extends('general.head')
@section('middle')


<div class="page-head_agile_info_w3l">

</div>
<!-- //banner-2 -->
<!-- page -->
<div class="services-breadcrumb">
    <div class="agile_inner_breadcrumb">
        <div class="container">
            <ul class="w3_short">
                <li>
                    <a href="{{ url('/') }}">Home</a>
                    <i>|</i>
                </li>
                <li>Order Detail</li>
            </ul>
        </div>
    </div>
</div>

    <style>
        table {
            width: 750px;
            border-collapse: collapse;
            margin:50px auto;
        }

        /* Zebra striping */
        tr:nth-of-type(odd) {
            /*background: #eee;*/
        }

        th {
            background: #3498db;
            color: white;
            font-weight: bold;
        }

        td, th {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
            font-size: 18px;
        }

        /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
        @media
        only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px)  {

            table {
                width: 100%;
            }

            /* Force table to not be like tables anymore */
            table, thead, tbody, th, td, tr {
                display: block;
            }

            /* Hide table headers (but not display: none;, for accessibility) */
            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            tr { border: 1px solid #ccc; }

            td {
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
            }

            td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                /* Label the data */
                content: attr(data-column);

                color: #000;
                font-weight: bold;
            }

        }
    </style>

    <table style="width: 80%;">
        <thead>
        <tr>
            <th>Sr #</th>
            <th>Product Name</th>
            <th>Product Image</th>
            <th>Quantity</th>
            <th>Size/Volume</th>
            <th>Price</th>
        </tr>
        </thead>
        <tbody>

        <?php $count=1; ?>
        @foreach($products as $product)
        <tr>
            <td data-column="Sr #">{{ $count }}</td>
            <td data-column="Product Name">{{ $product->product_name }}</td>
            <td data-column="Product Image">
                @php
                $check = DB::table('product_images')->where('product_id',$product->product_id)->take(1)->get();
                @endphp
                @if(count($check)>0)
                <img  style="width: 100px; height: 100px" src="{{ url('public/uploads/products') }}/{{ $check[0]->image_name }}"  >
                @endif
            </td>
            <td data-column="Quantity">{{ $product->quantity }}</td>
            <td data-column="Size/Volume">{{ $product->secondquantity }}{{ $product->unit }}</td>
            <td data-column="Price">{{ $product->amount }}</td>

        </tr>
        <?php $count=$count+1; ?>
        @endforeach



        </tbody>
    </table>



</main>
<script>
    $(document).ready(function(){
        $('.password-toggle').on('click',function(){

            $('#AddressNewForm').show();
        });
    });
</script>

@endsection