@extends('layouts.main')
@section('title')
    Fine Copies
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Account Managements</a> <span class="divider">/</span></li>
{{--        <li><a href="">Cash Books</a> <span class="divider">/</span></li>--}}
        <li class="active"> Fine Copies</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
        <button class="btn" onclick="openAdvancedSearch('demurrage_report_filter_options')">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
    </li>
@endsection
@section('contentinner')
    <div id="demurrage_report_filter_options" class="sidenav">
        <a href="javascript:void(0)" class="closebtn"
           onclick="closeAdvancedSearch('demurrage_report_filter_options')">&times;</a>

        <div style="margin-bottom: 8px">
            <form target="_blank" class="form-inline form-filter" method="get"
                  action="{{route('fine_copies.index.print')}}">

                <label class="control-label" for="Category">Truck</label>
                <select name="truck_id[]" width="100%" id="truck_id" class="searchable_select" multiple>
                    <option value="">ALL</option>
                    @foreach($trucks as $truck)
                        <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Client</label>
                <select name="client_id" width="100%" id="client_id" class="searchable_select">
                    <option value="">ALL</option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Shipping Line</label>
                <select name="shipping_line_id" width="100%" id="shipping_line_id" class="searchable_select">
                    <option value="">ALL</option>
                    @foreach($shipping_lines as $shipping_line)
                        <option value="{{$shipping_line->id}}">{{$shipping_line->name}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Date From</label>
                <input type="text" name="date_from" id="starting_date" class="input-large date_pickers" autocomplete="off">
                <label class="control-label" for="Category">Date to</label>
                <input type="text" name="date_to" id="end_date" class="input-large date_pickers" autocomplete="off">
                {{--<label class="control-label" for="Category">Status</label>--}}
                {{--<select name="select" width="100%" id="status" class="searchable_select">--}}
                {{--<option value="">ALL</option>--}}
                {{--<option value="1">LOCATED</option>--}}
                {{--<option value="0">UNALLOCATED</option>--}}
                {{--</select>--}}
                {{--<label class="control-label" for="Category">Vehicle Type</label>--}}
                {{--<select name="select" width="100%" id="vehicle_type" class="searchable_select">--}}
                {{--<option value="">ALL</option>--}}
                {{--<option value="DRY CARGO">DRY CARGO</option>--}}
                {{--<option value="TANKERS">TANKERS</option>--}}
                {{--</select>--}}
                <button class="btn" style="" id="filter_demurrage_report">FILTER</button>
                <input class="btn" id="print_permits" type="submit" value="PRINT">
            </form>
        </div>
    </div>

    <table class="table table-bordered table-condensed logistics_table" id="job_card_damage_detentions_list">
        <thead>
        <tr>
            <th class=" nosort" style="width: 05%"><input type="checkbox" class="checkall"/></th>
            <th style="width: 5%">ID</th>
            <th style="width: 15%">Created By</th>
            <th style="width: 20%">To be Paid By</th>
            <th style="width: 10%">Amount</th>
            <th style="width: 40%">Description</th>
            <th style="width: 05%"></th>
        </tr>
        </thead>
    </table>
    <form method="post" id="attachment_form" enctype="multipart/form-data" style="display:none">
        <input type="file" name="file">
    </form>
    <script>
        jQuery('.date_pickers').datepicker({ dateFormat: 'dd-mm-yy' }).val();
        let oTable = jQuery('#job_card_damage_detentions_list').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No any defect records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('fine_copies.index.datatable')}}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[1,'asc']],
                "columns": [
                    {data: 'checkbox'},
                    {data: 'id'},
                    {"class": "link", data: 'creator'},
                    {"class": "link", data: 'payer'},
                    {"class": "link", data: 'amount'},
                    {"class": "link", data: 'descriptions'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

        var attachment_form = $('#attachment_form');
        var file_field = attachment_form.find('input:file');
        function uploadPrintout(url) {
            attachment_form.attr('action', url);
            // file_field.trigger('click');
            // file_field.change(function () {
            //     if (file_field.val()) {
            //         $.ajax({
            //             url: attachment_form.attr('action'),
            //             data: new FormData($("#attachment_form")[0]),
            //             dataType: 'json',
            //             async: false,
            //             type: 'post',
            //             processData: false,
            //             contentType: false,
            //             beforeSend: function () {
            //                 startSpinner()
            //             },
            //             success: function (data) {
            //                 onAjaxSuccess(data);
            //                 if (data.state == 'Done') mainDataTable.draw();
            //             },
            //             error: function (xhr, textStatus, error) {
            //                 onAjaxError(xhr, textStatus, error)
            //             },
            //             complete: function () {
            //                 stopSpinner();
            //                 file_field.val(null)
            //             }
            //         });
            //     }
            // });
        }

    </script>
@stop