@extends('layouts.base')
@section('title', 'Products')
@section('content')
    <style>
        .list {
            display: inline-block;
            margin: 0 10px;

        }

        .price {
            margin-top: 20px;
            padding: 10px;
            /* Add padding to create separation */
            background-color: #f0f0f0;
            /* Add a background color */
            border: 1px solid #ccc;
            /* Add a border for better visual separation */
            border-radius: 5px;
            /* Add border radius for rounded corners */
        }

        .button-container {
            display: flex;
        }

        .button-wrapper {
            margin-right: 10px;
            /* Optional: Adjust spacing between buttons */
        }
    </style>
    <div id="layoutSidenav_content">
        <main class="mt-2">
            <div class="container-fluid px-1 mx-2">
                <div class="button-container" style="display: flex;">
                    <div class="button-wrapper">
                        <h4 class="button-item">
                            <a href="{{ route('product-create') }}" class="btn btn-info">Add Product</a>
                        </h4>
                    </div>
                    <div class="button-wrapper">
                        <h4 class="button-item">
                            <a href="{{ route('product-shipping') }}" class="btn btn-info">Shipping</a>
                        </h4>
                    </div>
                    <div class="button-wrapper">
                        <h4 class="button-item">
                            <a href="{{ route('product-company') }}" class="btn btn-info">Company</a>
                        </h4>
                    </div>
                </div>

                <div class="card mb-4 mt-2 mx-2">
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        All Products
                    </div>
                    <div class="card-body">
                        <table id="datatablesSimple">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>No</th>
                                    <th>Name of Item</th>
                                    <th>Maker</th>
                                    <th>Model</th>
                                    <th>Prob</th>
                                    <th>Quantity</th>
                                    <th>Purchase Price</th>
                                    <th>Total Price</th>
                                    <th style="width: 100px">Image</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($products as $key => $product)
                                    <tr>
                                        <td>{{ ++$key }}</td>
                                        <th>{{ $product->code }}</th>
                                        <th>{{ $product->name }}</th>
                                        <th>{{ $product->maker }}</th>
                                        <th>{{ $product->modal->name }}</th>
                                        <th>{{ $product->prob }}</th>
                                        <th>{{ number_format($product->quantity) }}</th>
                                        <th>Rs
                                            {{ number_format($product->PurchasePrice) }}
                                        </th>
                                        <th>Rs
                                            {{ number_format($product->SellPrice) }}
                                        </th>

                                        <th> <img class="img-full" src="{{ asset('storage/images/' . $product->image) }}"
                                                alt="Pro Image" style="width: 50%"></th>
                                        <th>
                                            <ul>

                                                <li class="list">
                                                    <a href="{{ route('generate-barcode', $product->id) }}"><i
                                                            class="fa-solid fa-download"></i></a>
                                                </li>
                                                <li class="list">
                                                    <a href="{{ route('product-edit', $product->id) }}"><i
                                                            class="far fa-edit"></i></a>
                                                </li>
                                                <li class="list">
                                                    <form action="{{ route('product-destroy', $product->id) }}"
                                                        method="post">
                                                        @csrf
                                                        <button
                                                            onclick="return window.confirm('Are you want to delete this Product')"
                                                            class="btn btn-link" type="submit" style="color: #63616f"><span
                                                                class="fas fa-trash"></span></button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </th>
                                                                            </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="price">
                            <p> Purchase Price Rs: 0</p>
                            <p> Total Price Rs: 0</p>
                        </div>

                    </div>
                </div>
            </div>
        </main>
    </div>
    <script>
        @if (Session::has('message'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.success("{{ session('message') }}");
        @endif

        @if (Session::has('error'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.error("{{ session('error') }}");
        @endif

        @if (Session::has('info'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.info("{{ session('info') }}");
        @endif

        @if (Session::has('warning'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.warning("{{ session('warning') }}");
        @endif
    </script>
@endsection