@extends('reseller.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>
                            </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>
@endpush