@extends('layouts.master')

@section('styles')

        @include('layouts.components.datatable-styles')

        <!-- Tom Select Css -->
        <link rel="stylesheet" href="{{asset('build/assets/libs/tom-select/css/tom-select.default.min.css')}}">

@endsection

@section('content')

                <!-- Start::app-content -->
                <div class="main-content app-content">
                    <div class="container-fluid">

                        <!-- Page Header -->
                        <div class="d-md-flex d-block align-items-center justify-content-between my-2 page-header-breadcrumb">
                            <h1 class="page-title fw-medium fs-24 mb-0">Leads</h1>
                            <!-- <div class="ms-md-1 ms-0">
                                <nav>
                                    <ol class="breadcrumb mb-0">
                                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                                        <li class="breadcrumb-item active d-inline-flex" aria-current="page">Dashboard</li>
                                    </ol>
                                </nav>
                            </div> -->
                        </div>
                        <!-- Page Header Close -->

                        <!-- Start:: row-2 -->
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card custom-card">
                                    <div class="card-header">
                                        <div class="container-fluid">
                                            <form method="get" id="filterForm">
                                                <div class="row">
                                                    <div class="col-3">
                                                        <label for="input-label" class="form-label">Search by</label>
                                                        <input type="text" name="filter-search-text" class="form-control" id="filter-search-text" placeholder="Name, phone, leadspedia id" value="{{ isset($_GET['filter-search-text']) ? $_GET['filter-search-text'] : '' }}">
                                                    </div>
                                                    <div class="col-3">
                                                        <label for="input-label" class="form-label">Coverage type</label>
                                                        <select class="form-select form-select-sm" name="filter-coverage-type" id="filter-coverage-type" multiple>
                                                            <option value="Individual" @if(isset($_GET['filter-coverage-type']) && str_contains($_GET['filter-coverage-type'], "Individual") ) selected @endif >Individual</option>
                                                            <option value="Family" @if(isset($_GET['filter-coverage-type']) && str_contains($_GET['filter-coverage-type'], "Family") ) selected @endif >Family</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-3">
                                                        <label for="input-label" class="form-label">Age range</label>
                                                        <select class="form-select form-select-sm" name="filter-age-range" id="filter-age-range" multiple>
                                                            <option value="18-25" @if(isset($_GET['filter-age-range']) && str_contains($_GET['filter-age-range'], "18-25") ) selected @endif >18-25</option>
                                                            <option value="26-35" @if(isset($_GET['filter-age-range']) && str_contains($_GET['filter-age-range'], "26-35") ) selected @endif >26-35</option>
                                                            <option value="36-45" @if(isset($_GET['filter-age-range']) && str_contains($_GET['filter-age-range'], "36-45") ) selected @endif >36-45</option>
                                                            <option value="46-59" @if(isset($_GET['filter-age-range']) && str_contains($_GET['filter-age-range'], "46-59") ) selected @endif >46-59</option>
                                                            <option value="60+" @if(isset($_GET['filter-age-range']) && str_contains($_GET['filter-age-range'], "60+") ) selected @endif >60+</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-3">
                                                        <label for="input-label" class="form-label">Annual income</label>
                                                        <select class="form-select form-select-sm" name="filter-annual-income" id="filter-annual-income" multiple>
                                                            <option value="20k-60k/yr" @if(isset($_GET['filter-annual-income']) && str_contains($_GET['filter-annual-income'], "20k-60k/yr")) selected @endif >20k-60k/yr</option>
                                                            <option value="60k-100k/yr" @if(isset($_GET['filter-annual-income']) && str_contains($_GET['filter-annual-income'], "60k-100k/yr")) selected @endif >60k-100k/yr</option>
                                                            <option value="100k-200k/yr" @if(isset($_GET['filter-annual-income']) && str_contains($_GET['filter-annual-income'], "100k-200k/yr")) selected @endif >100k-200k/yr</option>
                                                            <option value="200k/yr" @if(isset($_GET['filter-annual-income']) && str_contains($_GET['filter-annual-income'], "200k/yr")) selected @endif >200k/yr</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-3">
                                                        <label for="input-label" class="form-label">Enrolled in medicare</label>
                                                        <select class="form-select form-select-sm" name="filter-enrolled-in-medicare" id="filter-enrolled-in-medicare" multiple>
                                                            <option value="No" @if(isset($_GET['filter-enrolled-in-medicare']) && str_contains($_GET['filter-enrolled-in-medicare'], "No")) selected @endif >No</option>
                                                            <option value="Yes" @if(isset($_GET['filter-enrolled-in-medicare']) && str_contains($_GET['filter-enrolled-in-medicare'], "Yes")) selected @endif >Yes</option>
                                                            <option value="I'm Not Sure" @if(isset($_GET['filter-enrolled-in-medicare']) && str_contains($_GET['filter-enrolled-in-medicare'], "I\'m Not Sure")) selected @endif >I'm Not Sure</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-3">
                                                        <label for="input-label" class="form-label">Date</label>
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <div class="input-group-text text-muted"> <i class="ri-calendar-line"></i> </div>
                                                                <input type="text" name="filter-daterange" class="form-control" id="filter-daterange" placeholder="Date range">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-3 d-flex align-items-end">
                                                        <button class="btn btn-lg btn-primary mb-1" id="search" type="button">Search</button>
                                                        <button class="btn btn-lg btn-default mb-1" id="reset" type="button">Reset</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table text-nowrap table-striped w-100">
                                                <thead>
                                                    <tr>
                                                        <th>Detail</th>
                                                        <th>Coverage type</th>
                                                        <th>Age range</th>
                                                        <th>Annual income</th>
                                                        <th>Enrolled in medicare?</th>
                                                        <th>Doctor visit</th>
                                                        <!-- <th>Hubspot</th> -->
                                                        <th>Leadspedia</th>
                                                        <th>Date</th>
                                                        <th>Status</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if($leads->count() == 0)
                                                    <tr>
                                                        <td colspan="11">No leads to display.</td>
                                                    </tr>
                                                    @else
                                                    @foreach($leads as $lead)
                                                    <tr>
                                                        <td>
                                                            <i class="ti ti-user"></i> {{ $lead->name }}<br>
                                                            <i class="ti ti-phone"></i> <small><a class="text-primary" href="tel:{{ $lead->phone_number }}">{{ $lead->phone_number }}</a></small><br>
                                                            <i class="ti ti-arrow-autofit-right"></i> <small>via {{ $lead->landing_page_name }}</small>
                                                        </td>
                                                        <td>{{ $lead->coverage_type }}</td>
                                                        <td>{{ $lead->age_range }}</td>
                                                        <td>{{ $lead->annual_household_income }}</td>
                                                        <td>{{ $lead->enrolled_in_medicare }}</td>
                                                        <td>{{ $lead->see_doctor }}</td>
                                                        <!-- <td>{{ $lead->hubspot_id }}</td> -->
                                                        <td>{{ $lead->leadspedia_id }}</td>
                                                        <td>{{ $lead->created_at->format('d-m-Y h:m:s') }}</td>
                                                        <td><span class="badge {{ $lead->status->label_class }}">{{ $lead->status->name }}</span></td>
                                                        <td>
                                                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-edit-line"></i></a>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        {{ $leads->links() }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End:: row-2 -->

                    </div>
                </div>
                <!-- End::app-content -->

