@extends('layouts.app')

@section('contents')
{{-- @dd($product->productColors->first()->productSizes->get('id')) --}}

    <link rel="stylesheet" href="{{ asset('css/jquery-ui-autocomplete.css')}}">
    <style>
        .color-item{
            height: 50px; list-style-type: none; float: left; flex: 100%; margin-right: 10px
        }
        .checkbox{
            -ms-transform: scale(2); /* IE */
            -moz-transform: scale(2); /* FF */
            -webkit-transform: scale(2); /* Safari and Chrome */
            -o-transform: scale(2); /* Opera */
            padding: 10px;
        }
        .checkbox-label{
            padding-left:15px; width:125px; margin-top:-4px; font-size: 12px; vertical-align: middle; padding-right: 5px;
        }
        .form-check{
            padding: 5px;
        }
        .checkbox-vendor{
            padding-left: 30px;
            padding-right: 10px;
        }
        .vendor-sanmar{
            background: rgb(230, 123, 123);
            color: #000;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px
        }
        .vendor-alpha{
            background: rgb(137, 247, 137);
            color: #000;
        }
        .vendor-ssactive{
            background: rgb(136, 196, 249);
            color: #000;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px
        }
        .prefered-warehouse{
            background: #c4c4c4;
            color: #000;
            border-radius: 5px;
        }
        caption{
            caption-side: top;
            text-align: center;
        }
        .table-inventory {
            overflow-x: scroll !important;
        }
        .table-inventory::-webkit-scrollbar {
            margin-top: 20px;
            height: 6px;               /* width of the entire scrollbar */
        }

        .table-inventory::-webkit-scrollbar-track {
            background: #e3e3e3;        /* color of the tracking area */
            border-radius: 20px; 
        }

        .table-inventory::-webkit-scrollbar-thumb {
            background-color: #38bcbd;    /* color of the scroll thumb */
            border-radius: 20px;       /* roundness of the scroll thumb */
            /* border: 0.5px solid #117dc0;  creates padding around scroll thumb */
        }
        .table-inventory .table th:first-child, td:first-child
        {
            position:sticky;
            left:0px;
            background-color:rgb(205, 231, 252);
        }
        .table-inventory .table th:last-child, td:last-child
        {
            position:sticky;
            right:0px;
            background-color:rgb(249, 213, 213);
        }
    </style>
    <div class="content ">
        <div class="card mb-2 text-center {{ !$search_term ? 'mt10' : '' }}" style="display: {{ !$search_term ? 'block' : 'none' }}" id="search-panel">
            <div class="card-body">
                <h5 class="card-title">MarketSpace</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <div class="ui-widget" style="width: 50%; margin: 0 auto">
                    {{-- <label for="tags"></label> --}}
                    <input id="tags" class="form-control col-5" plaecholder="Enter style / product name" name="style">
                </div>
            </div>
        </div>
        <div class="card mb-4" style="display: {{ $search_term ? 'block' : 'none' }}">
            <div class="card-body">
            <form id="inventory-filter" action="{{ route('product.inventory') }}" action="get">
                @csrf
                <input type="hidden" id="style-id" name="style" value="{{$search_term}}"/>
               {{--  <div class="mb-5 d-flex align-items-center justify-content-between">
                    <p class="fw-bold">Order No : <a href="#">#5355619</a></p>
                    <span class="badge bg-success">Completed</span>
                </div> --}}
                <div class="row mb-5 g-4">
                    <div class="col-md-7 col-sm-12">
                        <h3><a href="javascript:;">{{ $product->style }} </a> {{ $product->mill_name . ' - ' . $product->short_description }} <a id="edit-search" href="javascript:;"><i style="font-size:18px" class="bi bi-pencil-square"></i></a></h3> 
                    </div>
                    <div class="col-md-5 col-sm-12">
                        {{-- <p>Vendors</p> --}}
                        <div class="row">
                            <div class="col-md-4 checkbox-vendor vendor-sanmar">
                                <div class="form-check">
                                    <input class="form-check-input filter" name="platform[]" type="checkbox" value="sanmar" id="sanmar">
                                    <label class="form-check-label" for="sanmar">
                                        Sanmar
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 checkbox-vendor vendor-alpha">
                                <div class="form-check">
                                    <input class="form-check-input filter" name="platform[]" type="checkbox" value="alphabroder" id="alphabroder">
                                    <label class="form-check-label" for="alphabroder">
                                        Alpha Broder
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 checkbox-vendor vendor-ssactive">
                                <div class="form-check">
                                    <input class="form-check-input filter" name="platform[]" type="checkbox" value="ssactive" id="ssactive">
                                    <label class="form-check-label" for="ssactive">
                                        S & S Active
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-2 justify-content-end">
                            <div class="col-auto checkbox-vendor prefered-warehouse">
                                <div class="form-check">
                                    <input class="form-check-input filter"  type="checkbox" value="" id="shippingAddressCheck">
                                    <label class="form-check-label" for="shippingAddressCheck">
                                        Show only preferred warehouse
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <ul>
                        @foreach($productColors as $key => $colors)
                            @php
                                $colorValue = [
                                    'alpha' => '--',
                                    'sanmar' => '--',
                                    'ssactive' => '--'
                                ];
                                foreach($colors as $colorKey => $color){
                                    if($colorKey=='alpha'){
                                        $colorValue['alpha'] = $color->color_code;
                                    }
                                    if($colorKey=='ssactive'){
                                        $colorValue['ssactive'] = $color->color_code;
                                    }
                                    if($colorKey=='sanmar'){
                                        $colorValue['sanmar'] = $color->id;
                                    }
                                }
                                $color_codes = implode("_",$colorValue);
                            @endphp
                            <li class="color-item">
                                <input class="form-check-input checkbox filter" name="color[]"  type="checkbox" style="background-color: {{ $key }};" {{ $loop->first ? 'checked' : ''}}  id="color-code-{{ $color_codes }}" value="{{ $color_codes }}">
                                <label class="form-check-label checkbox-label" for="color-code-{{ $color_codes }}">{{ $colors[key($colors)]['color_name'] }}</label>
                            </li>
                        @endforeach
                    </ul>
                </div>
               </form>
                @php 
                    // $selected_color = $productColors[key($colors)];
                    $product_sizes = $productSizes;
                @endphp
                <div class="row" id="inventory-section">
                
                    <div class="col-auto">
                        <div class="">
                            <table id="orders" class="table">
                                <caption>A</caption>
                                <thead>
                                    <tr>
                                        <th>Size</th>
                                    </tr>
                                </thead>
                                @foreach($product_sizes as $product_size)
                                <tr>
                                    <th>{{ $product_size }}</th>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                   
                    @php
                        $titles = [];
                        $processed_inventory = [];
                        $all_inventory = $sanmarProducts->transform(function($item){
                            return Arr::except($item, ['id','style','inventory_key','piece_weight','dozen_price','case_price','case_size','size_index','MSRP','created_at','updated_at','size','unique_key','gtin','color_id']);
                        });
                        $inventories = array_map('array_filter', $all_inventory->toArray());
                        foreach($inventories as $inventory){
                            $titles=array_merge($titles,array_keys($inventory));
                        }
                        $titles=array_unique($titles,SORT_REGULAR);

                        $price_index = array_search ('piece_price', $titles);
                        $price = array_splice($titles, $price_index, 1);
                        array_splice($titles, 0, 0, $price);

                        foreach($inventories as $key=> $inventory){
                            
                            foreach($titles as $table_title){
                                $processed_inventory[$key][$table_title] = isset($inventory[$table_title]) ? $inventory[$table_title]:'0';  
                            }
                        }
                    @endphp
                    <div class="col" style="width: 100%">
                        <div class="table-inventory" style="overflow-x: scroll">
                            <table id="orders" class="table">
                                <caption  class="vendor-sanmar">SanMar</caption>
                                <thead>
                                   
                                    <tr>
                                        @foreach($titles as $table_title)
                                        <th>{{ $table_title=='piece_price' ? 'Price' : $table_title }}</th>
                                        @endforeach
                                        <th>TOTAL</th>
                                    </tr>
                                    
                                </thead>
                                @foreach($processed_inventory as $inventory)
                                <tr>
                                    @php $total = 0; @endphp
                                    @foreach($inventory as $key => $warehouse)
                                    @php 
                                        if($key!='piece_price'){
                                            $total = $total + $warehouse;
                                        }
                                    @endphp
                                    <td>{{ $key=="piece_price" ? number_format($warehouse,2) : $warehouse }}</td>
                                    @endforeach
                                    <td>{{$total}}</td>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                    @php
                        $titles = [];
                        $processed_inventory = [];
                        $all_inventory = $alphaProducts->transform(function($item){
                            return Arr::except($item, ['id','vendor_id','item_no','style','size_code','size','gtin','sort_order','dozen_price','case_price','retail_price','case_qty','created_at','updated_at','color_code']);
                        });
                        $inventories = array_map('array_filter', $all_inventory->toArray());
                        foreach($inventories as $inventory){
                            $titles=array_merge($titles,array_keys($inventory));
                        }
                        $titles=array_unique($titles,SORT_REGULAR);

                        $price_index = array_search ('piece_price', $titles);
                        $price = array_splice($titles, $price_index, 1);
                        array_splice($titles, 0, 0, $price);

                        foreach($inventories as $key=> $inventory){
                            
                            foreach($titles as $table_title){
                                $processed_inventory[$key][$table_title] = isset($inventory[$table_title]) ? $inventory[$table_title]:'0';  
                            }
                        }
                    @endphp
                    <div class="col" style="width: 100%">
                        <div class="table-inventory" style="overflow-x: scroll">
                            <table id="orders" class="table">
                                <caption  class="vendor-alpha">Alpha Broder</caption>
                                <thead>
                                   
                                    <tr>
                                        @foreach($titles as $table_title)
                                        <th>{{ $table_title=='piece_price' ? 'Price' : $table_title }}</th>
                                        @endforeach
                                        <th>TOTAL</th>
                                    </tr>
                                    
                                </thead>
                                @foreach($processed_inventory as $inventory)
                                <tr>
                                    @php $total = 0; @endphp
                                    @foreach($inventory as $key => $warehouse)
                                    @php 
                                        if($key!='piece_price'){
                                            $total = $total + $warehouse;
                                        }
                                    @endphp
                                    <td>{{ $key=="piece_price" ? number_format($warehouse,2) : $warehouse }}</td>
                                    @endforeach
                                    <td>{{$total}}</td>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                        @php
                        $titles = [];
                        $processed_inventory = [];
                        $all_inventory = $ssactiveProducts->transform(function($item){
                            return Arr::except($item, ['id','vendor_id','item_no','style','size_code','size','gtin','sort_order','dozen_price','case_price','retail_price','case_qty','created_at','updated_at','color_code']);
                        });
                        $inventories = array_map('array_filter', $all_inventory->toArray());
                        foreach($inventories as $inventory){
                            $titles=array_merge($titles,array_keys($inventory));
                        }
                        $titles=array_unique($titles,SORT_REGULAR);

                        $price_index = array_search ('piece_price', $titles);
                        $price = array_splice($titles, $price_index, 1);
                        array_splice($titles, 0, 0, $price);

                        foreach($inventories as $key=> $inventory){
                            
                            foreach($titles as $table_title ){
                                $processed_inventory[$key][$table_title ] = isset($inventory[$table_title    ]) ? $inventory[$table_title    ]:'0';  
                            }
                        }
                    @endphp
                    <div class="col" style="width: 100%">
                        <div class="table-inventory" style="overflow-x: scroll">
                            <table id="orders" class="table">
                                <caption  class="vendor-ssactive">S & S Active</caption>
                                <thead>
                                    <tr>
                                        @foreach($titles as $table_title    )
                                        <th>{{ $table_title =='piece_price' ? 'Price' : $table_title  }}</th>
                                        @endforeach
                                        <th>TOTAL</th>
                                    </tr>
                                    
                                </thead>
                                @foreach($processed_inventory as $inventory)
                                <tr>
                                    @php $total = 0; @endphp
                                    @foreach($inventory as $key => $warehouse)
                                    @php 
                                        if($key!='piece_price'){
                                            $total = $total + $warehouse;
                                        }
                                    @endphp
                                    <td>{{ $key=="piece_price" ? number_format($warehouse,2) : $warehouse }}</td>
                                    @endforeach
                                    <td>{{$total}}</td>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
               
                    
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')

