@extends('master')

@section('title')
    <title>Response</title>
@endsection

@section('content')
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Response List</h1>
    <br>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="row">
                <div class="col-lg-6">
                    <span class="font-weight-bold text-primary">Response List</span>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <form method="POST" id="search-form" role="form">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="name">Team </label>
                            <input type="text" class="form-control mb-2" id="team" name="team" placeholder="Search by Team">
                        </div>
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="email">Region </label>
                            <input type="text" class="form-control mb-2" id="region" name="region" placeholder="Search by Region">
                        </div>
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="start_date">Start Date:</label>
                            <div class="input-group mb-2">
                                <input type="datetime-local" class="form-control" id="start_date" name="start_date" placeholder="Start Date">
                                <div class="input-group-append pointer clear-field">
                                    <div class="input-group-text"><i class="fas fa-times"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="end_date">End Date:</label>
                            <div class="input-group mb-2">
                                <input type="datetime-local" class="form-control" id="end_date" name="end_date" placeholder="End Date">
                                <div class="input-group-append pointer clear-field">
                                    <div class="input-group-text"><i class="fas fa-times"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary mt-4 mb-2">Search</button>
                            <button type="button" onclick="getexcelfile()" class="btn btn-primary mt-4 mb-2" >Export</button>
                        </div>
                    </div>
                </form>


                <form method="POST" id="export-form" action="{{url('/admin/responses/export')}}"role="form" target="_blank">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />

                    <input type="hidden" class="form-control mb-2" id="exteam" name="exteam" placeholder="Search by Team">
                    <input type="hidden" class="form-control mb-2" id="exregion" name="exregion" placeholder="Search by Region">
                    <input type="hidden" class="form-control" id="exstart_date" name="exstart_date" placeholder="Start Date">
                    <input type="hidden" class="form-control" id="exend_date" name="exend_date" placeholder="End Date">

                </form>

                <br>
                <table class="table table-bordered table-condensed" id="response_list" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>Surveyor</th>
                        <th>Team</th>
                        <th>Region</th>
                        <th>Location</th>
                        <th>Date Time</th>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Age</th>
                        <th>Race</th>
                        <th>Gender</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Postcode</th>
                        <th>Country</th>
                        <th>Brand</th>
                        <th>Variant</th>
                        <th>Question 1</th>
                        <th>Question 2A</th>
                        <th>Question 2B</th>
                        {{--<th>Token</th>--}}
                    </tr>
                    </thead>
                    <tfoot>
                    {{--<tr>--}}
                        {{--<th>Surveyor</th>--}}
                        {{--<th>Team</th>--}}
                        {{--<th>Region</th>--}}
                        {{--<th>Location</th>--}}
                        {{--<th>Date Time</th>--}}
                        {{--<th>Name</th>--}}
                        {{--<th>Mobile</th>--}}
                        {{--<th>Age</th>--}}
                        {{--<th>Gender</th>--}}
                        {{--<th>Brand</th>--}}
                        {{--<th>Variant</th>--}}
                        {{--<th>Question 1</th>--}}
                        {{--<th>Question 2</th>--}}
                        {{--<th>Question 3</th>--}}
                        {{--<th>Question 4</th>--}}
                        {{--<th>Token</th>--}}
                    {{--</tr>--}}
                    </tfoot>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function getexcelfile() {

           var region = $('input[name=region]').val();
           var team = $('input[name=team]').val();
           var start_date = $('input[name=start_date]').val();
           var end_date = $('input[name=end_date]').val();
           document.getElementById("exregion").value = region;
           document.getElementById("exteam").value = team;
           document.getElementById("exstart_date").value = start_date;
           document.getElementById("exend_date").value = end_date;
           $('#export-form').submit();
        }

    </script>
    <script>
        var total_questions = {{$total_questions}}
            let responseTable = $('#response_list').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ajax: {
                url: '{{ url('/admin/responses/index_data')}}',
                type: "POST",
                data: function (d) {
                    //form request data
                    d.region = $('input[name=region]').val();
                    d.team = $('input[name=team]').val();
                    d.start_date = $('input[name=start_date]').val();
                    d.end_date = $('input[name=end_date]').val();
                }
            },
            columns: [
                {data: 'surveyor_name', name: 'surveyor_name', width: '150px' },
                {data: 'team', name: 'team',  "width": "20%"},
                {data: 'region', name: 'region'},
                {data: 'location', name: 'location'},
                {data: 'created_at', name: 'created_at'},
                {data: 'name', name: 'name'},
                {data: 'mobile', name: 'mobile'},
                {data: 'age', name: 'age' , "width": "20%"},
                {data: 'race', name: 'race' , "width": "20%"},
                {data: 'gender', name: 'gender'},
                {data: 'address', name: 'address'},
                {data: 'city', name: 'city'},
                {data: 'state', name: 'state'},
                {data: 'postcode', name: 'postcode'},
                {data: 'country', name: 'country'},
                {data: 'brand', name: 'brand'},
                {data: 'variant', name: 'variant'},
                {data: 'question_1', name: 'question_1'},
                {data: 'question_2a', name: 'question_2a'},
                {data: 'question_2b', name: 'question_2b'},
//                {data: 'token', name: 'token'},
            ]
        });

        //trigger ajax call and draw
        $('#search-form').on('submit', function (e) {
            responseTable.draw();
            e.preventDefault();
        });
    </script>
@endsection