@extends('layouts.main')
@section('title')
    Tires:{{$vehicle->registration_number}},{{$vehicle->model}},{{$vehicle->make}}
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('tires.vehicles.index')}}">Mounted Tires</a> <span class="divider">/</span></li>
        <li class="active">Tires for {{$vehicle->type}} {{$vehicle->registration_number}}</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
        <button class="btn" style="margin-right: 4px;margin-bottom: 4px" id="manage_truck_tires"><span
                    class="iconsweets-create"></span> Manage Tires
        </button>
    </li>

    <li class="right btn-group">
        <a class="btn" href="{{route('tires.vehicles.print',array('truck_id'=>$vehicle->id,'type'=>$vehicle->type))}}" target="_blank" style="margin-left: 2px">
            <span class="iconsweets-printer"></span>
        </a>
    </li>
@stop
@section('contentinner')
    <style type="text/css">
        #new_user {
            width: 70%;
            left: 35%;
            /*height: 100px;*/
        }
    </style>
    <div class="tab-content">
        <div class="tab-pane active">
            <div class="row-fluid">
                <div class="span12">
                    <table class="table table-bordered table-condensed">
                        <thead>
                        <tr>
                            <th class="head0 nosort" style="width: 10px">S/N</th>
                            <th class="head0 nosort"  style="width: 10px"><input type="checkbox" class="checkall"/></th>
                            <th class="head0">Serial Number</th>
                            <th class="head0">Brand</th>
                            <th class="head0">Vendor</th>
                            <th class="head1">Tyre Size</th>
                            <th class="head1">Date Fixed</th>
                            <th class="head0">Tire Position</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($vehicle->tires as $key => $tire)
                            <tr>
                                <td>{{$key + 1}}</td>
                                <td class="aligncenter">
                                <span class="center">
                                    <input type="checkbox" class="truck_tire" value="{{ $tire->id}}"/>
                                </span>
                                </td>

                                <td>{{$tire->serial_number}}</td>
                                <td class=""></td>
                                <td class=""></td>
                                <td>{{$tire->tire_size}}</td>
                                <td>{{\Carbon\Carbon::parse($tire->date_created)->toFormattedDateString()}}</td>
                                <td></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div aria-hidden="false" class="fade hide modal animated" data-backdrop="static"
         id="manage_truck_tire_modal" tabindex="-1">
        {!! Form::open(array('route' => 'truck.tires.manage.action'))!!}
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Manage Tires</h3>
        </div>
        <div class="modal-body">
            <div id="manageBody">

            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn" type="submit">Remove Tire</button>
        </div>
        {!! Form::close() !!}
    </div>
    <script>
        function checkedRowFunction() {
            var checked = jQuery('.truck_tire:checked').length > 0;
            if (!checked) {
                jAlert("Please check at least one Tire to continue with the process", 'SELECTION DIALOG');
                return false;
            }
            var checkedRows = [];
            jQuery('.truck_tire').each(function () {
                if (jQuery(this).is(':checked')) {
                    checkedRows.push(jQuery(this).val());
                }
            });
            return checkedRows;
        }

        jQuery('#manage_truck_tires').click(function () {
            var checkedRow = checkedRowFunction();
            if (checkedRow) {
                jQuery('#manage_truck_tire_modal').appendTo("body").modal('toggle');
                appendBody(checkedRow);
                jQuery(".actiontaken").change(function () {
                    var actiontaken = jQuery(this).val();
                    var table_ = jQuery(this).parents('table');
                    var new_tire = table_.find('new_tire');
                    if (actiontaken == 'change') {
                        new_tire.slideToggle();
                    } else {
                        new_tire.hide();
                        new_tire.find('input').each(function () {
                            jQuery(this).val('');
                        });
                    }
                });
            }
        });

        function appendBody(checkedRow) {
            jQuery.ajax({
                type: "GET",
                cache: false,
                url: "{{route('tires.vehicles.edit',array('truck'=>$vehicle->id,'type'=>$vehicle->type))}}",
                data: {
                    ids: checkedRow
                },
//                        dataType: 'json',
                success: function (data) {
                    jQuery('#manageBody').empty().append(data);
                },
                error: function (data) {

                }
            });
            return false;
        }

    </script>
@stop