@extends('admin.layouts.master')

@section('page_title')
    Report - Comparison
@endsection


@push('styles')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
@endpush

@section('page_content')
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h3>Report - Comparison</h3>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" method="POST">
                            @if(count($errors)>0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{$error}}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if (\Session::has('success'))
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{!! \Session::get('success') !!}</li>
                                    </ul>
                                </div>
                            @endif
                            @csrf

                            <div class="form-group">
                                <label for="type" class="col-sm-2 control-label form-label">Compare<span
                                            style="color: red;">*</span> </label>
                                <div class="col-sm-4">
                                    <select name="type" id="type"  onchange="valueChanged()" class="form-control">
                                        <option value="days">Days</option>
                                        <option value="weeks">Weeks</option>
                                        <option value="months">Months</option>
                                        <option value="years">Years</option>
                                    </select>
                                </div>
                                <label for="userType" class="col-sm-2 control-label form-label">Client Type<span
                                            style="color: red;">*</span> </label>
                                <div class="col-sm-4">
                                    <select name="userType" id="userType"  class="form-control" required>
                                        <option value="">Select One</option>
                                        <option value="reseller">Reseller</option>
                                        <option value="user">Client</option>
                                    </select>
                                </div>
                            </div>
                                <div class="form-group">
                                    <label for="organisation" class="col-sm-2 control-label form-label">User<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-4">
                                        <select name="user1" class="form-control" id="user1">
                                            <option value="">ALL*</option>
                                        </select>
                                    </div>

                                    <label for="organisation" class="col-sm-2 control-label form-label">User<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-4">
                                        <select name="user2" class="form-control" id="user2">
                                            <option value="">Select One</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="organisation" class="col-sm-2 control-label form-label">Sender Id<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <select name="sender1" class="form-control" id="sender1">
                                            <option value="">ALL*</option>
                                        </select>
                                    </div>

                                    <label for="organisation" class="col-sm-2 control-label form-label">Sender Id<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <select name="sender2" class="form-control" id="sender2">
                                            <option value="">ALL*</option>
                                        </select>
                                    </div>
                                </div>

                            {{--<div class="form-group">--}}
                                {{--<label for="client1" class="col-sm-2 control-label form-label">Client<span--}}
                                            {{--style="color: red;"></span> </label>--}}
                                {{--<div class="col-sm-4">--}}
                                    {{--<select name="client1" class="form-control">--}}
                                        {{--<option value="">--Select One--</option>--}}
                                        {{--@foreach($users as $user)--}}
                                            {{--<option value="{{$user->id}}">{{$user->full_name}}</option>--}}
                                        {{--@endforeach--}}
                                    {{--</select>--}}
                                    {{--<input type="text" class="form-control" name="month1" id="month1" placeholder="Eg. 12" value="{{old('month1')}}">--}}
                                {{--</div>--}}
                                {{--<label for="client2" class="col-sm-2 control-label form-label">Client<span--}}
                                            {{--style="color: red;"></span> </label>--}}
                                {{--<div class="col-sm-4">--}}
                                    {{--<select name="client2" class="form-control">--}}
                                        {{--<option value="">--Select One--</option>--}}
                                        {{--@foreach($users as $user)--}}
                                            {{--<option value="{{$user->id}}">{{$user->full_name}}</option>--}}
                                        {{--@endforeach--}}
                                    {{--</select>--}}
                                    {{--<input type="text" class="form-control" name="month2" id="month2" placeholder="Eg. 01" value="{{old('month2')}}">--}}
                                {{--</div>--}}
                            {{--</div>--}}
                            <div class="yearDiv">
                                <div class="form-group">
                                    <label for="year1" class="col-sm-2 control-label form-label">Year<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="year1" id="year1" placeholder="Eg. 2016" value="{{old('year1')}}">
                                    </div>
                                    <label for="year2" class="col-sm-2 control-label form-label">Year<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="year2" id="year2" placeholder="Eg. 2016" value="{{old('year2')}}">
                                    </div>
                                </div>
                            </div>

                            <div class="monthDiv">
                                <div class="form-group">
                                    <label for="month1" class="col-sm-2 control-label form-label">Month<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <select name="month1" class="form-control">
                                            <option value="1">January</option>
                                            <option value="2">February</option>
                                            <option value="3">March</option>
                                            <option value="4">April</option>
                                            <option value="5">May</option>
                                            <option value="6">June</option>
                                            <option value="7">July</option>
                                            <option value="8">August</option>
                                            <option value="9">September</option>
                                            <option value="10">October</option>
                                            <option value="11">November</option>
                                            <option value="12">December</option>
                                        </select>
                                        {{--<input type="text" class="form-control" name="month1" id="month1" placeholder="Eg. 12" value="{{old('month1')}}">--}}
                                    </div>
                                    <label for="month2" class="col-sm-2 control-label form-label">Month<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <select name="month2" class="form-control">
                                            <option value="1">January</option>
                                            <option value="2">February</option>
                                            <option value="3">March</option>
                                            <option value="4">April</option>
                                            <option value="5">May</option>
                                            <option value="6">June</option>
                                            <option value="7">July</option>
                                            <option value="8">August</option>
                                            <option value="9">September</option>
                                            <option value="10">October</option>
                                            <option value="11">November</option>
                                            <option value="12">December</option>
                                        </select>
                                        {{--<input type="text" class="form-control" name="month2" id="month2" placeholder="Eg. 01" value="{{old('month2')}}">--}}
                                    </div>
                                </div>
                            </div>

                            <div class="dayDiv" >
                                <div class="form-group">
                                    <label for="day1" class="col-sm-2 control-label form-label">Day<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="day1" id="day1" placeholder="Eg. 31" value="{{old('day1')}}">
                                    </div>
                                    <label for="day2" class="col-sm-2 control-label form-label">Day<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="day2" id="day2" placeholder="Eg. 15" value="{{old('day2')}}">
                                    </div>
                                </div>
                            </div>

                            <div class="weekDiv" style="display: none;">
                                <div class="form-group">
                                    <label for="week1" class="col-sm-2 control-label form-label">Week<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <select name="week1" class="form-control">
                                            <option value="1">Week 1</option>
                                            <option value="2">Week 2</option>
                                            <option value="3">Week 3</option>
                                            <option value="4">Week 4</option>
                                            <option value="5">Week 5</option>
                                        </select>
                                        {{--<input type="text" class="form-control" name="month1" id="month1" placeholder="Eg. 12" value="{{old('month1')}}">--}}
                                    </div>
                                    <label for="week2" class="col-sm-2 control-label form-label">Week<span
                                                style="color: red;"></span> </label>
                                    <div class="col-sm-4">
                                        <select name="week2" class="form-control">
                                            <option value="1">Week 1</option>
                                            <option value="2">Week 2</option>
                                            <option value="3">Week 3</option>
                                            <option value="4">Week 4</option>
                                            <option value="5">Week 5</option>
                                        </select>
                                        {{--<input type="text" class="form-control" name="month2" id="month2" placeholder="Eg. 01" value="{{old('month2')}}">--}}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-offset-6">
                                <button type="submit" id="saveBtn" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function resetSlide() {
        //Visa Payment
        $(".dayDiv").slideUp();
        $(".monthDiv").slideUp();
        $(".weekDiv").slideUp();
        $(".yearDiv").slideUp();
    }

    var valueChanged = function (e) {
        var myValue = $("#type").val();
        resetSlide();
        if (myValue == 'days') {
            $(".dayDiv").slideDown();
            $(".monthDiv").slideDown();
            $(".yearDiv").slideDown();
        } else if (myValue == 'weeks') {
            $(".weekDiv").slideDown();
            $(".monthDiv").slideDown();
            $(".yearDiv").slideDown();
        } else if(myValue == 'months')
        {
            $(".monthDiv").slideDown();
            $(".yearDiv").slideDown();
        } else if(myValue == 'years')
        {
            $(".yearDiv").slideDown();
        };
    }
