@section('head')
<link href="{{ url('css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ url('css/buttons.dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('body_end')
<script src="{{ url('js/jquery.js') }}"></script>  
<script src="{{ url('js/jquery.validate.js') }}"></script>
<script src="{{ url('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ url('js/dataTables.buttons.min.js') }}"></script>
<script src="{{ url('js/jszip.min.js') }}"></script>
<script src="{{ url('js/pdfmake.min.js') }}"></script>
<script src="{{ url('js/vfs_fonts.js') }}"></script>
<script src="{{ url('js/buttons.html5.min.js') }}"></script>
<script src="{{ url('js/buttons.print.min.js') }}"></script>
<script src="{{ url('js/flowbite.bundle.js') }}"></script>
<script src="{{ url('js/datepicker.bundle.js') }}"></script>
<script src="{{ url('js/moment.min.js') }}"></script>

<script type="text/javascript">

    var minDate, maxDate;

    $(function () {

        var submitButton = $('button[type="submit"]');

        function disableButton() {
            submitButton.prop("disabled", true).removeClass("bg-indigo-600 hover:bg-indigo-700").addClass('bg-gray-800 hover:bg-gray-800');
        }

        function enableButton() {
            submitButton.prop("disabled", false).removeClass("bg-gray-800 hover:bg-gray-800").addClass('bg-indigo-600 hover:bg-indigo-700');
        }

        var table = $('.yajra-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('messages.list') }}",
            language: {
                url: "{{ url('pt_pt.json') }}"
            },
            columns: [
                {data: 'id_link', name: 'id'},
                {data: 'mail_from', name: 'mail_from'},
                {data: 'rcpt_to', name: 'rcpt_to'},
                {data: 'subject', name: 'subject'},
                {data: 'status_text', name: 'status'},
                {data: 'date', name: 'timestamp'},
                {data: 'timeago', name: 'timeago'}
            ],
            order: [[ 0, "desc" ]],
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });

        disableButton();

        $('#filter-form').on('submit', function(event) {
            event.preventDefault();
            let formFields = $(this).serializeArray();

            minDate = $("#min").val();
            maxDate = $("#max").val();

            if(minDate && maxDate)
            {
                minDate = moment(minDate + " 00:00:00", "DD/MM/YYYY HH:mm:ss").unix();
                maxDate = moment(maxDate + " 23:59:59", "DD/MM/YYYY HH:mm:ss").unix();
                table.column(5).search(minDate + "," + maxDate, false, false, true);
            }

            disableButton();

            $.each(formFields, function(index, object) {
                if(object.name == "min" | object.name == "max") {
                    return;
                }
                if(table.column(index).search() !== object.value) {
                    table
                        .column(index)
                        .search( object.value );
                }
            });

            table.draw();
        });

        table.on('draw', function () {
            enableButton();
        });

    });
</script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Mensagens') }}
        </h2>
    </x-slot>


    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <div class="mt-5 mb-4 md:col-span-2">
                        <form id="filter-form" action="#" method="POST">
                            <div class="shadow overflow-hidden sm:rounded-md">
                            <div class="px-4 py-5 bg-white sm:p-6">
                                <h2 class="text-xl font-semibold leading-8 text-gray-900 pb-3">Filtro</h2>
                                <div class="grid grid-cols-6 gap-6">
                                <div class="col-span-6 sm:col-span-6 lg:col-span-2">
                                    <label for="id" class="block text-sm font-medium text-gray-700">#</label>
                                    <input type="number" name="id" id="id" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>

                                <div class="col-span-6 sm:col-span-6 lg:col-span-2">
                                    <label for="mail_from" class="block text-sm font-medium text-gray-700">De</label>
                                    <input type="text" name="mail_from" id="mail_from" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>

                                <div class="col-span-6 sm:col-span-6 lg:col-span-2">
                                    <label for="rcpt_to" class="block text-sm font-medium text-gray-700">Para</label>
                                    <input type="text" name="rcpt_to" id="rcpt_to" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>

                                <div class="col-span-6 sm:col-span-3">
                                    <label for="subject" class="block text-sm font-medium text-gray-700">Assunto</label>
                                    <input type="text" name="subject" id="subject" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>

                                <div class="col-span-6 sm:col-span-3">
                                    <label for="status" class="block text-sm font-medium text-gray-700">Estado</label>
                                    <select id="status" name="status" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                        <option value="" selected>-</option>
                                        <option value="Sent">{{ __('Sent') }}</option>
                                        <option value="SoftFail">{{ __('SoftFail') }}</option>
                                        <option value="HardFail">{{ __('HardFail') }}</option>
                                        <option value="Held">{{ __('Held') }}</option>
                                        <option value="Processed">{{ __('Processed') }}</option>
                                        <option value="Bounced">{{ __('Bounced') }}</option>
                                    </select>
                                </div>

                                <div date-rangepicker  datepicker-format="dd/mm/yyyy" class="col-span-6 sm:col-span-3">
                                    <div class="relative col-span-6 sm:col-span-3">
                                        <label for="min" class="block text-sm font-medium text-gray-700">Data Inicio</label>
                                        <input id="min" name="min" type="text" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Selecionar Data Inicio">
                                    </div>
                                    <div class="relative col-span-6 sm:col-span-3 pt-4">
                                        <label for="max" class="block text-sm font-medium text-gray-700">Data Fim</label>
                                        <input id="max" name="max" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Selecionar Data Fim">
                                    </div>
                                </div>
                                
                                </div>
                            </div>
                            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                Filtrar
                                </button>
                            </div>
                            </div>
                        </form>
                    </div>
                    <table class="table table-bordered yajra-datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>De</th>
                                <th>Para</th>
                                <th>Assunto</th>
                                <th>Estado</th>
                                <th>Data</th>
                                <th>Efetuado</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>