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

@section('content')

<style>
   

    #dropdownMenuButton{
        width: 135px;
    margin-top: 5px;
    height: 41px;
    }

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

<main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
   
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                                <span class="alert-text text-black">
                                {{ session('success') }}</span>
                            </div>
                        @endif
  <div class="content">
    <div class="row">
        <div class="col-md-12">

            <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>
                      
                <div class="card ">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-8">
                                <h4 class="card-title">Lead List</h4>
                            </div>
                            <div class="col-4 text-right">
                                <a href="{{ route('AddLeads') }}" class="btn btn-sm btn-info">Add Lead</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        
                        <div class="">
                            <table class="table tablesorter" id="tableID">
                                <thead class="text-primary">
                                
                                    <tr>
                                    <th scope="col">Id</th> 
                                    <th scope="col">Name</th>
                                    <th scope="col">Phone Number</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Source</th>
                                    {{-- <th scope="col">Image</th> --}}
                                    <th scope="col">Dimension</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Requirement</th>
                                    @if (auth::user()->role == 0)
                                    <th scope="col">Action</th>
                                    @endif
                                    
                                 </tr>
                               </thead>
                                <tbody>
                                    @php($i = 1)
                                    @foreach($lead_data as $lead)
                                        <tr>
                                            <td>{{ $i++ }}</td>
                                            <td>{{ $lead->name }}</td>
                                            <td>{{ $lead->phone_number }}</td>
                                            <td>{{ $lead->email }}</td>
                                            <td>{{ $lead->created_at }}</td>
                                            <td>{{ $lead->source }}</td>
                                            <td>{{ $lead->dimension }}</td>

                                            <td class="text-center">
                                                <select class="form-control" style="color: #000 !important; width:auto;" onchange="changeStatus(this.value, {{$lead->id}})">
                                                    <option value="1" {{ $lead->status == 1 ? 'selected' : '' }}>Pending</option>
                                                    <option value="2" {{ $lead->status == 2 ? 'selected' : '' }}>Spoke to Client</option>
                                                    <option value="3" {{ $lead->status == 3 ? 'selected' : '' }}>Fixed Appointment</option>
                                                    <option value="4" {{ $lead->status == 4 ? 'selected' : '' }}>Convert to Customer</option>
                                                </select>
                                            </td>

                                            <td>
                                                <a class="btn btn-sm btn-info" onclick="showRequirement('{{ $lead->requirement }}');" style="color: #ffffff">View</a>
                                            </td>

                                            @if (auth::user()->role == 0)
                                                <td class="text-center">
                                                    <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('Leads/edit') }}/{{$lead->id}}">Edit</a>
                                                            <a class="dropdown-item" href="{{ url('Leads/delete') }}/{{$lead->id}}">Delete</a>
                                                            <a class="dropdown-item" href="{{ url('Leads/files') }}/{{$lead->id}}">Files</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>
      </div>
  </div>
</main>

@push('js')
   
    <script>

        type = ['primary', 'info', 'success', 'warning', 'danger'];
        
        function showNotification(from, align, message,color) {
            $.notify({
            icon: "tim-icons icon-bell-55",
            message: message

            }, {
            type: type[color],
            timer: 8000,
            placement: {
                from: from,
                align: align
            }
            });
        }

        function changeStatus(selected_value, lead_id)
        {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url : "{{ url('lead/ChangeStatus') }}",
                data : {
                    'selected_value':selected_value,
                    'lead_id' : lead_id },
                type : 'POST',
                dataType : 'json',
                success : function(data){

                    if(data.success)
                    {
                        
                        if(data.converted)
                        {
                            
                            showNotification('top','right','Lead Converted to customer successfully!!!',2);
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                            
                        }
                        else
                        {
                            showNotification('top','right','Lead status changed successfully!!!',2);
                        }
                    }
                }
            });
          
        }
        

       
    </script>
      <!-- <script>
        function changeCustomer(selected_value, lead_id)
        {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url : "{{ url('lead/ChangeCustomer') }}",
                data : {
                    'selected_value':selected_value,
                    'lead_id' : lead_id },
                type : 'POST',
                dataType : 'json',
                success : function(data){

                    if(data.success)
                    {
                        demo.showNotification('top','right','Lead status changed successfully!!!',2);
                    }
                }
            });
        }
    </script> -->
     <script>
//         function showCustomer()
//         {
//             const { value: formValues } = await Swal.fire({
//             title: 'Multiple inputs',
//             html:
//                 '<input id="swal-input1" class="swal2-input">' +
//                 '<input id="swal-input2" class="swal2-input">',
//             focusConfirm: false,
//    })
//      if (formValues) {
//   Swal.fire(JSON.stringify(formValues))
//    }
//         }
    
    </script>


    <script>
        function showRequirement(req)
        {
            swal(req);
        }
    
    </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, 'Lead.' + type);
   }

</script>

{{-- onvert 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>Lead 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>

@endpush

@endsection