@extends('reseller.layouts.master')

@section('page_title')
    Report - Invoice
@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>{{$user->username}} - Invoice</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="from_date" class="col-sm-3 control-label form-label">Report From<span
                                            style="color: red;">*</span> </label>
                                <div class="col-sm-6">
                                    <input class="form-control" name="from_date" id="from_date"  data-date-autoclose="true" data-date-format="dd-M-yyyy" data-provide="datepicker-inline"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="to_date" class="col-sm-3 control-label form-label">Report To<span
                                            style="color: red;">*</span> </label>
                                <div class="col-sm-6">
                                    <input class="form-control" name="to_date" id="to_date"  data-date-autoclose="true" data-date-format="dd-M-yyyy" data-provide="datepicker-inline"/>
                                </div>
                            </div>

                                <div class="form-group">
                                    <label for="type" class="col-sm-3 control-label form-label">Country<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-6">
                                        <select name="country" id="country"  class="form-control">
                                            <option value="">Select country</option>
                                            @foreach($countries as $country)
                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="operator" class="col-sm-3 control-label form-label">Operator<span
                                                style="color: red;">*</span> </label>
                                    <div class="col-sm-6">
                                        <select name="operator[]" id="operator"  class="form-control" multiple>
                                            {{--<option value="">Select Operator</option>--}}

                                        </select>
                                    </div>
                                    <div class="col-sm-1" id="branchloader" style="margin-top: 7px; color: green; margin-left: -18px; display: none"><img style="width: 100%; height: 100%" src="{{asset('img/loading1.gif')}}" /></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 loadOperators(id) {
            if(id!='') {
                $('#branchloader').show();
                var url = route + '/get-operators/' + id;
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {},
                    async: false,
                    success: function (response, status, xhr) {
                       $('#operator').html('');
                        $.each(response, function (key, value) {
                            $('#operator').append($('<option>', {
                                value: value.id,
                                text: value.nice_name
                            }));
                        });
                        @if(old('operator'))
                            $('#operator').val("{{old('operator')}}");
                        @endif
                        $('#branchloader').hide();
                    },
                    error: function () {
                        $('#branchloader').hide();
                    }

                });
            }
        }

        $('#country').change(function(){
            var id = $(this).val();
            loadOperators(id);
        });
    </script>
@endpush