{{--{!! Form::open(array('class' => 'form-horizontal stdform','id'=>'truck_loading_cargo')) !!}--}}
<form class="form-horizontal stdform" action="{{route('loading_orders.truck_loading.store')}}" method="post">
<div class="modal-header" style="background: #50A6C6">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4>CREATE TRIP</h4>
</div>
<div class="modal-body">
    <div class="tabs">
        <ul class="tabs">
            <li><a href="#tabs-1">Loading Details </a></li>
            <li><a href="#tabs-2">Documents</a></li>
        </ul>
        <div id="tabs-1">
            <input type="hidden" name="type" value="route"/>
            <input type="hidden" name="loading_order_item_id" value="{{$loading_order_vehicle->loadingOrderItem->id}}"/>
            <input class="form-control span12 " type="hidden" name="exchange_rate" autocomplete="off">
            <input class="form-control span12 " type="hidden" name="vehicle_id" value="{{$loading_order_vehicle->vehicle->id}}">
            <input class="form-control span12 " type="hidden" name="trailer_id" value="{{$loading_order_vehicle->trailer->id}}">
            <input class="form-control span12 " type="hidden" name="driver_id" value="{{$loading_order_vehicle->driver->employee_id}}">

            <div class="row-fluid">
                <div class="span4">
                    <div class="par form-group">
                        <label class="span4 control-label" for="Truck">Truck</label>

                        <div class="span8">
                            {{$loading_order_vehicle->vehicle->registration_number}}
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="par form-group">
                        <label class="span4 control-label" for="Trailer">Trailer</label>

                        <div class="span8">
                            {{$loading_order_vehicle->trailer->registration_number}}
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="par form-group">
                        <label class="span4 control-label" for="Driver">Driver</label>

                        <div class="span8">{{$loading_order_vehicle->driver->full_name}}</div>
                    </div>
                </div>
            </div>
            <div class="row-fluid ">
                <div class="span4">
                    <div class="par form-group">
                        <label class="span4 control-label" for="depature_date">Departure Date</label>

                        <div class="span8">
                         <input class="span12 " name="departure_date" data-format="dd/MM/yyyy hh:mm:ss"
                                type="text" autocomplete="off">

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


                <div class="span4">
                    <div class="par form-group">
                        <label class="span4 control-label" for="route">Route</label>

                        <div class="span8">
                            <select name="route_id" class="laoding_order_serchable_select single_trip_route_id"
                                    id="single_trip_route_id" required
                                    style="width: 100%">
                                <option value=""></option>
                                @foreach($routes as $route)
                                    <option value="{{$route->id}}">{{$route->route}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <br>

            <div class="clearfix"></div>
            <div class="clearfix"></div>
            <h4 class="widgettitle">Cargo Detail</h4>

            <div class="row-fluid">
                <div class="span12">
                    <div id="containers">
                        <table class="table table-condensed container_detail_table" style="width: 100%;">
                            <thead>
                            <tr>
                                <th>D.O.N(INT)</th>
                                <th>REF No.</th>
                                <th>LTI No</th>
                                <th>Project No</th>
                                <th>BATCH No</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="text" name="delivery_order_number[]" class="span12" autocomplete="off"/></td>
                                <td><input type="text" name="file_number[]" class="span12" autocomplete="off"/></td>
                                <td><input type="text" name="lti_number[]" class="span12" autocomplete="off"/></td>
                                <td><input type="text" name="project_number[]" class="span12" autocomplete="off"/></td>
                                <td><input type="text" name="batch_number[]" class="span12" autocomplete="off"/></td>
                            </tr>
                            </tbody>
                            <thead>
                            <tr>
                                <th>Shipping Line</th>
                                <th>Cont. No.</th>
                                <th>Cont. Size</th>
                                <th>Cont. Type</th>
                                <th>Product</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <input type="hidden" name="cargo_type[]" value="CONTAINERS"/>
                                <input type="hidden" name="destination_id[]" value="{{$loading_order_vehicle->loadingOrderItem->loadingOrderDestination->city_id}}"/>

                                <td>
                                    <select class="laoding_order_serchable_select"
                                            data-placeholder="Choose a Cargo Type..."
                                            name="shipping_line[]" style="width: 100%" required>
                                        <option value="">Shipping Line</option>
                                        @foreach($shipping_lines as $shipping_line)
                                            <option value="{{$shipping_line->id}}">{{$shipping_line->name}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="span12 container_number" name="container[]"
                                           autocomplete="off"/>

                                </td>
                                <td>
                                    <select class="laoding_order_serchable_select"
                                            data-placeholder="Choose a Cargo Type..."
                                            name="container_size[]" style="width: 100%" required>
                                        <option value="20Ft">20Ft</option>
                                        <option value="40Ft">40Ft</option>
                                    </select>
                                </td>
                                <td>
                                    <select class="laoding_order_serchable_select"
                                            data-placeholder="Choose a Cargo Type..."
                                            name="container_type[]" style="width: 100%" required>
                                        <option value="OPEN_TOP">OPEN TOP</option>
                                        <option value="CLOSED_TOP">CLOSED TOP</option>
                                    </select>
                                </td>
                                <td>
                                    <select class="laoding_order_serchable_select"
                                            data-placeholder="Choose a Product..."
                                            name="transit_product_id[]" style="width: 100%" required>
                                        <option value=""></option>
                                        @foreach($transit_products as $transit_product)
                                            <option value="{{$transit_product->id}}">{{$transit_product->name}}</option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            </tbody>
                            <thead>
                            <tr>
                                <th>Client</th>
                                <th>Consignee</th>
                                <th>Consignor</th>
                                <th>Loading Date</th>
                                <th>T<sub>1</sub> Date</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <select class="laoding_order_serchable_select" data-placeholder="Choose a Client..."
                                            name="client_id[]" style="width: 100%" required>
                                        <option value=""></option>
                                        @foreach($clients as $client)
                                            <option value="{{$client->id}}"
                                                    @if($client_id == $client->id) selected @endif>{{$client->name}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select class="laoding_order_serchable_select"
                                            data-placeholder="Choose a Consignee..."
                                            name="consignee_id[]" style="width: 100%" required>
                                        <option value=""></option>
                                        @foreach($consignment_possessors as $consignment_possessor)
                                            <option value="{{$consignment_possessor->id}}">{{$consignment_possessor->name}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select class="laoding_order_serchable_select"
                                            data-placeholder="Choose a Consignor..."
                                            name="consignor_id[]" style="width: 100%" required>
                                        <option value=""></option>
                                        @foreach($consignment_possessors as $consignment_possessor)
                                            <option value="{{$consignment_possessor->id}}">{{$consignment_possessor->name}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td><input type="text" class="span12" name="loading_date[]" required autocomplete="off"/></td>
                                <td> <input type="text" name="t1_date[]" class="span12" autocomplete="off"/></td>

                            </tr>
                            </tbody>
                            <thead>
                            <tr>
                                <th>Quantity</th>
                                <th>Tonnage</th>
                                <th colspan="3">Cargo Description</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>

                                <td><input type="text" name="quantity[]" class="span12" required autocomplete="off"/></td>
                                <td><input type="text" name="tonnage[]" class="span12" required autocomplete="off"/></td>
                                <td colspan="3"><textarea name="cargo[]" class="span12" rows="1"></textarea></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>
        <div id="tabs-2">

            <table class="table table-bordered" style="width: 100%">
                <tbody>
                <tr>
                    <td>
                        <table class="documents table table-bordered">
                            @foreach(\App\Model\Document::whereIn('type',['ALL',
                            $loading_order_vehicle->loadingOrderItem->cargo_type])
                            ->whereIn('period',['TRIP_CREATION','ANY'])
                            ->whereNotIn('id',$loading_order_vehicle->loadingOrderItem->generalDocuments()->lists('document_id'))
                            ->get() as $document)
                                <div class="row-fluid document">
                                    <div class="span3">
                                        <div class="par form-group">
                                            <label class="span12 control-label"
                                                   style="text-align: left">{{$document->name}}</label>
                                        </div>
                                    </div>
                                    <form class="stdform attach_documents" id=""
                                          action="#" method="POST"
                                          enctype="multipart/form-data">
                                        <div class="span9 hide progress_bar">
                                            <div class="span11">
                                                {{--<div class="progress">--}}
                                                {{--<div class="progress-bar progress-bar-success progress-bar-striped active"--}}
                                                {{--role="progressbar"--}}
                                                {{--aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"--}}
                                                {{--style="width:0%"></div>--}}
                                                {{--</div>--}}

                                                <div class="progress progress-striped active">
                                                    <div class="bar" role="progressbar"
                                                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                                                         style="width:0%"></div>
                                                </div><!--progress-->
                                            </div>
                                            {{--<div class="span1">--}}
                                            {{--<a class="remove_payment_voucher_item alert-danger">X</a>--}}
                                            {{--</div>--}}
                                        </div>
                                        <div class="span9 upload_form_filds">
                                            <div class="span5">
                                                <div class="par form-group">
                                                    <div class="span12">
                                                        <input type="file" name="attachment" class="document_attachment"
                                                               style="padding:0;border: 0;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="span6">
                                                <div class="par form-group">
                                                    <div class="span12">
                                                        <textarea rows="1" name="comments" class="span12"></textarea>
                                                        <input type="hidden" name="documentable_id"
                                                               value="{{$loading_order_vehicle->loadingOrderItem->id}}">
                                                        <input type="hidden" name="documentable_type"
                                                               value="App\Model\LoadingOrderItem">
                                                        <input type="hidden" name="document_id"
                                                               value="{{$document->id}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="span1">
                                                <div class="par form-group">
                                                    <div class="span12 single_upload_button_div">
                                                        <button class="btn btn-default btn-mini single_upload_buttons"
                                                                name="submit" type="submit">UPLOAD
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            @endforeach
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="row">
        <div class="form-group">
            <a class="btn btn-default hide" data-dismiss="modal" onclick="modelShow('viewPermits')"
               id="view-permits">VIEW VEHICLE PERMITS</a>
            <button class="btn btn-primary" type="submit" id="create_trip">CREATE TRIP</button>
            <button type="reset" class="btn" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</form>
<script>
    jQuery('.tabs').tabs();
    $('.laoding_order_serchable_select').select2();
    $('.route_assignment_date_time_picker').datetimepicker({
        format: 'yyyy-MM-dd hh:mm'
    });
    $('input[name="loading_date[]"],input[name="t1_date[]"],input[name="departure_date"] ').datepicker({
        format: 'yyyy-mm-dd'
    });
    $('.single_upload_buttons').on('click', function (e) { // capture submit
        e.preventDefault();
        var form = $(this).closest('form');
        var document_attachment = $(this).closest('.document');
        var documentable_id = document_attachment.find('input[name="documentable_id"]').val();
        var documentable_type = document_attachment.find('input[name="documentable_type"]').val();
        var document_id = document_attachment.find('input[name="document_id"]').val();
        var comments = document_attachment.find('textarea[name="comments"]').val();
        var attachment = document_attachment.find('.document_attachment')[0];
//        var attachment = $(this)[0];
        var file = attachment.files[0], form_data = false;

        form_data = new FormData();
//    var fd = new FormData($(this)[0]); // XXX: Neex AJAX2
        // You could show a loading image for example...
        form_data.append("attachment", file);
        form_data.append("document_id", document_id);
        form_data.append("documentable_type", documentable_type);
        form_data.append("documentable_id", documentable_id);
        form_data.append("comments", comments);
        $.ajax({
            url: '{{route('route_assignments.documentations.store')}}',
            xhr: function () { // custom xhr (is the best)
                var xhr = new XMLHttpRequest();
                var total = 0;

                // Get the total size of files
                $.each(attachment.files, function (i, file_) {
                    total += file_.size;
//                             console.log('Filse size: ' + total);
                });
                // Called when upload progress changes. xhr2
                xhr.upload.addEventListener("progress", function (evt) {
                    // show progress like example
                    var loaded = (evt.loaded / total).toFixed(2) * 100; // percent
                    var bar = document_attachment.find('.bar');
                    bar.fadeIn(0);
                    bar.css('width', loaded + '%');
//                            .attr('aria-valuenow', loaded).text(loaded + '% Complete');
                    if (loaded === 100) {
                        //document_attachment.find('.progress-bar').removeClass('active');
                        setTimeout(function () {
                            bar.fadeOut(0).delay(1500).css('width', 0 + '%');
                        }, 1500);
                    }
                }, false);
                return xhr;
            },
            type: 'post',
            processData: false,
            contentType: false,
            data: form_data,
            beforeSend: function () {
                document_attachment.find('.upload_form_filds').addClass('hide');
                document_attachment.find('.progress_bar').removeClass('hide');
            },
            success: function (data) {
                document_attachment.remove();
            },
            complete: function () {
//                document_attachment
            },
            error: function (data) {
                console.log('Error');
            }
        });
    });
</script>