@extends('admin.layouts.master')

@section('page-title', 'Manage Leads')

@section('subheader')
<!--begin::Subheader-->
<div class="subheader py-2 py-lg-6 subheader-solid" id="kt_subheader">
    <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Leads</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <!-- <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item">
                        <a href="" class="text-muted">Manage</a>
                    </li>

                </ul> -->
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        <!--end::Info-->
        <!--begin::Toolbar-->
        <div class="d-flex align-items-center">
            <!--begin::Actions-->
            <!-- <a href="{{route('admin.clients.create')}}" class="btn btn-light-primary font-weight-bolder btn-sm"><i class="fa fa-plus" aria-hidden="true"></i>Create New User</a> -->
            <!--end::Actions-->

        </div>
        <!--end::Toolbar-->
    </div>
</div>
<!--end::Subheader-->
@endsection


@section('content')
<!--begin::Container-->
<div class="container">

    @include('admin.layouts.flash_messages')

    <div class="row">
        <div class="col-12">
            <form id="filterform" action="" method="get">
                @csrf
                <div class="card p-4 mb-3">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="text" class="form-control" id="start_date" readonly="readonly" name="start_date" data-datetime="true" value="{{ date('m-d-Y', strtotime($start_date)) }}" placeholder="Enter Start Date" />
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="text" class="form-control" id="end_date" readonly="readonly" name="end_date" data-datetime="true" value="{{ date('m-d-Y', strtotime($end_date)) }}" placeholder="Enter End Date" />
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="client_id" class="form-label">Clients</label>
                                <select class="form-control" readonly="readonly" name="client_id">
                                    <option value="all" {{ isset($client_id) && $client_id == 'all' ? 'selected' : ''  }}>All</option>
                                    @foreach($clients as $row)
                                    <option {{ isset($client_id) && $client_id == $row->id ? 'selected' : ''  }} value="{{$row->id}}">{{$row->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2"> <!-- align-content-center   -->
                            <label for="" class="form-label text-white">Apply filter</label>
                            <button type="submit" class="btn btn-success btn-block">Apply Filter</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap pt-6 pb-0">
            <div class="card-title">
                <h3 class="card-label">Manage Leads
                    <span class="d-block text-muted pt-2 font-size-sm">All leads list</span>
                </h3>
            </div>

        </div>
        <div class="card-body">
            <form id="filterform" action="" method="get">
                <div style="height: 50px;">

                    <!-- <div class="col-sm-2 float-right row">
                        <div class="">
                            <a class="btn btn-primary" style="position: absolute; right: 0px;" onclick="downloadCSV()">Download CSV</a>
                        </div>
                    </div> -->
                    <div class="col-sm-4 float-right row">
                        <div class="input-group">
                            <input type="text" data-toggle="tooltip" data-placement="top"   title="Search by: First Name/ Last Name/ Phone/ Email " placeholder="Search" class="input-sm form-control" name="q" value="{{ \request('q') }}" />

                            <span class="input-group-btn"> <!-- style="margin-right:10px;"-->
                                <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                        
                        <!-- <div class="input-group">
                            <a class="btn btn-primary" style="position: absolute; right: 0px;" onclick="downloadCSV()">Download CSV</a>
                        </div> -->
                    </div>

                    

                    {{-- PageLength Selector --}}

                    <select name="page_size" class="form-control col-sm-1 " id="page_size">

                        <option {{ \request('page_size') == 10  || $page_size == 10  ?  'selected' : '' }} value="10">10</option>
                        <option {{ \request('page_size') == 25  || $page_size == 25  ?  'selected' : '' }} value="25">25</option>
                        <option {{ \request('page_size') == 50  || $page_size == 50  ?  'selected' : '' }} value="50">50</option>
                        <option {{ \request('page_size') == 100 || $page_size == 100 ?  'selected' : '' }} value="100">100</option>

                    </select>


                </div>
            </form>
            <!--begin: Datatable-->
            <div style="overflow-x: auto;">
                <table class="table table-bordered table-checkable" id="" style="width: 100% !important;">
                    <thead>
                        <tr>
                            <th>Sr#</th>
                            <th>Client</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Licensed</th>
                            <!-- <th>Outcome</th> -->
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($leads as $key => $lead)
                        <tr>
                            <td>{{++$counter}}</td>
                            <td>{{$lead->client->name}}</td>
                            <td>{{$lead->first_name}}</td>
                            <td>{{$lead->last_name}}</td>
                            <td>{{$lead->email}}</td>
                            <td>{{$lead->phone}}</td>
                            <td>{{($lead->licensed) ? "Yes": "No"}}</td>
                            {{-- <td>{{$lead->outcome}}</td> --}}
                            <td>{{$lead->created_at}}</td>
                        </tr>

                        @empty

                        <tr>
                            <td colspan="8" class="text-center">No data found</td>
                        </tr>

                        @endforelse

                    </tbody>
                </table>

                <div style="float:left; margin-top:20px">
                    {{ $showCount }}
                </div>

                <div style="float:right; margin-top:20px">
                    <div class="dataTables_paginate paging_simple_numbers" id="kt_datatable_users_paginate">
                        <ul class="pagination">
                            <li class="paginate_button page-item previous" id="kt_datatable_users_previous">
                                <a href="{{ $leads->appends($_GET)->previousPageUrl()}} " aria-controls="kt_datatable_users" data-dt-idx="0" tabindex="0" class="page-link"><i class="ki ki-arrow-back"></i></a>
                            </li>

                            @php $dot = 0 @endphp
                                                        @for($i=1; $i <= $leads->lastPage();$i++)
                                @php $back = $leads->lastPage() - 3 @endphp
                                @php $minus = $page - 3 @endphp
                                @php $plus = $page + 3 @endphp
                                @if($leads->lastPage() > 6)
                                @if(($i < $plus && $i> $minus) || $i > $back)
                                    <li class="paginate_button page-item {{ (!isset($_GET['page']) && $i == 1) ||  ( isset($_GET['page']) &&  $_GET['page'] == $i) ? 'active' : '' }}"><a href="{{ $leads->appends($_GET)->url($i)}}" aria-controls="kt_datatable_users" data-dt-idx="{{ $i }}" tabindex="0" class="page-link">{{ $i }}</a></li>
                                    @elseif($i > $plus)
                                    @if($dot < 2) @php $dot++ @endphp <li class="paginate_button page-item disabled" id="kt_datatable_users_ellipsis"><a href="#" aria-controls="kt_datatable_users" data-dt-idx="6" tabindex="0" class="page-link">.</a></li>
                                        @endif
                                        @endif
                                        @else
                                        <li class="paginate_button page-item {{ (!isset($_GET['page']) && $i == 1) ||  ( isset($_GET['page']) &&  $_GET['page'] == $i) ? 'active' : '' }}"><a href="{{ $leads->appends($_GET)->url($i)}}" aria-controls="kt_datatable_users" data-dt-idx="{{ $i }}" tabindex="0" class="page-link">{{ $i }}</a></li>
                                        @endif
                                        @endfor
                                        <li class="paginate_button page-item next" id="kt_datatable_users_next"><a href="{{ $leads->appends($_GET)->nextPageUrl()}}" aria-controls="kt_datatable_users" data-dt-idx="8" tabindex="0" class="page-link"><i class="ki ki-arrow-next"></i></a></li>
                        </ul>
                    </div>
                    {{-- $leads->appends($_GET)->links() --}}
                </div>
            </div>
            <!--end: Datatable-->
        </div>
    </div>
    <!--end::Card-->

</div>
<!--end::Container-->

@endsection


@section('page_scripts')
<script>

    $('body').on('change', 'select#page_size', function() {
        $(this).closest('form').submit();
    });

    $(document).ready(function() {
        $('#start_date').datepicker({
            rtl: KTUtil.isRTL(),
            todayHighlight: true,
            orientation: "bottom left",
            format: 'mm-dd-yyyy'
        });

        $('#end_date').datepicker({
            rtl: KTUtil.isRTL(),
            todayHighlight: true,
            orientation: "bottom left",
            format: 'mm-dd-yyyy'
        });
    });

    var datatable = $('#kt_datatable').KTDatatable({
        paging: false,
        info: false,
        page_size: false,

        data: {
            saveState: {
                cookie: false
            },
        },
        search: {
            input: $('#kt_datatable_search_query'),
            key: 'generalSearch',
        },
        layout: {
            class: 'datatable-bordered',
        },
        columns: [],
    });


    function downloadCSV() {
        $('#filterform').append('<input name="download_csv" value="download_csv" type="hidden" id="download_csv">');
        $('#filterform').submit();
        $('#download_csv').remove();
        return;
    }
</script>
@endsection