@if ($product->serialized_product == 1)
    <div class="row mb-2">
        <div class="col-md-8"></div>
        <div class="col-md-4">
            <input type="search" class="form-control" placeholder="Scan.." id="search_{{ $index }}" autocomplete="off" onchange="selectSerial(this.value, {{ $index }})" autofocus>
        </div>
    </div>
@endif
@if (count($product->colorChild) > 0)
    <div class="row">
        <div class="col-md-3 text-center">
            <label for="size"><b>{{__('obs.size')}}</b></label>
        </div>
        <div class="col-md-3 text-center">
            <label for="size"><b>{{__('obs.color')}}</b></label>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-2 text-center">
            <label for="quantity"><b>{{__('obs.quantity')}}</b></label>
        </div>
        @if ($product->serialized_product != 1)
            <div class="col-md-2 text-center">
                <label for="quantity"><b>{{__('obs.avail_qty')}}</b></label>
            </div>
        @endif
    </div>
@elseif (count($product->sizeChild) > 0)
    <div class="row">
        <div class="col-md-4 text-center">
            <label for="size"><b>{{__('obs.size')}}</b></label>
        </div>
        <div class="col-md-4 text-center">
            <label for="quantity"><b>{{__('obs.quantity')}}</b></label>
        </div>
        @if ($product->serialized_product != 1)
            <div class="col-md-4 text-center">
                <label for="quantity"><b>{{__('obs.avail_qty')}}</b></label>
            </div>
        @endif
    </div>
@else
    @if ($product->serialized_product != 1)
        <div class="row">
            <div class="col-md-2 text-center">
                <label for="quantity"><b>{{__('obs.quantity')}}</b></label>
            </div>
            <div class="col-md-2 text-center">
                <label for="quantity"><b>{{__('obs.avail_qty')}}</b></label>
            </div>
        </div>
    @else
        <div class="row">
            <div class="col-md-3 text-center">
                <label for="quantity"><b>{{__('obs.quantity')}}</b></label>
            </div>
        </div>
    @endif
