@extends('admin.layouts.app')
@section('page_content')
<script>
    function deleteSubCategoty(product_id) {  
        Swal.fire({
            title: 'Do you want to detete product?',
            showCancelButton: true,
            confirmButtonText: `Delete`,
            reverseButtons:true,
        }).then((result) => {
            if(result.isConfirmed) {
                let deleteUrl = $("#deleteProductLink"+product_id).data('href');
                window.location.href = deleteUrl;
            }
        })
    };

    function reactiveSingleProduct(series_id, category_id, product_id) {  
        $("#data_loader").show();
        $.ajax({
            type: "GET",
            url: "{{route('admin.reactive.single.product')}}?series_id="+series_id+"&category_id="+category_id+"&product_id="+product_id,
            success: function (response) {
                $("#data_loader").hide();
                $("#singleEditInActive").html(response);
                $('#singleEditInActive').modal({
                    show: true,
                    backdrop: 'static',
                    keyboard: false,
                }); 
            }
        });
    }
    
    function reactiveMultiProduct(series_id, category_id) {  

        let reactiveMultiProducts = [];
        $("input:checkbox[name=selctedcheckboxs]:checked").each(function() {
            reactiveMultiProducts.push($(this).val());
        });
        
        let reactiveMultiProductsIds = '';
        if(reactiveMultiProducts.length > 0){
            let reactiveMultiProductsIds = reactiveMultiProducts.toString();
            $("#data_loader").show();
            $.ajax({
                type: "GET",
                url: "{{route('admin.reactive.multi.product')}}?series_id="+series_id+"&category_id="+category_id+"&products="+reactiveMultiProductsIds,
                success: function (response) {
                    $("#data_loader").hide();
                    $("#multiEditInActive").html(response);
                    $('#multiEditInActive').modal({
                        show: true,
                        backdrop: 'static',
                        keyboard: false,
                    }); 
                }
            });
        }else{
            alert("No Products selected!");
        }
    }
</script>
<div class="content-wrapper">
    <!-- Page Title Header Starts-->
    <div class="row page-title-header">
        <div class="col-12">
            <div class="page-header">
                <h4 class="page-title">Inactive Products - {{$product_title}}</h4>
                <ul>
                    <li><a href="{{route('admin.cms.inactive')}}" class="filled_green_btn">Back</a></li> 
                </ul>    
            </div>
        </div>
    </div>
    <!-- Page Title Header Ends-->

    
    <div class="row">

        <div class="col-md-12">
            <div class="row flex-grow">
                <div class="col-12">
                    <button type="button" onclick="reactiveMultiProduct({{$series->id}}, {{$series->category_id}});" class="btn btn-green  mr-2 mb-4">Assign to Selected</button>

                    <table id="example" class="display table table-striped cust-datatable" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th align="center" class="text-center"><input type="checkbox" id="select_all" /></th>
                                <th>Category</th>
                                <th>Serices</th>
                                <th>Model</th>
                                <!-- <th>Abandoned</th> -->
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($products as $key => $product)
                                <tr>
                                    <td align="center"><input type="checkbox" class="checkbox" name="selctedcheckboxs" value="{{$product->id}}"/></td>
                                    <td>{{$product->product_category->name}}</td>
                                    <td>{{$product->product_serices->name}}</td>
                                    <td>{{$product->model}}</td>
                                    <!-- <td>[Status Here]</td> -->
                                    <td class="text-center">
                                        <button type="button" onclick="reactiveSingleProduct({{$series->id}}, {{$series->category_id}}, {{$product->id}});" class="btn btn-rounded green_filled">Reassign To</button>

                                        <a href="javascript:0;" onclick="deleteSubCategoty({{$product->id}});" id="deleteProductLink{{$product->id}}" data-toggle="tooltip" data-placement="top" data-href="{{route('admin.inactive.products.delete',['category_id'=>$product->category_id,'series_id' => $product->series_id,'product_id'=>$product->id])}}" title="Delete" class="red_outline"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>  


    <div class="modal fade singleEditInActive" id="singleEditInActive" tabindex="-1" role="dialog" aria-labelledby="singleEditInActive" aria-hidden="true"> </div>
    <div class="modal fade multiEditInActive" id="multiEditInActive" tabindex="-1" role="dialog" aria-labelledby="multiEditInActive" aria-hidden="true"> </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#select_all').on('click',function(){
            if(this.checked){
                $('.checkbox').each(function(){
                    this.checked = true;
                });
            }else{
                $('.checkbox').each(function(){
                    this.checked = false;
                });
            }
        });
        
        $('.checkbox').on('click',function(){
            if($('.checkbox:checked').length == $('.checkbox').length){
                $('#select_all').prop('checked',true);
            }else{
                $('#select_all').prop('checked',false);
            }
        });
    });
</script>
@endsection