@extends('layouts.app')
@section('content')

<div class="row cstm_row_fix">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>QuitSure Marketing V2</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content form-horizontal">
                <div class="row">
                    <div class="col-md-12 col-xs-12 col-sm-12">
                        <div class="col-md-6 col-xs-12 col-sm-12">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-4 col-sm-12 col-xs-12">SignUp From Date</label>
                                <div class="col-md-8 col-sm-12 col-xs-12">
                                    <input type="date" name="filter_frmdate_signup" id="filter_frmdate_signup" class="form-control col-md-12 col-xs-12">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-sm-12">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-4 col-sm-12 col-xs-12">SignUp To Date</label>
                                <div class="col-md-8 col-sm-12 col-xs-12">
                                    <input type="date" name="filter_todate_signup" id="filter_todate_signup" class="form-control col-md-12 col-xs-12">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-xs-12 col-sm-12">
                        <div class="col-md-6 col-xs-12 col-sm-12">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-4 col-sm-12 col-xs-12">Subscription From Date</label>
                                <div class="col-md-8 col-sm-12 col-xs-12">
                                    <input type="date" name="filter_frmdate_subs" id="filter_frmdate_subs" class="form-control col-md-12 col-xs-12">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-sm-12">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-4 col-sm-12 col-xs-12">Subscription To Date</label>
                                <div class="col-md-8 col-sm-12 col-xs-12">
                                    <input type="date" name="filter_todate_subs" id="filter_todate_subs" class="form-control col-md-12 col-xs-12">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-xs-12 col-sm-12">
                        <div class="col-md-3 col-xs-3 col-sm-6">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-5 col-sm-12 col-xs-12">Signup Only</label>
                                <div class="col-md-7 col-sm-7 col-xs-12">
                                    <input type="checkbox" class="js-switch" name="signup_only" id="signup_only" />
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3 col-xs-3 col-sm-6">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-5 col-sm-12 col-xs-12">Latest Source</label>
                                <div class="col-md-7 col-sm-7 col-xs-12">
                                    <input type="checkbox" class="js-switch" name="latest_source" id="latest_source" />
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3 col-xs-3 col-sm-6">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-5 col-sm-12 col-xs-12">Country</label>
                                <div class="col-md-7 col-sm-12 col-xs-12">
                                    <select id="countryName_marketing" 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-md-3 col-xs-3 col-sm-6">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-5 col-sm-12 col-xs-12">Device Type</label>
                                <div class="col-md-7 col-sm-12 col-xs-12">
                                    <select id="filter_devicetype_marketing" name="filter_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>

                <div class="row">
                    <div class="col-md-12 col-xs-12 col-sm-12">
                        <div class="col-md-4 col-xs-4 col-sm-6">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-3 col-sm-12 col-xs-12">Source</label>
                                <div class="col-md-9 col-sm-12 col-xs-12">
                                    <div class="input-group">
                                        <select id="filter_source_marketing" name="filter_source" class="form-control">
                                            <option value="">Select Source</option>
                                            <option value="all" {{ old('filter_source') == 'all' ? 'selected' : '' }}>All Source</option>
                                            @foreach($sourceList as $row)
                                            <option value="{{ $row->vSource }}" {{ !empty($row->vSource) && old('filter_source') == $row->vSource ? 'selected' : '' }}>
                                                {{ $row->vSource }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <div class="input-group-btn">
                                            <button class="btn btn-success" id="btnSource_marketing">Next</button>
                                        </div>
                                        @error('filter_source')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-4 col-sm-6" id="divCampaign" style="display: none;">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-3 col-sm-12 col-xs-12">Campaign</label>
                                <div class="col-md-9 col-sm-12 col-xs-12">
                                    <div class="input-group">
                                        <select id="filter_campaign_marketing" name="filter_campaign" class="form-control">
                                            <option value="">All Campaign</option>
                                        </select>
                                        <div class="input-group-btn">
                                            <button class="btn btn-success" id="btnCampaign_marketing">Next</button>
                                        </div>
                                        @error('filter_campaign')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-4 col-sm-6" id="divMedium" style="display: none;">
                            <div class="item form-group col-md-12 col-xs-12 col-sm-12">
                                <label class="control-label col-md-3 col-sm-12 col-xs-12">Medium</label>
                                <div class="col-md-9 col-sm-12 col-xs-12">
                                    <div class="input-group">
                                        <select id="filter_medium_marketing" name="filter_medium" class="form-control">
                                            <option value="">All Medium</option>
                                        </select>
                                        <div class="input-group-btn">
                                            <button class="btn btn-success" id="btnMedium_marketing">Next</button>
                                        </div>
                                        @error('filter_medium')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-xs-12 col-sm-12" id="divBoxExcel" style="display: none;">
                            <div class="" style="width: 100%; display:flex; justify-content:flex-end;padding:1rem">
                                <button class="btn btn-success" id="downloadBoxExcelButton">Download Excel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="x_content" id="divFilterResult" style="display: none;">
                <div class="row top_tiles">
                    <div class="animated flipInY col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="tile-stats">
                            <div class="count" id="onlydownload"></div>
                            <h3>Only Downloads</h3>
                        </div>
                    </div>
                    <div class="animated flipInY col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="tile-stats">
                            <div class="icon"><i class="fa fa-user-plus"></i></div>
                            <div class="count" id="signups"></div>
                            <h3>Sign Ups</h3>
                        </div>
                    </div>
                    <div class="animated flipInY col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="tile-stats">
                            <div class="count" id="paidSubscription"></div>
                            <h3>Paid Subscriptions</h3>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content" id="ChartSubscriptionType">
                                <figure class="highcharts-figure">
                                    <div id="SubscriptionType"></div>
                                </figure>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content" id="ChartFreeSubscription">
                                <figure class="highcharts-figure">
                                    <div id="FreeSubscriptionType"></div>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content" id="ChartProgramWise">
                                <figure class="highcharts-figure">
                                    <div id="ProgramWisePaidUsers"></div>
                                </figure>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content" id="ChartSubScreen">
                                <figure class="highcharts-figure">
                                    <div id="SubScreenPaidUsers"></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="chartProductLabel">
                                <figure class="highcharts-figure">
                                    <div id="vProductIDContainer"></div>
                                </figure>
                            </div>
                        </div>
                    </div>

                    
                </div>



            </div>
            <div class="x_content" id="subFunnelFilterResult" style="display: none;">
                <div class="row">
                    <div class="col-md-12 col-xs-12 col-sm-12" id="divCampaignExcel" style="display: none;">
                        <div class="" style="width: 100%; display:flex; justify-content:flex-end;padding:1rem">
                            <button class="btn btn-success" id="downloadCamppaignExcelButton">Download Excel</button>
                        </div>
                    </div>
                    <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="container2"></div>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



@endsection
@include('marketing.marketingV2ChartJs')