@extends('layouts.main_without_top_button')
@section('title')
    Tires Managements
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Tires Managements</a> <span class="divider">/</span></li>
        <li class="active">Tires Inventory</li>
    </ul>
@stop
@section('contentinner')
    <div class="tab-content">
        <div class="tab-pane active">
            <div class="msghead" style="margin-bottom: 4px;margin-top: -20px">
                {{--<ul class="msghead_menu">--}}
                    {{--<li class="right btn-group">--}}
                        {{--<button class="btn" style="margin-right: 4px;" id="manage_truck_tires"><span--}}
                                    {{--class="iconsweets-create"></span> Manage Tires--}}
                        {{--</button>--}}
                        {{--<button class="btn" style="margin-right: 4px;" id="manage_truck_tires"><span--}}
                                    {{--class="iconsweets-create"></span> Manage Location--}}
                        {{--</button>--}}
                    {{--</li>--}}
                {{--</ul>--}}
                <span class="clearall"></span>
            </div><!--msghead-->
            <table class="table table-bordered table-condensed" id="tire-lists">
                <thead>
                <tr>
                    <th class="head0 nosort" style="width: 20px"><input type="checkbox" class="checkall"/></th>
                    {{--<th width="4%">S/N</th>--}}
                    <th class="head0">Serial Number</th>
                    <th class="head1">Price</th>
                    <th class="head0">Brand</th>
                    <th class="head0">Vendor</th>
                    <th class="head0">Size</th>
                    <th class="head0">Expected Km</th>
                    <th class="head1">Location</th>
                    <th class="head0">Status</th>
                    <th class="head0" >Action</th>
                </tr>
                </thead>
            </table>
        </div><!--tabcontent-->
    </div><!--tabbable-->

    <div aria-hidden="false" class="fade hide modal animated" data-backdrop="static" id="edit_tire_modal" data-backdrop="static">
        <form method="POST" action="" accept-charset="UTF-8" class="stdform"  id="edit_tire_form">
            {{ csrf_field() }}
            {{ method_field('PUT') }}

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Edit Tire Details</h3>
            </div>

            <div class="modal-body" id="edit_tire_modal_body">


            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-success">SAVE</button>
                <button type="reset" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </form>
    </div>

    <script>
        var oTable = jQuery('#tire-lists').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading Vendors Records...",
                "sZeroRecords": "No vendors records to display.",
                "sProcessing": "Please wait - loading records...",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{route('tires.data-table.index')}}',
                data: function (d) {
//                    d.route_id = jQuery('#name').val();
                },
                error: function (xhr, textStatus, error) {
                    if (textStatus === 'timeout') {
                        alert('Timout error. The server took too long to send back the data.\nPlease try again.');
                    }
                    oTable.fnProcessingIndicator(false);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {data: 'checkbox'},
                {"class": "link", data: 'serial_number'},
                {"class": "link", data: 'price'},
                {"class": "link", data: 'brand'},
                {"class": "link", data: 'vendor'},
                {"class": "link", data: 'size'},
                {"class": "link", data: 'expected_kilometer'},
                {"class": "link", data: 'location'},
                {"class": "link", data: 'status'},
                {"class": "link", data: 'action'}
            ],
            "fnDrawCallback": function () {

                jQuery('.delete_tire').on('click',function(){
                    var tr_p = jQuery(this).parents('tr');
                    var tire_id = tr_p.find('.tire_id').val();
                    var delete_url = "{{ route('tires.destroy', [":id"]) }}";
                   var delete_url_ = delete_url.replace(':id',tire_id);

                    jConfirm('ARE YOU SURE, YOU WANT TO DELETE ' + name, 'DELETE', function (r) {
                        if (r == true) {
                            jQuery.ajax({
                                url: delete_url_,
                                type: 'delete',
                                data: {
                                    tire_id:tire_id
                                },
                                cache: false,
                                success: function (data) {
                                    if(data=="DELETED"){
                                        oTable.draw();
                                    jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} TIRE DELETED ', {
                                        theme: 'contrastBorder',
                                        sticky: true
                                    });}
                                    else{
                                        jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} FAILED!! ', {
                                            theme: 'contrastBorder',
                                            sticky: true
                                        });
                                        }

                                }
                            });
                        }
                    });

                });

                jQuery('.edit_tire').click(function () {
                    var tr_p = jQuery(this).parents('tr');
                    var tire_id = tr_p.find('.tire_id').val();
                    var edit_url = "{{ route('tires.edit', [":id"]) }}";
                    edit_url_ = edit_url.replace(':id',tire_id);

                    jQuery.ajax({
                        url: edit_url_,
                        type: 'get',
                        data: {
                            tire_id:tire_id
                        },
                        success: function (data) {
                            jQuery('#edit_tire_modal_body').empty().append(data);
                            jQuery('#edit_tire_modal').appendTo("body").modal('toggle');

                        },
                        error: function (data) {
                            console.log('Error: ');
                            console.log(data);
                            jQuery.jGrowl('Error: Something went wrong');
                        }
                    });

                    var url = "{{ route('tires.update', [":id"]) }}";
                    url = url.replace(':id',tire_id);

                    var edit_tire_modal = jQuery('#edit_tire_modal');
                    var form = edit_tire_modal.find('form');
                    form.on('submit', function(e) {
                        e.preventDefault();
                        jQuery.ajax({
                            url: url,
                            type: 'PUT',
                            data: form.serialize(),
                            success: function (data) {
                                if (data === 'DONE') {
                                    oTable.draw();
                                    jQuery.jGrowl("Successful");

                                    jQuery('#edit_tire_modal').modal('toggle');
                                }else {

                                }
                            },
                            error: function (data) {
                                console.log('Error: ');
                                console.log(data);
                                jQuery.jGrowl('Error: Something went wrong');
                            }
                        });
                    });


                    return false;
                });
            },
            "bStateSave": true
        });

    </script>
@stop