@extends('layout.layout')
@section('reporting','active')
@section('content')

<section class="content">
    <section class="content-header">
        <div class="container-fluid">

            <!-- Subtitle -->
            <div class="row mb-2 mt-3">
                <div class="col-sm-12 pl-3 pr-3">
                    <h1 class="text-ultra">
                        <a href="javascript:history.back()" id="arrow-right">
                            <i class="fas fa-angle-left mr-2"></i>
                        </a>
                        Scanned Product
                    </h1>
                </div>
            </div>

            <!-- Product list container -->
            <div id="search-product-result" style="margin-top: 1rem; overflow-y: auto; padding-bottom: 140px;">
                @if(isset($products) && count($products) > 0)
                    @foreach($products->unique('style_id') as $product)
                        <div class="card pt-1 pl-2 border border-dark mb-0 mt-1 ml-2 mr-2"
                             style="border-radius: 5px; font-family: 'Gotham-Book';" 
                             id="product-{{ $product->style_id }}">
                            <div class="d-flex align-items-center justify-content-between w-100">
                                <div class="pt-1 pb-1 flex-fill">
                                    <div class="d-flex">
                                        <span class="badge badge-primary text-white" style="background-color:#000 !important;">
                                            {{ $product->style_id }}
                                        </span>
                                        <span class="badge badge-success text-white ml-2" id="product-{{ $product->style_id }}-qty">
                                            qty: {{ $products->where('style_id', $product->style_id)->count() }}
                                        </span>
                                        {{-- <span class="badge badge-primary text-white ml-auto mr-2">
                                             {{ number_format((float) $allocatedMeters[$product->style_id], 2, '.', '') }}m
                                        </span> --}}
                                        <span class="badge badge-primary text-white ml-auto mr-2">
                                            {{ number_format((float) ($allocatedMeters[$product->style_id] ?? 0), 2, '.', '') }}m
                                        </span>
                                    </div>
                                    <div class="mt-0">
                                        <small class="text-dark pl-1">{{ $product->generic_article_description }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="d-flex flex-column justify-content-center align-items-center" 
                         style="min-height: 60vh; margin-top: 2rem;">
                        <div class="mb-4">
                            <i class="fas fa-qrcode" style="font-size: 7rem; color: #6c757d;"></i>
                        </div>
                        <div class="text-center">
                            <p class="mb-2" style="font-family: 'Gotham-Medium'; font-size: 1.2rem;">Ready to Scan</p>
                            <p class="mb-0" style="font-family: 'Gotham-Book'; color: #6c757d;">
                                Scan or search manually to add products
                            </p>
                        </div>
                    </div>
                @endif
            </div>

        </div>
        @if($isSubmitted)
            <footer class="card-footer mt-5 bg-white" 
                    style="position: fixed; bottom: 0; width: 100%; font-family: 'Gotham-Book';">
                <div class="d-flex justify-content-between w-100">
                    <a href="{{ route('wall.sales.wall.information', ['wall_list_id' => $wall_list_id]) }}" 
                    class="btn btn-light w-100">Close</a>
                </div>
            </footer>
        @else
            <footer class="card-footer mt-5 p-2 bg-white" 
                    style="position: fixed; bottom: 0; width: 100%; z-index: 1000; font-family: 'Gotham-Book';">
                <div class="d-flex justify-content-between w-100">
                    <a href="{{ route('wall.sales.scan.product', ['wall_list_id' => $wall_list_id]) }}" 
                    class="btn btn-secondary w-100 mr-2">Edit Wall</a>
                    <button type="button" class="btn btn-danger w-100" onclick="resetWall()">Reset Wall</button>
                </div>
            </footer>
        @endif
    </section>
</section>

@endsection

@section('javascript')
    {{-- <script>window.wallSerial = "{{ $wall_serial }}"; </script> --}}
    <script>window.wallListId = "{{ $wall_list_id }}"; </script>
    <script>window.wallSalesSearchUrl = "{{ route('wall.sales.search.product', ['wall_list_id' => $wall_list_id]) }}";</script>
    <script>window.wallSalesAddProductUrl = "{{ route('wall.sales.add.product', ['wall_list_id' => $wall_list_id]) }}";</script>
    <script src="{{ asset('js/wall-sales-report.js') }}"></script>
@endsection