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

@section('content')
<style>

    .table{
        display: block;
        overflow-x: auto;
        overflow-y: clip;
        white-space: nowrap;
        min-height: 300px;
    }
    #dropdownMenuButton{
        width: 135px;
    margin-top: 5px;
    height: 41px;
    }
    .file{
    height: 40px;
    }
    .dt-buttons{
          width: 100%;
     }

     .card{
        margin-top: 20px;
    }
</style>

<div class="col-md-12">
{{-- excel upload --}}
    {{-- <div class="col-md-12" >
     <form action="{{route ('Customers.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">
                    <input class="btn btn-success m-1" id="btn" type="submit" value="Import"> 
                   
                    <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" onClick="window.location.href='{{ URL::to("uploads/customers_nkd.xlsx") }}'">  
                    
                    
                </form>
                </div> --}}
{{-- end of excel upload --}}

 
<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/customers_nkd.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 ('Customers.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 popup --}}

        <div class="card ">
            <div class="card-header">
                <div class="row">
                    <div class="col-8">
                        <h4 class="card-title" style="font-weight:bold;">Customers</h4>
                    </div>
                    <div class="col-4 text-right">
                        <a href="{{route('Customers.customersdata')}}" class="btn btn-sm btn-info">Add Customer</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
          {{-- empTable --}}
                <div class="" id="invoice-card">
                    <table class="table tablesorter table-responsive" id="tableID">
                        {{-- <table id="example" class="display nowrap" style="width:100%"> --}}
                        <thead class=" text-primary">
                            <tr>
                            <!-- <th scope="col">S.No</th> -->
                            <th scope="col">Fullname</th>
                            <th scope="col">Service Address</th>
                            <th scope="col">Billing Address</th>
                            <th scope="col">land Line</th>
                            <th scope="col">Mobile</th>
                            <th scope="col">CustomerType</th>
                            <th scope="col">WhatsApp</th>
                            <th scope="col">Email</th>
                            <th scope="col">Gstin Details</th>
                            @if (auth::user()->role == 0)
                            <th scope="col">Action</th>
                            @endif
                        </tr></thead>
                        <tbody>

                           
                        @foreach ($users as $user)
                        <tr>
                                  
                                    {{-- <td>{{ $user[0]['fullname'] }}</td>
                                    <td>{{ $user[0]['service_address'] }}</td>
                                    <td>{{ $user[0]['billing_address'] }}</td>
                                    <td>{{ $user[0]['landline'] }}</td>
                                    <td>{{ $user[0]['mobile'] }}</td>
                                    <td>{{ $user[0]['customertype'] }}</td>
                                    <td>{{ $user[0]['whatsapp'] }}</td>
                                    <td>{{ $user[0]['email'] }}</td> 
                                    <td>{{ $user[0]['gstin_detail'] }}</td> --}}


                                    <td>{{ $user->fullname }}</td>
                                    <td>{{ $user->service_address }}</td>
                                    <td>{{ $user->billing_address }}</td>
                                    <td>{{ $user->landline }}</td>
                                    <td>{{ $user->mobile }}</td>
                                    <td>{{ $user->customertype }}</td>
                                    <td>{{ $user->whatsapp }}</td>
                                    <td>{{ $user->email }}</td> 
                                    <td>{{ $user->gstin_detail }}</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('customeredit')}}/{{$user->id}}">Edit</a>
                                                    <a class="dropdown-item" href="{{url('customersdatadelete')}}/{{$user->id}}">Delete</a>
                                                </div>
                                            </div>
                                    </td>
                                    @endif

                                </tr>
                                @endforeach
                                 </tbody>
                    </table>
                </div>
            </div>
            {{-- <button id="button" onclick="htmlTableToExcel('xlsx')">Export HTML Table to EXCEL</button> --}}
            {{-- <button id="printButton" onclick="print()">Print</button> --}}

          
            <div class="card-footer py-4">
                <nav class="d-flex justify-content-end" aria-label="...">
                    
                </nav>
            </div>
        </div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



 {{-- static pdf --}}
<script>
        function printPDF()
        {
            var element = document.getElementById('invoice-card');
            html2pdf(element);
        }
    </script>
 



 {{-- 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>";

        // CREATE A WINDOW OBJECT.
        var win = window.open('', '', 'height=700,width=700');

        win.document.write('<html><head>');
        win.document.write('<title>Customer Profile</title>');   // <title> FOR PDF HEADER.
        win.document.write(style);          // ADD STYLE INSIDE THE HEAD TAG.
        win.document.write('</head>');
        win.document.write('<body>');
        win.document.write(sTable);         // THE TABLE CONTENTS INSIDE THE BODY TAG.
        win.document.write('</body></html>');

        win.document.close(); 	// CLOSE THE CURRENT WINDOW.

        win.print();    // PRINT THE CONTENTS.
    }
</script>









            @endsection