@endif
@if ($product->size_id > 0)
    @php
        $size_len = count($size);
        $skey = 0;
    @endphp
    @foreach($grpBySize as $size_id => $szs)
        @php
            $index_i = $index.$i;
            $sz = $size->where('id', $size_id)->first();
            $ckey = 0;
            $color = $szs->pluck('color')->unique('id')->flatten(1);
            $clr_len = count($color);
            $clr_center = intval($clr_len/2);
        @endphp
        @if ($product->color_id > 0)
            @foreach($color as $clr)
                @php
                    $index_j = $index.$j;
                    $css = $item->colorSizeSerial->where('color_id', $clr->id)->where('size_id', $sz->id);
                @endphp
                <div class="row d-flex align-items-center" style="padding-top: {{ ($ckey > 0 ? '10px' : '0px') }};">
                    <div class="col-md-4 text-center">
                        <input type="text" style="display: none" value="{{ $sz->id }}" name="size{{ $index }}[]" id="size{{ $index_i }}" class="form-control">
                        <label for="size"  style="display: {{ ($ckey++ == $clr_center ? '' : 'none') }}" class="p-1 px-2 border border-success rounded-circle" >{{ $sz->name }}</label>
                    </div>
                    <div class="col-md-4 text-center d-flex">
                        <input type="text" style="display: none" value="{{ $clr->id }}" name="color{{ $index }}[]" id="color{{ $index_j }}" class="form-control">
                        <div class="justify-content-center d-flex">
                        <h6 class="badge badge-pill mr-2" style="background-color: {{ strtolower($clr->name) }}; height: 8px; width: 8px; margin-top: auto">&nbsp</h6>
                        <label for="color">{{ $clr->name }}</label>
                    </div>
                </div>
                @if ($product->serialized_product == 1)
                    <div class="col-md-4">
                        <input type="number" readonly value="{{ $css->sum('quantity') }}" min="0" id="quantity{{ $index_j }}" name="quantity{{ $index }}[]" class="form-control addQty{{ $index }}">
                    </div>
                @else
                    @php
                        $qty = $css->sum('quantity');
                        $avail = $qty + colorSizeSerialStock($product->storeSerial->where('size_id', $size_id)->where('color_id', $clr->id), $index_j, $product->serialized_product, $index);
                    @endphp
                    <div class="col-md-2">
                        <input type="hidden" name="tran{{ $index }}[]" value="{{ $css->first()->id??0 }}">
                        <input type="number" step=".01" value="{{ $qty }}" min="0" max="{{ $avail }}" id="quantity{{ $index_j }}" name="quantity{{ $index }}[]" onkeyup="this.value<0?this.value=0:checkColorSizeQty({{ $index }}, {{ $j }}, this.value)" class="form-control compare_qty{{ $index }} addQty{{ $index }}" row_id="{{ $index.$clr->id.$size_id }}">
                    </div>
                    <div class="col-md-2">
                        <input type="number" class="form-control compare_qty{{ $index }}" id="avail{{ $index_j }}" disabled value="{{ $avail }}">
                    </div>
                @endif
                </div>
                @if ($product->serialized_product == 1)
                    <div class="row mt-3 p-2" id="div_q{{ $index_j }}" {{--  style="border: 1px ; border-radius: 5px; background-color: #eae4e4" --}}>
                        @forelse ($item->colorSizeSerial->where('color_id', $clr->id)->where('size_id', $sz->id) as $sl)
                            @php
                                $vl = preg_replace('/[^A-Za-z0-9\-]/', '', $sl->serial_no);
                            @endphp
                            <div class="col-md-{{ ($item->product->manufacture_code == 1 ? 6 : 3) }} d-flex rounded py-1 mt-2" id="div_{{ $index_j }}_{{$vl}}">
                                <div class="card mb-0">
                                    <div class="row">
                                        <div class="col-{{ ($item->product->manufacture_code == 1 ? 5 : 11) }} pr-0">
                                            <input type="hidden" name="tran{{ $index_j }}[]" value="{{ $sl->id }}">
                                            <input type="checkbox" name="" id="" class="serial{{ $index_j }} d-none" checked>
                                            <input type="text" {{ $sl->serial_count <= 1 ? '' : 'readonly' }} title="Serial" value="{{ $sl->serial_no }}" placeholder="Enter Serial" class="form-control {{ $type == 2 ? '' : 'check_duplicate'.$index_j }}" required id="sl_{{$vl}}" name="serial{{ $index_j }}[]"/>
                                        </div>
                                        @if ($item->product->manufacture_code == 1)
                                            <div class="col-6">
                                                <input type="text" value=" " title="Manufacture Code" placeholder="Enter Manufacture Code" class="form-control" required name="m_code{{ $index_j }}[]"/>
                                            </div>
                                        @endif
                                        @if ($sl->serial_count <= 1 || ($type == 2 && ($sl->serial_count%2) == 0) || ($item->transaction_type == 4 && ($sl->serial_count%2) == 1))
                                            <a class="text-danger d-flex m-auto col-1 px-0"> <i class="far fa-times-circle" onclick="deleteSerial('{{ $index_j }}', '{{$vl}}', 1, {{ $sl->id }}, {{ $type }})"></i> </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                        @endforelse
                        <div class="col-md-12">
                            <div class="row justify-content-center" style="border: 1px ; border-radius: 5px; background-color: #eae4e4">
                                {!! colorSizeSerialStock($product->storeSerial->where('size_id', $size_id)->where('color_id', $clr->id), $index_j, $product->serialized_product, $index) !!}
                            </div>
                        </div>
                    </div>
                @endif
                @php
                    $j++;
                @endphp
            @endforeach
        @else
            @php
                $ss = $item->colorSizeSerial->where('size_id', $sz->id);
                $qty = $ss->sum('quantity');
            @endphp
            <div class="row d-flex align-items-center pt-0" style="padding-top: 10px">
                <div class="col-md-4 text-center">
                    <input type="text" style="display: none" value="{{ $sz->id }}" name="size{{ $index }}[]" id="size{{ $index_i }}" class="form-control">
                    <label for="size" class="p-1 px-2" style="border: 1px solid green;border-radius: 20px">{{ $sz->name }}</label>
                </div>
            @if ($product->serialized_product == 1)
                <div class="col-md-4 text-center">
                    <input type="number" readonly value="{{ $qty }}" min="0" id="quantity{{ $index_i }}" name="quantity{{ $index }}[]" class="form-control addQty{{ $index }}">
                </div>
            @else
                @php
                    $avail = $qty + colorSizeSerialStock($product->storeSerial->where('size_id', $size_id), $index_i, $product->serialized_product, $index);
                @endphp
                <div class="col-md-4 text-center">
                    <input type="hidden" name="tran{{ $index }}[]" value="{{ $ss->first()->id??0 }}">
                    <input type="number" step=".01" value="{{ $qty }}" min="0" max="{{ $avail }}" id="quantity{{ $index_i }}" name="quantity{{ $index }}[]" onkeyup="this.value<0?this.value=0:checkColorSizeQty({{ $index }}, {{ $i }}, this.value)" class="form-control compare_qty{{ $index }} addQty{{ $index }}" row_id="{{ $index.$size_id }}">
                </div>
                <div class="col-md-4 text-center">
                    <input type="number" class="form-control compare_qty{{ $index }}" id="avail{{ $index_i }}" disabled value="{{ $avail }}">
                </div>
            @endif
            </div>
            @if ($product->serialized_product == 1)
                <div class="row mt-3 p-2" id="div_q{{ $index_i }}"{{--  style="border: 1px ; border-radius: 5px; background-color: #eae4e4" --}}>
                    @forelse ($item->colorSizeSerial->where('size_id', $sz->id) as $sl)
                        @php
                            $vl = preg_replace('/[^A-Za-z0-9\-]/', '', $sl->serial_no);
                        @endphp
                        <div class="col-md-{{ ($item->product->manufacture_code == 1 ? 6 : 3) }} d-flex rounded py-1 mt-2" id="div_{{ $index_i }}_{{$vl}}">
                            <div class="card mb-0">
                                <div class="row">
                                    <div class="col-{{ ($item->product->manufacture_code == 1 ? 5 : 11) }} pr-0">
                                        <input type="hidden" name="tran{{ $index_i }}[]" value="{{ $sl->id }}">
                                        <input type="checkbox" name="" id="" class="serial{{ $index_i }} d-none" checked>
                                        <input type="text" {{ $sl->serial_count <= 1 ? '' : 'readonly' }} title="Serial" value="{{ $sl->serial_no }}" placeholder="Enter Serial" class="form-control {{ $type == 2 ? '' : 'check_duplicate'.$index_i }}" required id="sl_{{$vl}}" name="serial{{ $index_i }}[]"/>
                                    </div>
                                    @if ($item->product->manufacture_code == 1)
                                        <div class="col-6">
                                            <input type="text" value=" " title="Manufacture Code" placeholder="Enter Manufacture Code" class="form-control" required name="m_code{{ $index_i }}[]"/>
                                        </div>
                                    @endif
                                    @if ($sl->serial_count <= 1 || ($type == 2 && ($sl->serial_count%2) == 0) || ($item->transaction_type == 4 && ($sl->serial_count%2) == 1))
                                        <a class="text-danger d-flex m-auto col-1 px-0"> <i class="far fa-times-circle" onclick="deleteSerial('{{ $index_i }}', '{{$vl}}', 1, {{ $sl->id }}, {{ $type }})"></i> </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                    @endforelse
                    <div class="col-md-12">
                        <div class="row justify-content-center" style="border: 1px ; border-radius: 5px; background-color: #eae4e4">
                            {!! colorSizeSerialStock($product->storeSerial->where('size_id', $size_id), $index_i, $product->serialized_product, $index) !!}
                        </div>
                    </div>
                </div>
            @endif
        @endif
        @php
            $i++;
        @endphp
        @if($skey++ < ($size_len-1))
            <hr style="border: 1px dashed black;">
        @endif
    @endforeach
