@extends('layout.app')

@section('content')

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title" style="color:#115548;"><i class="fa fa-search"></i> Select Time
                            </h3>
                        </div>
                        <div class="card-body">

                            <form action="" id="search">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                                From Date
                                            </label>
                                            <div class="input-group date" id="searchFrom" data-target-input="nearest">
                                                <input type="text" name="from_date" value="{{$start->format('m/d/y')}}"
                                                    class="form-control datetimepicker-input input-group-append"
                                                    data-toggle="datetimepicker" data-target="#searchFrom"
                                                    autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="block text-gray-700 text-sm font-bold mb-2" for="to_date">
                                                To Date
                                            </label>
                                            <div class="input-group date" id="searchTo" data-target-input="nearest">
                                                <input type="text" name="to_date" value="{{$end->format('m/d/y')}}"
                                                    class="form-control datetimepicker-input input-group-append"
                                                    data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group float-right mt-2">
                                            <button @click="search" class="btn btn-primary" type="submit"
                                                    id="searchBtn"><i class="fa fa-search"></i> Search</button>
                                            <button class="btn btn-info" type="reset" id="reset">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <br>
                            <div class="col-md-12" id="result">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('js')

@endsection
@push('script')
@endpush

@section('ajax')
    <script type="text/javascript">

        $(document).ready(function() {
            $('#reset').click(function() {
                $('#result').html('');
            });
            $('#searchBtn').on('click', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'get',
                    url: '{{ route('marketingCustomerSearch') }}',
                    data: $('#search').serialize(),
                    success: function(result) {
                        console.log(result);
                        $('#result').html(result);
                    }
                });
            });

        });
    </script>

@endsection