@extends('admin.layouts.layouts')

@section('title', 'Details | Product Inventory')

@section('page-css')
    <style>
        .table .text-center {
            text-align: center !important;
        }

        .custom-table th {
            width: 45%;
            padding: 0.3500rem;
        }

        .custom-table td {
            width: 55%;
            padding: 0.3500rem;
        }

        .table .header-title {
            background: #392c70;
            color: #fff;
        }

        .table td img {
            width: 100px;
            height: auto;
            border-radius: 0;
        }

        .gallery-img {
            cursor: pointer;
        }

        .custom-table .fa-download {
            color: #392c70;
        }

        .custom-btn {
            font-size: 13px;
            padding: 4px 6px;
        }

        .custom-btn i {
            font-size: 13px;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Product Inventory
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('product-inventory.index') }}">Product Inventory</a></li>
                <li class="breadcrumb-item active" aria-current="page">Details</li>
            </ol>
        </nav>
    </div>
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Product Inventory Details</h5>
                <a href="{{ route('product-inventory.index') }}" class="btn btn-primary btn-sm">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>

            <div class="card-body bg-white">
                <div class="row">
                    <div class="col-md-12 mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered custom-table">
                                <tbody>
                                    <tr class="header-title">
                                        <th colspan="2">Basic Details</th>
                                    </tr>
                                    <tr>
                                        <th>ID:</th>
                                        <td>{{ $showDetails->id ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Date:</th>
                                        <td>{{ $showDetails->date ? date('d-m-Y', strtotime($showDetails->date)) : '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Vendor:</th>
                                        <td>{{ $showDetails->vendor->name ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Vehicle Number:</th>
                                        <td>{{ $showDetails->vehicle_number ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Invoice Number:</th>
                                        <td>{{ $showDetails->invoice_number ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>GST Percentage:</th>
                                        <td>{{ $showDetails->gst_percentage ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Gross Total Amount:</th>
                                        <td>{{ $showDetails->gross_amount ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Extra Benifit:</th>
                                        <td>{{ $showDetails->extra_benifit ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Extra Charge:</th>
                                        <td>{{ $showDetails->extra_charge ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Grand Total:</th>
                                        <td>{{ $showDetails->grand_total ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>CGST Amount:</th>
                                        <td>{{ $showDetails->cgst_amount ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>SGST Amount:</th>
                                        <td>{{ $showDetails->sgst_amount ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Net Total Amount:</th>
                                        <td>{{ $showDetails->net_total ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Created By:</th>
                                        <td>{{ $showDetails->createdBy->name ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Created At:</th>
                                        <td>{{ $showDetails->created_at->format('d-m-Y h:i A') ?? '' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Product Inventory Items --}}
                    @if (isset($showDetails->productInventoryItems) && count($showDetails->productInventoryItems) > 0)
                        <div class="col-md-12 mt-4">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="header-title">
                                            <th colspan="7">Product Inventory Items</th>
                                        </tr>
                                        <tr>
                                            <th style="width: 5%;">#</th>
                                            <th style="width: 23%;">Product</th>
                                            <th style="width: 10%;">Quantity</th>
                                            <th style="width: 10%;">Amount</th>
                                            <th style="width: 15%;">Buy Price</th>
                                            <th style="width: 15%;">Tax</th>
                                            <th style="width: 14%;">Created Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($showDetails->productInventoryItems as $productInventoryItem)
                                            @php

                                            @endphp
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $productInventoryItem->product->name ?? '' }}</td>
                                                <td>{{ $productInventoryItem->quantity ?? '' }}</td>
                                                <td>{{ $productInventoryItem->amount ?? '' }}</td>
                                                <td>{{ $productInventoryItem->buy_price ?? '' }}</td>
                                                <td>{{ $productInventoryItem->tax ?? '' }}</td>
                                                <td>{{ $productInventoryItem->created_at->format('d-m-Y') ?? '' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div id="imageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img src="" id="modalImage" class="img-fluid" alt="Image Preview">
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script type="text/javascript">
        $(document).ready(function() {
            const $modal = $("#imageModal");
            const $modalImg = $("#modalImage");
            const $galleryImages = $(".gallery-img");

            // When image is clicked
            $galleryImages.on('click', function() {
                $modal.modal('show');
                $modalImg.attr('src', $(this).attr('src'));
            });

            // Reset modal image on close
            $modal.on('hidden.bs.modal', function() {
                $modalImg.attr('src', '');
            });
        });
    </script>
@endsection