@extends('layouts.app')
@section('content')
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>User Funnel</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content user_funnel_set form-horizontal">
                <div class="col-md-12 col-xs-12 col-sm-12">
                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">From Date</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <input type="date" name="frmDate" id="frmDate" class="form-control col-md-12 col-xs-12">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">To Date</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <input type="date" name="toDate" id="toDate" class="form-control col-md-12 col-xs-12">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Device Type</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="devicetype" name="devicetype" class="form-control col-md-12 col-xs-12">
                                    <option value="">All Device</option>
                                    <option value="android">Android</option>
                                    <option value="ios">iOS</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-xs-12 col-sm-12">
                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Gender Type</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="vGender" name="vGender" class="form-control col-md-12 col-xs-12">
                                    <option value="All">All Gender</option>
                                    @foreach($genders as $gen)
                                    <option value="{{ $gen->vGender }}">
                                        {{ $gen->vGender ?? 'Null' }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Smoker Type</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="smokerType" name="smokerType" class="form-control col-md-12 col-xs-12">
                                    <option value="0">All Smoker</option>
                                    <option value="1">Occasional</option>
                                    <option value="2">Casual</option>
                                    <option value="3"> Light</option>
                                    <option value="4"> Moderate</option>
                                    <option value="5"> Heavy</option>
                                    <option value="6"> Very Heavy</option>
                                    <option value="7"> Null</option>
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Program Type</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="programType" name="programType" class="form-control col-md-12 col-xs-12">
                                    <option value="">All Program</option>
                                    @foreach($programs as $program)
                                    <option value="{{ $program->iProgramID }}">{{ $program->vAdminName }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-12 col-xs-12 col-sm-12">
                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">User Type</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="userType" name="userType" class="form-control col-md-12 col-xs-12">
                                    <option value="">All User</option>
                                    <option value="1">Odd</option>
                                    <option value="0">Even</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-">
                        <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Country</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select id="countryName" name="countryName" class="form-control col-md-12 col-xs-12">
                                    <option value="">All Country</option>
                                    @foreach($countries as $country)
                                    <option value="{{ $country->vCountry }}">{{ $country->vCountry }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-">
                        <button class="btn btn-success" id="btnUserFunnel">Get Data</button>
                        <button class="btn btn-primary btnRefresh">Cancel</button>
                    </div>
                </div>
            </div>

            <div class="x_content" id="divFilterResult" style="display: none;">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content" id="UserBarChartDiv">
                                <figure class="highcharts-figure">
                                    <div id="container1"></div>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="col-md-4 col-xs-12 col-sm-5"></div>
                            <div class="col-md-4 col-xs-12 col-sm-5"></div>
                            <div class="x_content" id="SubscriptionBarChartDiv">
                                <figure class="highcharts-figure">
                                    <div id="container2"></div>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Third Row-->
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content" id="TopCountriesChartDiv">
                                <figure class="highcharts-figure">
                                    <div id="container10"></div>
                                </figure>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content" id="TopCountriesSubsChartDiv">
                                <figure class="highcharts-figure">
                                    <div id="container11"></div>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_content" id="VSubScreenPieChart">
                            <figure class="highcharts-figure">
                                <div id="VSubScreenContainer"></div>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_content" id="FreeSubscriptionTypeChartDiv">
                            <figure class="highcharts-figure">
                                <div id="container12"></div>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    window.funnelGetResultUrl = "{{ route('user.funnel.getResult') }}";
</script>
@vite('resources/js/userFunnel.js')

@endpush