@extends('app')
@section('content')
<div class="content-page">
    <div class="content">
        
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Tasks</a></li>
                            <li class="breadcrumb-item active">Group Product</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Group Product 
                        
                </div>
            </div>
        </div>     
      {{-- Start table --}}
      <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-sm-4">
                            <a href="{{route('setproduct.create')}}" class="btn btn-success btn-sm "><i class="mdi mdi-plus-circle me-2"></i>Add Product Name</a></h4>
                        </div> 
                    </div>
                    @if(Session::has('response'))
                        {!!Session::get('response')['message']!!}
                    @endif
                 {{-- {{$groupProducts->product_support}} --}}

                    <table id="state-saving-dKanban Board
                    Kanban Boardatatable" class="table activate-select dt-responsive nowrap">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Product Set Name</th>
                                <th>Product</th>
                                <th>discount</th>
                                <th>Regular Rate</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Action</th> 
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($groupProducts as $gp)
                            @php $total = 0; @endphp
                            <tr>
                                <td>{{++$loop->index}}</td>
                                <td>{{$gp->group_product_name}}</td>
                                <td class="table-user">
                                    
                                    @forelse ($gp->product_support as $item)
                                    @php                              
                                    $total = $total + $item->product->rate;
                                    if($loop->index % 2 === 0){
                                        @endphp
                                        <span 
                                          class="badge fs-5 bg-primary rounded-pill"
                                          >{{$item->product->product_name}}</span>
                                        @php
                                              }elseif ($loop->index % 3 === 0) {
                                        @endphp
                                            <span 
                                          class="badge fs-5 bg-secondary text-light rounded-pill"
                                          >{{$item->product->product_name}}</span>   
                                        @php   }else{
                                            @endphp
                                             <span 
                                          class="badge fs-5 bg-success rounded-pill"
                                          >{{$item->product->product_name}}</span>
                                            @php
                                        }
                                        @endphp
                                         
                                    @empty
                                        <p>No data</p>
                                    @endforelse
                                </td>
                                <td>
                                     {{$gp->discount}} 
                                </td>
                                <td>
                                     {{$total}}
                                </td>
                                <td>
                                     {{$gp->total}} 
                                </td>
                                <td>
                                    <div>
                                        <input type="checkbox" id="switch29" checked data-switch="success" />
                                        <label for="switch29" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                    </div>
                                </td>
                                <td class="table-action d-flex">
                                    <button type="button" 
                                    class="action-icon btn btn-sm" onclick="updateGP({{$gp}})">  
                                        <i class="mdi mdi-pencil"></i>
                                    </button>
                                    <form method="POST" action="{{route('setproduct.destroy',$gp->id)}}">
                                        @csrf
                                        @method('delete')
                                        <button type="submit" class="btn btn-sm p-0"><i class="mdi mdi-delete"></i></button>
                                    </form>
                                </td>
                                <tr class="d-none editForm_{{$gp->id}}">
                                    <td colspan="8">
                                        <form class="p-2" method="POST" action="{{route('setproduct.update',encrypt($gp->id))}}">
                                            @csrf
                                            @method('patch')
                                            
                                                <div class="row">
                                                    <div class="mb-3 col-md-6">
                                                        <label for="product_name" class="form-label">Set Name</label>
                                                        <input type="text" class="form-control form-control-light" id="product_name_{{$gp->id}}" placeholder="product name" name="productName" required min="3">
                                                    </div>
                                                        <div class="col-md-6 mb-3 ">
                                                            <label for="multipleSelect" class="form-label">Product:</label>
                                                            
                                                            <select id="multipleSelect_{{$gp->id}}" onchange="handleProductChange(this)" class="select2 form-control select2-multiple" data-toggle="select2" multiple="multiple" 
                                                            name="product_id[]"
                                                            data-placeholder="Product ...">                                           
                                                                    <option  value="AK">select</option>
                    
                                                                @forelse ($products as $item)
                                                                        <option data-price="{{$item->rate}}" value="{{$item->id}}" >{{$item->product_name}}</option>
                                                                            
                                                                @empty
                                                                    <option value="">No data found!</option>
                                                                @endforelse
                                                            </select>
                                                        </div>
                                                   
                                                </div>
                    
                                                <div class="row">
                                                    <div class=" col-md-6 mb-3">
                                                        <label for="task-priority" class="form-label">Discount:</label>
                                                        <input type="number" onkeyup="handleDiscountChange(this.value)" class="form-control form-control-light discount" name="discount" required id="discounts_{{$gp->id}}">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label for="task-priority" class="form-label">Total:</label>
                                                        <input type="number" class="form-control form-control-light total" name="total" id="total_{{$gp->id}}" required>
                                                    </div>
                                                </div>
                                            <div class="text-end">
                                                <button type="button" class="btn btn-light" onclick="$('.editForm_{{$gp->id}}').addClass('d-none')">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                            </tr>
                            @empty
                                <tr>
                                    <td colspan="5">No data founds!</td>
                                </tr>
                            @endforelse
                           
                            
                        </tbody>
                    </table>
                    {{-- {{$groupProducts}} --}}
                    {{-- {{$products->links()}}   --}}
                </div>
            </div>
        </div>          
    </div>

      {{-- end table--}}
    </div> <!-- End Content -->

    <!-- Footer Start -->
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <script>document.write(new Date().getFullYear())</script> © Hyper - Coderthemes.com
                </div>
                <div class="col-md-6">
                    <div class="text-md-end footer-links d-none d-md-block">
                        <a href="javascript: void(0);">About</a>
                        <a href="javascript: void(0);">Support</a>
                        <a href="javascript: void(0);">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- end Footer -->

</div> <!-- content-page -->
<div class="rightbar-overlay"></div>
        <!-- /End-bar -->           


        
    
@endsection

@push('scripts')
<script>
    
    let productRate = $('rate')
    let total = $('.total');
    total.val(0)
    $('.discount').val(0)
    let amout ;
    


    function handleProductChange(e){
        amout= 0;

        $("#multipleSelect :selected").map(function(i, el) {
            amout += parseFloat($(el).data("price"));
        }).get();
       
        total.val(amout);
        
        handleDiscountChange($('.discount').val())
        
    }

    function handleDiscountChange(e){
        // if(amout > 0){
            discount = 0;
            discount = amout-e;
            total.val(discount);
        // }else{
        //     return false;
        // }
    }

    function updateGP(data){
        $(`.editForm_${data.id}`).toggleClass('d-none');
        $(`#product_name_${data.id}`).val(data.group_product_name)
        $(`#discounts_${data.id}`).val(data.discount)
        $(`#total_${data.id}`).val(data.total)
        let productId = [];
        data.product_support.map((i)=>{
            $("#multipleSelect_"+data.id+ "option[value='" + i.product.id + "']").prop("selected", true).change();
        })
       
    }
</script>

   <!-- Typehead -->
   <script src="{{asset('assets/js/vendor/handlebars.min.js')}}"></script>
   <script src="{{asset('assets/js/vendor/typeahead.bundle.min.js')}}"></script>
 
   <!-- Demo -->
   <script src="{{asset('assets/js/pages/demo.typehead.js')}}"></script>

        @endpush