@extends('layouts.app')
@push('head-script')
    <style>
        .list-group {
            margin-bottom: 0px !important;
        }
    </style>
@endpush
@section('page-title')
    <div class="row title-row">
        <div class="col-md-12">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle)</h4>
        </div>
    </div>
    @push('head-script')
        <link rel="stylesheet" href="{{ asset('css/datatables/dataTables.bootstrap.min.css') }}">
        <link rel="stylesheet" href="{{ asset('css/datatables/responsive.bootstrap.min.css') }}">
        <link rel="stylesheet" href="{{ asset('css/datatables/buttons.dataTables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
        <style>
            .list-group {
                margin-bottom: 0px !important;
            }

            .dashboard-stats .white-box .list-inline {
                margin-bottom: 0;
            }

            .dashboard-stats .white-box {
                padding: 10px;
            }

            .dashboard-stats .white-box .box-title {
                font-size: 13px;
                text-transform: capitalize;
                font-weight: 300;
            }

            #leads-table_wrapper .dt-buttons {
                display: none !important;
            }


            .highcharts-figure,
            .highcharts-data-table table {
                min-width: 360px;
                max-width: 600px;
                margin: 1em auto;
            }

            .highcharts-data-table table {
                font-family: Verdana, sans-serif;
                border-collapse: collapse;
                border: 1px solid #EBEBEB;
                margin: 10px auto;
                text-align: center;
                width: 100%;
                max-width: 500px;
            }

            .highcharts-data-table caption {
                padding: 1em 0;
                font-size: 1.2em;
                color: #555;
            }

            .highcharts-data-table th {
                font-weight: 600;
                padding: 0.5em;
            }

            .highcharts-data-table td,
            .highcharts-data-table th,
            .highcharts-data-table caption {
                padding: 0.5em;
            }

            .highcharts-data-table thead tr,
            .highcharts-data-table tr:nth-child(even) {
                background: #f8f8f8;

            }

            .highcharts-data-table tr:hover {
                background: #f1f7ff;
            }



            .show_bord h4,
            .show_bord {
                margin: 0;
                padding: 0px !important;
            }

            .divbox {
                margin-top: 25px;
            }

            .col-md-12.show_bord h4 {
                background: #999eff;
                color: #fff;
                padding: 15px 0 !important;
            }

            .col-md-12.show_bord h2 {
                background: #999eff;
                padding: 16px 0 !important;
                margin: 0px;
                color: #fff;
            }

            .col-md-6.show_bord.first h4 {
                background: #ffbc75;
                color: #fff;
                padding: 15px 0 !important;
            }

            .col-md-6.show_bord.first h2 {
                background: #ffbc75;
                padding: 16px 0 !important;
                margin: 0px;
                color: #fff;
            }

            .col-md-6.show_bord.second h4 {
                background: #a9ff96;
                color: #fff;
                font-size: 15px;
                padding: 15px 0 !important;
            }

            .col-md-6.show_bord.second h2 {
                background: #a9ff96;
                padding: 16px 0 !important;
                margin: 0px;
                color: #fff;
            }

            .col-md-12.show_bord.three h4 {
                background: #5ce45c;
                color: #fff;
                padding: 15px 0 !important;
            }

            .col-md-12.show_bord.three h2 {
                background: #5ce45c;
                padding: 16px 0 !important;
                margin: 0px;
                color: #fff;
            }
        </style>
    @endpush
    <div class="row">
        <div class="col-md-12">
            <div class="white-box">
            @section('filter-section')
            <form action="" id="filter-form">
                <div class="row" id="ticket-filters">
                        <div class="col-md-12">
                            <h5>@lang('app.selectDateRange')</h5>
                            <div class="input-daterange input-group" id="date-range">
                                <input type="text" class="form-control" id="start-date" placeholder="@lang('app.startDate')"
                                    value="{{ $fromDate }}" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date" placeholder="@lang('app.endDate')"
                                    value="{{ $toDate }}" />
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">@lang('modules.lead.leadSource')</label>
                                <select class="select2 form-control" data-placeholder="@lang('modules.lead.leadSource')" id="source_id"
                                    value="">
                                    <option selected value="all">@lang('app.all')</option>
                                    @foreach ($lead_sources as $source)
                                        <option value="{{ $source->id }}">{{ $source->type }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <h5 class="m-t-0">Sales Executive </h5>
                                <div>
                                    <select class="select2 selectpicker form-control" data-placeholder="@lang('modules.tickets.chooseAgents')"
                                        id="agent_id" name="agent_id" value="">
                                        <option value="all">@lang('modules.lead.all')</option>
                                        @foreach ($leadAgents as $value)
                                            <option value="{{ $value->id }}">{{ ucwords($value->user->name) }}
                                                @if ($value->user->id == $value->id)
                                                    (YOU)
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <h5 class="m-t-0">Lead Executive </h5>
                                <div>
                                    <select class="select2 selectpicker form-control" data-placeholder="@lang('modules.tickets.chooseAgents')"
                                        id="client_id" name="client_id" value="">
                                        <option value="all">@lang('modules.lead.all')</option>
                                        @foreach ($leadAgents as $value)
                                            <option value="{{ $value->id }}">{{ ucwords($value->user->name) }}
                                                @if ($value->user->id == $value->id)
                                                    (YOU)
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <h5 class="m-t-0">Status</h5>
                            <div class="form-group">
                                <div>
                                    <select name="status" id="status_id" class="select2 form-control" value="">
                                        <option value="all">@lang('modules.lead.all')</option>
                                        @foreach ($status as $sts)
                                            <option value="{{ $sts->id }}"> {{ $sts->type }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 ">
                            <div class="form-group">
                                <label class="">Client Name</label>
                                <input type="text" name="name" id="name" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12 ">
                            <div class="form-group">
                                <label class="">Job Title</label>
                                <input type="text" name="jobtitle" id="jobtitle" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group d-flex justify-content-between align-items-center gap-3">
                               <button type="button" id="apply-filters" class="w-100 themeBtn"> @lang('app.apply')</button>
                                <button type="button" id="reset-filters" class="w-100 themeBtnOutline">@lang('app.reset')</button>
                            </div>
                        </div>
                    </div>
                </form>
            @endsection
        </div>
    </div>
</div>

<div id="newDataAppend" class="row dashboard_row">
    <div class="container">
        <div class="col-md-8">
            <figure class="highcharts-figure salesDashboard_chart">
                <div id="container"></div>
            </figure>
        </div>
        <div class="col-md-4 text-center">
            <div class="row ">
                <div class="col-md-12 show_bord ">
                    <h4>Converted Leads ({{ $convertedLead }}) </h4>
                    <h2>{{ global_setting()->currency->currency_symbol . $convertedvalue }}</h2>
                </div>
            </div>
            <div class="row divbox">
                <div class="col-md-6 show_bord first">
                    <h4>In Negotiation ({{ $negotation }} )</h4>
                    <h2>{{ global_setting()->currency->currency_symbol . $negotationvalue }} </h2>
                </div>
                <div class="col-md-6 show_bord second">
                    <h4>Proposal / Shared ({{ $proposal }} )</h4>
                    <h2>{{ global_setting()->currency->currency_symbol . $proposalvalue }}</h2>
                </div>

            </div>
            <div class="row divbox">
                <div class="col-md-12 show_bord three ">
                    <h4>Success Rate</h4>
                    <h2>{{ round($success_rate) }} %</h2>
                </div>
            </div>

        </div>
    </div>
    <div class="container border">
        <h4>Parked Leads</h4>
        <div class="row">
            <div class="col-md-3"></div>
            @foreach ($boardColumns as $key => $column)
                @if ($column->id == 14)
                    <div class="col-md-9">
                        <div class="panel col-md-4 board-column p-0" data-column-id="{{ $column->id }}">
                            <div class="dashboard_outer">
                                <div class="panel-heading p-t-5 p-b-5">
                                    <div class="panel-title">
                                        <h6 style="color: {{ $column->label_color }}">
                                            {{ ucwords($column->type) }}<span
                                                id="statusTotal{{ $column->id }}"></span>&nbsp;&nbsp;@if (count($column->leads) != 0)
                                                (<span>{{ count($column->leads) }}</span>)
                                            @endif
                                        </h6>
                                        <span class="price_span"
                                            style="color: {{ $column->label_color }}">{{ global_setting()->currency->currency_symbol . $column->leads->sum('value') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
    <div class="container border">
        <h4>Lost Leads</h4>
        <div class="row">
            <div class="col-md-3"></div>
            @foreach ($boardColumns as $key => $column)
                @if ($column->id == 16)
                    <div class="col-md-9">
                        <div class="panel col-md-4 board-column p-0" data-column-id="{{ $column->id }}">
                            <div class="dashboard_outer">
                                <div class="panel-heading p-t-5 p-b-5">
                                    <div class="panel-title">
                                        <h6 style="color: {{ $column->label_color }}">
                                            {{ ucwords($column->type) }}<span
                                                id="statusTotal{{ $column->id }}"></span>&nbsp;&nbsp;@if (count($column->leads) != 0)
                                                (<span>{{ count($column->leads) }}</span>)
                                            @endif
                                        </h6>
                                        <span class="price_span"
                                            style="color: {{ $column->label_color }}">{{ global_setting()->currency->currency_symbol . $column->leads->sum('value') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>



</div>



@endsection

@push('footer-script')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>


<script src="{{ asset('plugins/bower_components/morrisjs/morris.js') }}"></script>
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('js/datatables/responsive.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
{{-- {!! $dataTable->scripts() !!} --}}
<script src="{{ asset('js/Chart.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/raphael/raphael-min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/morrisjs/morris.js') }}"></script>
<script src="{{ asset('plugins/bower_components/waypoints/lib/jquery.waypoints.js') }}"></script>
<script src="{{ asset('plugins/bower_components/counterup/jquery.counterup.min.js') }}"></script>
<!--weather icon -->
<script src="{{ asset('plugins/bower_components/calendar/jquery-ui.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/fullcalendar.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/jquery.fullcalendar.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/locale-all.js') }}"></script>
{{-- <script src="{{ asset('js/event-calendar.js') }}"></script> --}}
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/Chart.min.js') }}"></script>
<script>
    var startDate = '';
    var endDate = '';

    function getLatestDate() {
        startDate = $('#start-date').val();
        if (startDate == '') {
            startDate = null;
        }


        startDate = encodeURIComponent(startDate);

    }

    $(function() {
        jQuery('#date-range').datepicker({
            toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true
        });
    });
    $('#reset-filters').click(function() {
        $('.select2').val('all');
        $('.select2').trigger('change');
        loadData();



    })
    $('#apply-filters').click(function() {
        loadData();
    });

    function loadData() {

        var startDate = $('#start-date').val();
        if (startDate == '') {
            startDate = null;
        }
        var endDate = $('#end-date').val();
        if (endDate == '') {
            endDate = null;
        }


        var status_id = $('#status_id').val();
        var agent_id = $('#agent_id').val();
        var source_id = $('#source_id').val();
        var client_id = $('#client_id').val();
        var name = $('#name').val();
        var jobtitle = $('#jobtitle').val();

        var url = '{{ route('salesdashboard') }}';

        $.easyAjax({
            url: url,
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                "startDate": startDate,
                "endDate": endDate,
                "status_id": status_id,
                "agent_id": agent_id,
                "source_id": source_id,
                "client_id": client_id,
                "name": name,
                "jobtitle": jobtitle,

            },
            success: function(response) {

                $('#newDataAppend').html('');
                $('#newDataAppend').html(response.view);
            }
        });




    }
</script>
<script>
    Highcharts.chart('container', {
        chart: {
            type: 'funnel'
        },
        title: {
            text: ''
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<p style="float:right;"><b>{point.name}</b> ({point.y:,.0f})<p>',
                    softConnector: false
                },
                center: ['10%', '80%'],
                top: '2%',
                neckWidth: '10%',
                neckHeight: '10%',
                width: '10%'
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: '',
            data: []        }],

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 600
                },
                chartOptions: {
                    plotOptions: {
                        series: {
                            dataLabels: {
                                inside: false
                            },
                            center: ['20%', '50%'],
                            width: '40%'
                        }
                    }
                }
            }]
        }
    });
</script>
@endpush