<script>
    function filter($this){

        $('[name="color[]"]:checked').not($this).prop('checked', false);
        form=$('#inventory-filter').serialize();   
        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, 
            // processData: false,  
            // contentType: false,  
            type: 'GET',
            dataType : 'JSON', 
            url : '{{route("product.inventory")}}',
            data : form,
            beforeSend: function() {
                $('#inventory-section').html('<div class="d-flex justify-content-center"><div class="spinner-border " role="status"></div></div>').fadeIn('10000');
            },
            success: function(response){ 
                $('#inventory-section').html(response.contentHtml).fadeIn('10000');
            },
            error: function (request, status, error) {
            
            }
        });
    }
    $(document).ready( function () {
        $('.filter').on('click',function(){
            filter(this);
        });

        $('#edit-search').on('click', function(){
            if($('#search-panel').is(':visible')){
                $('#search-panel').hide();
            } else {
                $('#search-panel').show();
            }
        })
    });
</script>

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(function () {
        $("#tags").autocomplete({
            minLength: 2,
            source : function( request, response ) {
                $.ajax({
                    url: "{{route('searchStyle')}}",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    success: function (data) {
                        response( data );
                        console.log(data);
                    }
                });
            },
            focus: function (event, ui) {
                $("#tags").val(ui.item.name);
                return false;
            },
            select: function (event, ui) {
                $("#tags").val(ui.item.name);
                $("#style-id").val(ui.item.id);
                $('[name="color[]"]:checked').prop('checked', false);
                $('#inventory-filter').submit();
                return false;
            }
        })
            .data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li>")
                    .data("ui-autocomplete-item", item)
                    .append("<a> " + item.name + "</a>")
                    .appendTo(ul);
            };
    });
</script>

@endpush