@else
    <div class="row d-flex align-items-center pt-0" style="padding-top: 10px">
        <div class="col-md-4">
            <input type="number" value="{{ $item->colorSizeSerial->count() }}" min="0" id="quantity{{ $index_i }}" name="quantity{{ $index }}[]" readonly class="form-control addQty{{ $index }}">
        </div>
    </div>
    <div class="row mt-3 p-2 justify-" id="div_q{{ $index_i }}" {{-- style="border: 1px ; border-radius: 5px; background-color: #eae4e4" --}}>
        @forelse ($item->colorSizeSerial as $sl)
            @php($vl = preg_replace('/[^A-Za-z0-9\-]/', '', $sl->serial_no))
            <div class="col-md-{{ ($item->product->manufacture_code == 1 ? 6 : 3) }} d-flex rounded py-1 mt-2" id="div_{{$index}}1_{{$vl}}">
                <div class="card mb-0">
                    <div class="row">
                        <div class="col-{{ ($item->product->manufacture_code == 1 ? 5 : 11) }} pr-0">
                            <input type="hidden" name="tran{{ $index_i }}[]" value="{{ $sl->id }}">
                            <input type="checkbox" name="" id="" class="serial{{ $index_i }} d-none" checked>
                            <input type="text" {{ $sl->serial_count <= 1 ? '' : 'readonly' }} title="Serial" value="{{ $sl->serial_no }}" placeholder="Enter Serial" class="form-control {{ $type == 2 ? '' : 'check_duplicate'.$index_i }}" required id="sl_{{$vl}}" name="serial{{ $index_i }}[]"/>
                        </div>
                        @if ($item->product->manufacture_code == 1)
                            <div class="col-6">
                                <input type="text" value=" " title="Manufacture Code" placeholder="Enter Manufacture Code" class="form-control" required name="m_code{{ $index_i }}[]"/>
                            </div>
                        @endif
                        @if ($sl->serial_count <= 1 || ($type == 2 && ($sl->serial_count%2) == 0) || ($item->transaction_type == 4 && ($sl->serial_count%2) == 1))
                            <a class="text-danger d-flex m-auto col-1 px-0"> <i class="far fa-times-circle" onclick="deleteSerial('{{$index}}1', '{{$vl}}', 1, {{ $sl->id }}, {{ $type }})"></i> </a>
                        @endif
                    </div>
                </div>
            </div>
        @empty
        @endforelse
        
        <div class="col-md-12">
            <div class="row justify-content-center" style="border: 1px ; border-radius: 5px; background-color: #eae4e4">
                {!! colorSizeSerialStock($product->storeSerial->unique('serial_no'), $index_i, $product->serialized_product, $index) !!}
            </div>
        </div>
    </div>
@endif