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

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

            <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>
                        Scan Products
                    </h1>
                    <div class="input-group mt-2 position-relative">
                        <input type="search" id="search-product-box" class="form-control form-control-lg"
                               placeholder="Enter style code or GTIN" autocomplete="off"
                               style="font-family: 'Gotham-Book'; font-size: 0.9rem;">
                        <input type="hidden" id="wall_list_id" value="{{ $wall_list_id }}">
                        <input type="hidden" id="wall_serial" value="{{ $wall_serial }}">
                        <div class="input-group-append">
                            <button type="button" id="search-btn" class="btn btn-lg btn-default">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-2" id="search-suggestions" style="font-family: 'Gotham-Book';"></div>
                </div>
            </div>

            <!-- Product list container -->
            <div id="search-product-result"style="margin-top: .8rem; overflow-y: auto; padding-bottom: 140px;">
                @if(isset($products) && count($products) > 0)
                    @foreach($products as $product)
                        <div class="card pt-1 pl-2 border border-dark mt-1 mb-0 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"
                                 data-upc="{{ $product->upc ?? '' }}">
                                <div class="pt-1 pb-1">
                                    <div>
                                        <span class="badge badge-primary text-white" style="background-color:#000 !important;">
                                            {{ $product->style_id }}
                                        </span>
                                        <span class="badge badge-primary text-white ml-2">
                                            {{ $product->allocated_meter }}m
                                        </span>
                                        <div class="mt-0">
                                            <small class="text-dark pl-1">{{ $product->generic_article_description }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" class="btn btn-sm btn-danger mr-2 mb-4 delete-product-btn"
                                            data-id="{{ $product->id }}" onclick="deleteProduct({{ $product->id }})">
                                        <i class="fa fa-trash text-white"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="d-flex flex-column justify-content-center align-items-center" style="min-height: 50vh;">
                        <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>
    </section>

    <!-- Footer -->
    <footer class="card-footer 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 pl-1 pr-1 mb-2">
            <span id="selected-product-count" style="font-family: 'Gotham-Medium';">
                Products: {{ count($products) }}
            </span>
            <span id="wall-meter" style="font-family: 'Gotham-Medium';">
               Wall: {{ $wall->wall_meter }}m
            </span>
        </div>
        <div class="d-flex justify-content-between w-100">
            <a href="javascript:history.back()" class="btn btn-secondary w-50 mr-1">Cancel</a>
            <a href="{{ route('wall.sales.scanned.product', ['wall_list_id' => $wall_list_id]) }}" 
               class="btn btn-primary w-50 ml-1 text-white">Confirm Selection</a>
        </div>
    </footer>
</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-product.js') }}"></script>
    <script>window.initialProducts = @json($products ?? []);</script>
@endsection