@extends('layouts.app')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <div class="container">
        <!-- for all the list screen reduce padding for rows which are happening because of action ul li I've already reduced it a bit need to confirm with curtis -->
        <!-- To do : added credentials already present fields in line with credential header but need to get the counts-->
        <div class="row margin-top-10">
            <div class="col-md-10 push-top" id="editorData">
                <table class="table table-striped tableStyle no-bottom dataTables dt-responsive" >
                    <thead>
                        <tr>
                            <th>
                                <span class="nowrap">Status <a id="popoverData" href="#"
                                        data-content="<i class='icon fa fa-upload status blue'></i> - Uploaded by Client<br /><i class='icon fa fa-download status lightblue'></i> - Downloaded by Editor<br /><i class='icon fa fa-cloud-upload status orange'></i> - Uploaded by Editor<br /><i class='icon fa fa-cloud-download status lightorange'></i> - Downloaded by Client<br /><i class='icon fa fa-ban status lightorange'></i> - Rejected by Editor"
                                        rel="popover" data-placement="bottom" data-original-title="Legend"
                                        data-trigger="hover"><i class="icon fa fa-question-circle"></i></a></span>
                            </th>
                            <th>
                                Filename
                            </th>
                            <th>
                                Client
                            </th>
                            <th>
                                Submitted Date
                            </th>
                            <th>
                                Due Date
                            </th>
                            <th>
                                Comments
                            </th>
                            <th class="no_sort">
                                Options
                            </th>
                        </tr>
                    </thead>

                </table>
            </div>
            <div class="col-md-2">
                <form name="filterDocument" action="#" method="POST" autocomplete="off">
                    <div class="col-md-12">
                        <span><strong>Status</strong> <a id="helpStatus" href="#"
                                data-content="<strong>New Jobs</strong> - Uploaded by Client<br /><strong>In Progress</strong> - Downloaded by Editor<br /><strong>Completed</strong> - ( Uploaded by Editor, Downloaded by Client )<br /><strong>Rejected</strong> - Rejected by Editor"
                                data-toggle="popover" data-placement="bottom" data-original-title="Status Help"
                                data-trigger="hover"><i class="icon fa fa-question-circle"></i></a></span>
                        <p>
                            <select multiple="multiple" name="jobStatus[]" id="jobStatus" class="form-control">
                                <option value="Any Status"
                                    name="any_jobs">Any Status
                                </option>
                                <option value="New Jobs" name="new_jobs"
                                    >New Jobs</option>
                                <option value="In Progress" name="in_progress"
                                    >In Progress</option>
                                <option value="Completed" name="completed"
                                    >Completed</option>
                                <option value="Rejected" name="rejected"
                                    >Rejected</option>
                            </select>
                        </p>
                    </div>

                    <div class="col-md-12">
                        <span><strong>Submitted From</strong></span>
                        <div class="input-group date" id="submitted_datepicker_from">
                            <input type="text" id="submitted_from" name="submitted_from" placeholder="mm/dd/yyyy"
                                class="form-control" maxlength="100" data-msg-required="Please enter File Name."
                                value="">
                            <span class="input-group-append">
                                {{-- <span class="input-group-text bg-light d-block">
                                            <i class="fa fa-calendar"></i>
                                        </span> --}}
                            </span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <span><strong>Submitted To</strong></span>
                        <div class="input-group date" id="submitted_datepicker_to">
                            <input type="text" id="submitted_to" name="submitted_to" placeholder="mm/dd/yyyy"
                                class="form-control" maxlength="100" data-msg-required="Please enter File Name."
                                value="">
                            <span class="input-group-append">
                                {{-- <span class="input-group-text bg-light d-block">
                                        <i class="fa fa-calendar"></i>
                                    </span> --}}
                            </span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <span><strong>Due From</strong></span>
                        <div class="input-group date" id="due_datepicker_from">
                            <input type="text" id="due_from" name="due_from" class="form-control"
                                placeholder="mm/dd/yyyy" maxlength="100" data-msg-required="Please enter File Name."
                                value="">
                            <span class="input-group-append">
                                {{-- <span class="input-group-text bg-light d-block">
                                            <i class="fa fa-calendar"></i>
                                        </span> --}}
                            </span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <span><strong>Due To</strong></span>
                        <div class="input-group date" id="due_datepicker_to">
                            <input type="text" id="due_to" name="due_to" class="form-control"
                                placeholder="mm/dd/yyyy" maxlength="100" data-msg-required="Please enter File Name."
                                value="">
                            <span class="input-group-append">
                                {{-- <span class="input-group-text bg-light d-block">
                                                <i class="fa fa-calendar"></i>
                                            </span> --}}
                            </span>
                        </div>
                        <p>
                            <span class="ajax hide"><i class="icon fa fa-spinner icon-2x icon-spin"></i>
                                Processing.</span>
                            <button type="submit" class="btn knowmad_btn_blue knowmad_btn" style="width:95px"
                                id="apply_filter">Search</button>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--container-->
@endsection
@push('footer_js')
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#submitted_datepicker_from').datepicker();
        });

        $(function() {
            $('#submitted_datepicker_to').datepicker();
        });

        $(function() {
            $('#due_datepicker_from').datepicker();
        });

        $(function() {
            $('#due_datepicker_to').datepicker();
        });
    </script>
    <script>
        $(function() {
            var oTable = $('.dataTables').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: '{!! route('ajax.get.freesamples') !!}',
                    data: function(d) {
                        if ($('#submitted_from').val().length > 0) {
                            d.submitted_from = $('#submitted_from').val();
                        }

                        if ($('#submitted_to').val().length > 0) {
                            d.submitted_to = $('#submitted_to').val();
                        }

                        if ($('#due_from').val().length > 0) {
                            d.due_from = $('#due_from').val();
                        }

                        if ($('#due_to').val().length > 0) {
                            d.due_to = $('#due_to').val();
                        }

                        if ($('#jobStatus').val().length > 0) {
                            d.status = $('#jobStatus').val();
                        }


                    }
                },
                columns: [{
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'filename',
                        name: 'filename',
                        orderable: false,
                        orderData: 'filename',
                        searchable: false
                    },
                    {
                        data: 'client',
                        name: 'client',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'document_revisions.created_at',
                        orderable: true
                    },
                    {
                        data: 'estimated_date',
                        name: 'documents.estimated_date',
                        orderable: true
                    },
                    {
                        data: 'message',
                        name: 'message',
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('form[name="filterDocument"]').on('submit', function(e) {
                oTable.draw();
                e.preventDefault();
            });

            $('.delete-btn').on('click', function(e) {
                e.preventDefault();
                confirm('Are you sure you want to delete?');
            })
        });
    </script>
@endpush