@extends('layouts.app', ['page' => __('Products'), 'pageSlug' => 'products'])

@section('content')

<style>
     #dropdownMenuButton{
        width: 135px;
    margin-top: 5px;
    height: 41px;
    }
    .card{
        margin-top: 20px;
    }
</style>

<div class="col-md-12">


    <button type="button" class="btn btn-primary modalTrigger" data-toggle="modal" data-target="#exampleModal">
        Import    </button>
 <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Export</button>
                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                         <a class="dropdown-item" href="#" id="button" onclick="htmlTableToExcel('xlsx')">Download Excel xlsx</a>
                         <a class="dropdown-item" href="#" id="button" onclick="htmlTableToExcel('csv')">Download Excel csv</a>
                         <a class="dropdown-item" id="printButton" onclick="print()">Print</a>
                     </div>
                     <input type="button" id="btn" class="btn btn-info" value="Download Sample" onClick="window.location.href='{{ URL::to("uploads/product.xlsx") }}'">   {{-- Download Excel Format--}}
                     
 {{-- modal popup --}}
     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="indicator"></div>
           <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel"></h5>
             {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"> --}}
             {{-- <span aria-hidden="true">&times;</span> --}}
             {{-- </button> --}}
           </div>
           <div class="modal-body">
             <div class="media mb-3">
               <div class="media-body">
                 <div class="position-relative">
                     <form action="{{route ('products.import') }}" class="p-2" method="post" enctype="multipart/form-data">
                         @csrf
                         <h4>Upload Excel File Here</h4>
                         <input type="file" name="file" class="form-control col file"  accept="audio/*|video/*|video/x-m4v|video/webm|video/x-ms-wmv|video/x-msvideo|video/3gpp|video/flv|video/x-flv|video/mp4|video/quicktime|video/mpeg|video/ogv|.ts|.mkv|image/*|image/heic|image/heif">
                 </div>
               </div>
             </div>
           </div>
           <div class="row col-md-12 ml-auto mr-auto preview"></div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
             <input class="btn btn-success m-1" id="btn" type="submit" value="Import"> 
         </div>
         </div>
       </div>
     </div>

     {{-- end of Modal import export --}}


        <div class="card ">
            <div class="card-header">
                <div class="row">
                    <div class="col-8">
                        <h4 class="card-title" style="font-weight:bold;">Products</h4>
                    </div>
                    <div class="col-4 text-right">
                        <a href="{{route('products.productsadd')}}" class="btn btn-sm btn-info">Add Products</a>
                    </div>
                </div>
            </div> 
            <div class="card-body">
            @if(session('success'))
              <div class="alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                  <span class="alert-text text-white">
                  {{ session('success') }}</span>
              </div>
          @endif
                
                <div class="">
                    <table class="table tablesorter " id="tableID">
                        <thead class="text-primary">
                            <tr>
                            <!-- <th scope="col">S.No</th> -->
                            <th scope="col">Product Code</th>
                            <th scope="col">Product Name</th>
                            <th scope="col">Category</th>
                            <th scope="col">SubCategory</th>
                            <th scope="col">Price</th>
                            {{-- <th scope="col">Description</th> --}}
                            {{-- <th scope="col">CGST</th>
                            <th scope="col">SGST</th>
                            <th scope="col">IGST</th> --}}
                            <th scope="col">Image</th>
                            @if (auth::user()->role == 0)
                            <th scope="col">Action</th>
                            @endif
                        </tr></thead>
                        <tbody>
                            @foreach($products as $product)
                                    <tr>
                                    <td>{{$product->productcode}}</td>
                                    <td>{{$product->productname}}</td>
                                    <td>{{$product->category}}</td>
                                    <td>{{$product->subcategory}}</td>
                                    <td>{{$product->price}}</td>
                                    {{-- <td>{{$product->description}}</td> --}}
                                    {{-- <td>{{$product->cgst}}</td>
                                    <td>{{$product->sgst}}</td>
                                    <td>{{$product->igst}}</td> --}}
                                    <td><img src="{{ asset($product->image) }}" width="75" class="img-responsive"/></td>
                                    @if (auth::user()->role == 0)
                                    <td>
                                              <div class="dropdown">
                                                <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                   <a class="dropdown-item" href="{{ url('productedit') }}/{{$product->id}}">Edit</a>
                                                    <a class="dropdown-item" href="{{ url('productdelete') }}/{{$product->id}}">Delete</a>
                                                </div>
                                            </div>
                                    </td>
                                    @endif

                                </tr>
                                @endforeach
                                 </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer py-4">
                <nav class="d-flex justify-content-end" aria-label="...">
                    
                </nav>
            </div>
        </div>
        
    </div>





    {{-- convert table to xmlx using on js --}}
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
<script>
function htmlTableToExcel(type){
    var data = document.getElementById('tableID');
    var excelFile = XLSX.utils.table_to_book(data, {sheet: "sheet1"});
    XLSX.write(excelFile, { bookType: type, bookSST: true, type: 'base64' });
    XLSX.writeFile(excelFile, 'Excel.' + type);
   }

</script>



{{-- convert to pdf and print using js --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js "></script>
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.js"></script>

<script>
    function print() {
        var sTable = document.getElementById('tableID').outerHTML;

        var style = "<style>";
        style = style + "table {width: 100%;font: 17px Calibri;}";
        style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
        style = style + "padding: 2px 3px;text-align: center;}";
        style = style + "</style>";

        var win = window.open('', '', 'height=700,width=700');
        win.document.write('<html><head>');
        win.document.write('<title>Customer Profile</title>');   
        win.document.write(style);          
        win.document.write('</head>');
        win.document.write('<body>');
        win.document.write(sTable);        
        win.document.write('</body></html>');

        win.document.close(); 	
        win.print();   
    }
</script>
            @endsection