@extends('admin.layouts.main')
@section('content')
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor">Products</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Products</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Start Page Content -->
        <!-- ============================================================== -->
        <div class="form-group row">
            <div class="col-sm-12">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <div class="col-sm-12">
                @if (session()->has('message'))
                    <div class="alert alert-success">
                        {{session('message')}}
                    </div>
                @endif
            </div>
            <div class="col-sm-12">
                @if (session()->has('hasError'))
                    <div class="alert alert-danger">
                        {{session('hasError')}}
                    </div>
                @endif
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="d-flex justify-content-center col-12">
                                <select id="category" class="form-control col-4 ml-3">
                                    <option  value="">--Select Category--</option>
                                </select>
                                <select id="sub_category" class="form-control col-4 ml-3">
                                    <option  value="">--Select Subcategory--</option>
                                </select>
                                 <select id="filter" class="form-control col-3 ml-3">
                                    <option  value="all">All Products</option>
                                     <option  value="trending">Trending Products</option>
                                </select>
                                </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Products</h4>
                        <a  href="{{url('admin/product/create')}}" class="btn btn-success pull-left">Add New</a>
                        <input type="text" id="myInput" class="form-control col-4 mb-2 pull-right" onkeyup="myFunction()" placeholder="Search Product..">

                        <div class="table-responsive">
                            <table class="table" id="myTable">
                                <thead>
                                <tr>

                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Sub Category</th>
                                    <th>Image</th>
                                    <th>Price</th>
                                    <th>Discount Price</th>
                                    <th>Selling Price</th>
                                    <th>Stock</th>
                                    <th>Action</th>

                                </tr>
                                </thead>
                                <tbody id="tb-body">
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('custom-script')
    <script type="text/javascript">

        var database = firebase.database();

        // This is reference to tha database, to fetch data from database use below code:

        window.onload = function () {
            swal.fire({
                imageUrl:"https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif",
                title: 'Loading Data!',
                text: 'Please Wait...',
                showConfirmButton: false,
                allowOutsideClick : false
            });
        }
        
        
        
        $('#filter').on('change',function(){
            var a=$('#filter').val();
            if(a=="all"){
                
                   var starCountRef = firebase.database().ref('Products');
        // Add ref of child if any
        starCountRef.on('value', function(snapshot) {
           $('#category option').remove();
            $('table tbody tr').remove();
            $('#category').append('<option  value="">--Select Category--</option>');
            snapshot.forEach(function(childNodes){

              var data=childNodes.val();
                $('#category').append('<option  value="'+childNodes.key+'">'+childNodes.key+'</option>');

              var count=0;
                for(let[key,value] of Object.entries(data)){
                   var data2=value;

                    for(let[key2,value2] of Object.entries(data2)){


                        var sub=value2.product_sub_category.replace("&", "^");
                      var cat=value2.product_category.replace("&", "^");

                      if(value2.trending==1){
                          var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='remove_trending_product(this.id)' class='btn btn-warning'> Remove Trending</button></a>";
                      }else{
                          var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='add_trending_product(this.id)' class='btn btn-success'> Add Trending</button></a>";

                      }

                        $('#tb-body').append("<tr><td>"+value2.product_name+"</td><td>"+value2.product_category+"</td>" +
                            "<td>"+value2.product_sub_category+"</td><td><img class='img-fluid' style='height:60px;width:60px;' src="+value2.main_photo+" ></td>" +
                            "<td>"+value2.product_cost+"</td><td>"+value2.product_discount_price+"</td><td>"+value2.product_selling_price+"</td><td>"+value2.product_stock+"</td><td><a href='{{url('admin/product/edit')}}?id="+key2+"&category="+cat+"&sub_category="+sub+"' class='btn btn-primary'>Edit</a> <a href='javascript:;' > <button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='delete_product(this.id)' class='btn btn-danger'> Delete</button></a>"+trending_button+"</td>"+
                            "</tr>");
                    }



                }
              


            });



        });

                
                
                
                
                
                
            }else{
                
                
                
                   var starCountRef = firebase.database().ref('Products');
        // Add ref of child if any
        starCountRef.on('value', function(snapshot) {
           $('#category option').remove();
            $('table tbody tr').remove();
            $('#category').append('<option  value="">--Select Category--</option>');
            snapshot.forEach(function(childNodes){

              var data=childNodes.val();
                $('#category').append('<option  value="'+childNodes.key+'">'+childNodes.key+'</option>');

              var count=0;
                for(let[key,value] of Object.entries(data)){
                   var data2=value;

                    for(let[key2,value2] of Object.entries(data2)){
                   if(value2.trending==1){

                        var sub=value2.product_sub_category.replace("&", "^");
                      var cat=value2.product_category.replace("&", "^");

                      if(value2.trending==1){
                          var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='remove_trending_product(this.id)' class='btn btn-warning'> Remove Trending</button></a>";
                      }else{
                          var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='add_trending_product(this.id)' class='btn btn-success'> Add Trending</button></a>";

                      }

                        $('#tb-body').append("<tr><td>"+value2.product_name+"</td><td>"+value2.product_category+"</td>" +
                            "<td>"+value2.product_sub_category+"</td><td><img class='img-fluid' style='height:60px;width:60px;' src="+value2.main_photo+" ></td>" +
                            "<td>"+value2.product_cost+"</td><td>"+value2.product_discount_price+"</td><td>"+value2.product_selling_price+"</td><td>"+value2.product_stock+"</td><td><a href='{{url('admin/product/edit')}}?id="+key2+"&category="+cat+"&sub_category="+sub+"' class='btn btn-primary'>Edit</a> <a href='javascript:;' > <button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='delete_product(this.id)' class='btn btn-danger'> Delete</button></a>"+trending_button+"</td>"+
                            "</tr>");
                   }
                    }



                }
              


            });



        });

                
                
                
                
                
                
            }
        });
        
        
        
        


        $('#sub_category').on('change',function () {
            var cat=$('#category').val();
            var sub=$('#sub_category').val();
            $('table tbody tr').remove();
            firebase.database().ref('Products/'+cat+'/'+sub+'/').once('value').then(function(snapshot){
                //get your posts div
                var data=snapshot.val();

                for(let[key2,value2] of Object.entries(data)) {


                    if(value2.trending==1){
                        var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='remove_trending_product(this.id)' class='btn btn-warning'> Remove Trending</button></a>";
                    }else{
                        var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='add_trending_product(this.id)' class='btn btn-success'> Add Trending</button></a>";

                    }



                    var sub=value2.product_sub_category.replace("&", "^");
                    var cat=value2.product_category.replace("&", "^");
                    $('#tb-body').append("<tr><td>"+value2.product_name+"</td><td>"+value2.product_category+"</td>" +
                        "<td>"+value2.product_sub_category+"</td><td><img class='img-fluid' style='height:60px;width:60px;' src="+value2.main_photo+" ></td>" +
                        "<td>"+value2.product_cost+"</td><td>"+value2.product_discount_price+"</td><td>"+value2.product_selling_price+"</td><td>"+value2.product_stock+"</td><td><a href='{{url('admin/product/edit')}}?id="+key2+"&category="+cat+"&sub_category="+sub+"' class='btn btn-primary'>Edit</a> <a href='javascript:;' > <button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='delete_product(this.id)' class='btn btn-danger'> Delete</button></a>"+trending_button+"</td>"+
                        "</tr>");
                }

            });
        });

        $('#category').on('change',function () {
           var result=$('#category').val();

           if (result!=""){
               $('#sub_category option').remove();
               $('#sub_category').append('<option  value="">--Select SubCategory--</option>');
               firebase.database().ref('Products/'+result+'/').once('value').then(function(snapshot){
                   //get your posts div
                   var data=snapshot.val();

                   for(let[key,value] of Object.entries(data)) {
                       $('#sub_category').append('<option  value="'+key+'">'+key+'</option>');
                   }

               });

           }
        });



        var starCountRef = firebase.database().ref('Products');
        // Add ref of child if any
        starCountRef.on('value', function(snapshot) {
           $('#category option').remove();
            $('table tbody tr').remove();
            $('#category').append('<option  value="">--Select Category--</option>');
            snapshot.forEach(function(childNodes){

              var data=childNodes.val();
                $('#category').append('<option  value="'+childNodes.key+'">'+childNodes.key+'</option>');

              var count=0;
                for(let[key,value] of Object.entries(data)){
                   var data2=value;

                    for(let[key2,value2] of Object.entries(data2)){


                        var sub=value2.product_sub_category.replace("&", "^");
                      var cat=value2.product_category.replace("&", "^");

                      if(value2.trending==1){
                          var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='remove_trending_product(this.id)' class='btn btn-warning'> Remove Trending</button></a>";
                      }else{
                          var trending_button="<button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='add_trending_product(this.id)' class='btn btn-success'> Add Trending</button></a>";

                      }

                        $('#tb-body').append("<tr><td>"+value2.product_name+"</td><td>"+value2.product_category+"</td>" +
                            "<td>"+value2.product_sub_category+"</td><td><img class='img-fluid' style='height:60px;width:60px;' src="+value2.main_photo+" ></td>" +
                            "<td>"+value2.product_cost+"</td><td>"+value2.product_discount_price+"</td><td>"+value2.product_selling_price+"</td><td>"+value2.product_stock+"</td><td><a href='{{url('admin/product/edit')}}?id="+key2+"&category="+cat+"&sub_category="+sub+"' class='btn btn-primary'>Edit</a> <a href='javascript:;' > <button id='"+value2.product_category+"/"+value2.product_sub_category+"/"+key2+"' onclick='delete_product(this.id)' class='btn btn-danger'> Delete</button></a>"+trending_button+"</td>"+
                            "</tr>");
                    }



                }
                swal.close();




            });



        });

        function delete_product(key){
            let choice=confirm("Are you sure, You want to delete?");
            if (choice){
                if ( firebase.database().ref('Products/'+key).remove()){
                    swal.fire({
                        title: "Success!",
                        text: "Product Deleted!",
                        icon: "success",
                        button: "Close!",
                    });
                }
            }



        }

        function add_trending_product(key) {
            firebase.database().ref('Products/'+key).update({
                'trending':1
            });
        }


        function remove_trending_product(key) {
            firebase.database().ref('Products/'+key).update({
                'trending':0
            });
        }

        function myFunction() {

            // Declare variables
            var input = document.getElementById("myInput");
            var filter = input.value.toUpperCase();
            var table = document.getElementById("myTable");
            var trs = table.tBodies[0].getElementsByTagName("tr");

            // Loop through first tbody's rows
            for (var i = 0; i < trs.length; i++) {

                // define the row's cells
                var tds = trs[i].getElementsByTagName("td");

                // hide the row
                trs[i].style.display = "none";

                // loop through row cells
                for (var i2 = 0; i2 < tds.length; i2++) {

                    // if there's a match
                    if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

                        // show the row
                        trs[i].style.display = "";

                        // skip to the next row
                        continue;

                    }
                }
            }

        }

        function confirmDelete(id) {
            let choice=confirm("Are you sure, You want to delete Club");
            if (choice){
                document.getElementById("delete-blog-"+id).submit();
            }
        }
    </script>
@endsection