</script>
<script>
    var Report = function () {
        return {
            init: function () {
                Report.misc();
            },

            misc: function () {
                $('#userType').on('change', function () {
                    $('#user1').html('<option value="">Select One</option>');
                    $('#user2').html('<option value="">Select One</option>');
                    if ($(this).val() != '') {
                        var type = $(this).val();
                        $.ajax({
                            url: '{{route('admin.get_admin_users')}}',
                            type: 'POST',
                            data: {
                                _token: token,
                                type: type
                            },
                            dataType: 'json',
                            success: function (data) {
                                var option = '';
                                for(var i = 0; i < data.length; i++) {
                                    option += '<option value="'+ data[i].id + '">' + data[i].username + '</option>';
                                }
                                $('#user1').append(option);
                                $('#user2').append(option);
                            }
                        });
                    }
                });

                $('#user1').on('change', function () {
                    $('#sender1').html('<option value="">ALL*</option>');
                    if ($(this).val() != '') {
                        var user = $(this).val();
                        $.ajax({
                            url: '{{route('admin.get_user_senders')}}',
                            type: 'POST',
                            data: {
                                _token: token,
                                userId: user
                            },
                            dataType: 'json',
                            success: function (data) {
                                var option = '';
                                for(var i = 0; i < data.length; i++) {
                                    option += '<option value="'+ data[i].sender + '">' + data[i].sender + '</option>';
                                }
                                $('#sender1').append(option);
                            }
                        });
                    }
                });

                $('#user2').on('change', function () {
                    $('#sender2').html('<option value="">ALL*</option>');
                    if ($(this).val() != '') {
                        var user = $(this).val();
                        $.ajax({
                            url: '{{route('admin.get_user_senders')}}',
                            type: 'POST',
                            data: {
                                _token: token,
                                 userId: user
                            },
                            dataType: 'json',
                            success: function (data) {
                                var option = '';
                                for(var i = 0; i < data.length; i++) {
                                    option += '<option value="'+ data[i].sender + '">' + data[i].sender + '</option>';
                                }
                                $('#sender2').append(option);
                            }
                        });
                    }
                });
            },

        }
    }();

    Report.init();
</script>
@endpush