@endsection



@section('scripts')
    <!-- Date & Time Picker JS -->
    <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>
    <script>

        (function () {
            "use strict";

            const paramStartDate = "";
            const paramEndDate = "";

            const filterCoverageType = new Choices('#filter-coverage-type', { removeItemButton: true, duplicateItemsAllowed: false });
            const filterAgeRange = new Choices('#filter-age-range', { removeItemButton: true, duplicateItemsAllowed: false });
            const filterAnnualIncome = new Choices('#filter-annual-income', { removeItemButton: true, duplicateItemsAllowed: false });
            const filterEnrolledInMedicare = new Choices('#filter-enrolled-in-medicare', { removeItemButton: true, duplicateItemsAllowed: false });

            const filterDaterange = flatpickr("#filter-daterange", {
                mode: "range",
                dateFormat: "Y-m-d",
            });
            if(paramStartDate != '' && paramEndDate != '') {
                filterDaterange.setDate([paramStartDate, paramEndDate]);
            }
        })();

        // send comma separate values to url parameters for Multiple Select
        $("#search").click(function() {
            var params = {};
            var getSelect = ['filter-search-text', 'filter-coverage-type','filter-age-range','filter-annual-income','filter-enrolled-in-medicare', 'filter-daterange'];

            $.each(getSelect, function(index, value) {
                var select = $('#' + value);

                if(select.val() != '') {
                    var selected = select.val();

                    if(select.attr('multiple')) {
                        selected = selected.join(',');
                        params[value] = selected;
                    }
                    else if(value == 'filter-daterange') {
                        const dateArr = selected.split(" ");
                        const startDate = dateArr[0];
                        const endDate = dateArr[2];
                        params['start-date'] = startDate;
                        params['end-date'] = endDate;
                    } else {
                        params[value] = selected;
                    }


                }
            });

            if(!$.isEmptyObject(params)) {
                var url = [location.protocol, '//', location.host, location.pathname].join('');
                window.location.href = url + '?' + decodeURIComponent($.param(params));
            }
        });

        $("#reset").click(function() {
            window.location.href = [location.protocol, '//', location.host, location.pathname].join('');
        });
    </script>
@endsection