@section('title')
Veículos
@stop

@section('content-header')
    Veículos
@stop

@section('breadcrumb')
    <li class="active">Veiculos</li>
@stop

@section('content')
        <div class="box no-border">
            <div class="box-body">
                <ul class="datatable-filters list-inline pull-left" data-target="#datatable">
                    <li>
                        <button type="button" class="btn btn-success btn-sm" id="openVehiclesModal">
                            <i class="fas fa-plus"></i> Novo Veiculo
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-primary btn-sm" id="exportVehicles">
                            <i class="fas fa-download"></i> Exportar
                        </button>
                    </li>
                    <li>
                    <button type="button" class="btn btn-filter-datatable btn-default">
                        <i class="fas fa-filter"></i> Filtrar <i class="fas fa-angle-down"></i>
                    </button>
                    </li>
                </ul>
            </div>
                <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#vehicles-table">
                    <ul class="list-inline pull-left">
                        <li style="margin-bottom: 5px;" class="col-xs-6">
                            <strong>Marca</strong><br/>
                            <div class="w-100px">
                                {{ Form::select('brand', ['' => 'Todas'] + $brands->pluck('name', 'id_brand')->toArray(), Request::has('brand') ? Request::get('brand') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                            </div>
                        </li>
                    </ul>
                </div>
            <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#vehicles-table">
                <ul class="list-inline pull-left">
                    <li style="margin-bottom: 5px;" class="col-xs-6">
                        <strong>Categoria</strong><br/>
                        <div class="w-100px">
                            {{ Form::select('category', ['' => 'Todas'] + $categories->pluck('name', 'id_category')->toArray(), Request::has('category') ? Request::get('category') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#vehicles-table">
                <ul class="list-inline pull-left">
                    <li style="margin-bottom: 5px;" class="col-xs-6">
                        <strong>Proprietário</strong><br/>
                        <div class="w-100px">
                            {{ Form::select('owner', ['' => 'Todos'] + $customers->pluck('name', 'id')->toArray(), Request::has('owner') ? Request::get('owner') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="container">
            <table id="vehicles-table" class="table table-striped">
                <thead>
                <tr>
                    <th class="header panel-blue w-3">Proprietário</th>
                    <th class="header panel-blue w-2">NIF</th>
{{--                    <th class="header panel-blue">Marca</th>--}}
                    <th class="header panel-blue w-3">Modelo</th>
                    <th class="header panel-blue w-3">Matricula</th>
                    <th class="header panel-blue w-2">Ano</th>
                    <th class="header panel-blue w-2">Mês</th>
                    <th class="header panel-blue w-7">Categoria</th>
                    <th class="header panel-blue w-3">Quilometragem</th>
                    <th class="header panel-blue w-3">Localização</th>
{{--                    <th class="header panel-blue">Morada</th>--}}
                    <th class="header panel-blue w-3">Ações</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        </div>
        <div class="modal fade" id="vehiclesModal" tabindex="-1" role="dialog" aria-labelledby="vehiclesModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="vehiclesModalLabel">Novo Veiculo</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">X</span>
                        </button>
                    </div>
                    <div class="modal-body" id="vehiclesModalBody">
                    </div>
                </div>
            </div>
        </div>
@endsection
{{--@section('content')--}}
{{--    <div class="box no-border">--}}
{{--        <div class="box-body">--}}
{{--            <ul class="datatable-filters list-inline pull-left" data-target="#datatable">--}}
{{--                <li>--}}
{{--                    <button type="button" class="btn btn-success btn-sm" id="openVehiclesModal">--}}
{{--                        <i class="fas fa-plus"></i> Novo Veículo--}}
{{--                    </button>--}}
{{--                </li>--}}
{{--                <li>--}}
{{--                    <button type="button" class="btn btn-primary btn-sm" id="exportVehicles">--}}
{{--                        <i class="fas fa-download"></i> Exportar--}}
{{--                    </button>--}}
{{--                </li>--}}
{{--                <li>--}}
{{--                    <button type="button" class="btn btn-filter-datatable btn-default">--}}
{{--                        <i class="fas fa-filter"></i> Filtrar <i class="fas fa-angle-down"></i>--}}
{{--                    </button>--}}
{{--                </li>--}}
{{--            </ul>--}}
{{--        </div>--}}
{{--        <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#vehicles-table">--}}
{{--            <ul class="list-inline pull-left">--}}
{{--                <li style="margin-bottom: 5px;" class="col-xs-6">--}}
{{--                    <strong>Marca</strong><br/>--}}
{{--                    <div class="w-100px">--}}
{{--                        {{ Form::select('brand', ['' => 'Todas'] + $brands->pluck('name', 'id_brand')->toArray(), Request::has('brand') ? Request::get('brand') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}--}}
{{--                    </div>--}}
{{--                </li>--}}
{{--                <li style="margin-bottom: 5px;" class="col-xs-6">--}}
{{--                    <strong>Categoria</strong><br/>--}}
{{--                    <div class="w-100px">--}}
{{--                        {{ Form::select('category', ['' => 'Todas'] + $categories->pluck('name', 'id_category')->toArray(), Request::has('category') ? Request::get('category') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}--}}
{{--                    </div>--}}
{{--                </li>--}}
{{--                <li style="margin-bottom: 5px;" class="col-xs-6">--}}
{{--                    <strong>Proprietário</strong><br/>--}}
{{--                    <div class="w-100px">--}}
{{--                        {{ Form::select('owner', ['' => 'Todos'] + $customers->pluck('name', 'id')->toArray(), Request::has('owner') ? Request::get('owner') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}--}}
{{--                    </div>--}}
{{--                </li>--}}
{{--            </ul>--}}
{{--        </div>--}}
{{--        <div class="container">--}}
{{--            <div class="table-responsive">--}}
{{--                <table id="vehicles-table" class="table table-striped">--}}
{{--                    <thead>--}}
{{--                    <tr>--}}
{{--                        <th class="header panel-blue w-3">Proprietário</th>--}}
{{--                        <th class="header panel-blue w-2">NIF</th>--}}
{{--                        <th class="header panel-blue w-5">Modelo</th>--}}
{{--                        <th class="header panel-blue w-3">Matricula</th>--}}
{{--                        <th class="header panel-blue w-2">Ano</th>--}}
{{--                        <th class="header panel-blue w-2">Mês</th>--}}
{{--                        <th class="header panel-blue w-3">Categoria</th>--}}
{{--                        <th class="header panel-blue w-3">Quilometragem</th>--}}
{{--                        <th class="header panel-blue w-3">Localização</th>--}}
{{--                        <th class="header panel-blue w-3">Ações</th>--}}
{{--                    </tr>--}}
{{--                    </thead>--}}
{{--                    <tbody>--}}

{{--                    </tbody>--}}
{{--                </table>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <div class="modal fade" id="vehiclesModal" tabindex="-1" role="dialog" aria-labelledby="vehiclesModalLabel" aria-hidden="true">--}}
{{--        <div class="modal-dialog modal-lg" role="document">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header">--}}
{{--                    <h5 class="modal-title" id="vehiclesModalLabel">Novo Veículo</h5>--}}
{{--                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">--}}
{{--                        <span aria-hidden="true">X</span>--}}
{{--                    </button>--}}
{{--                </div>--}}
{{--                <div class="modal-body" id="vehiclesModalBody"></div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--@endsection--}}

@section('scripts')
    <script>
        $(document).ready(function() {
            function openEditModal() {
                var id_vehicle = $(this).data('id');
                $.get("{{ url('admin/vehicles') }}/" + id_vehicle + "/edit", function(data) {
                    $('#vehiclesModalBody').html(data);
                    $('#vehiclesModalLabel').text('Editar Veículo');
                    $('#vehiclesModal').modal('show');
                });
            }

            $(document).on('click', '.openEditModal', openEditModal);

            var vehiclesTable = $('#vehicles-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.vehicles.datatable') }}",
                    data: function(d) {
                        d.brand = $('select[name=brand]').val();
                        d.category = $('select[name=category]').val();
                        d.owner = $('select[name=owner]').val();
                    }
                },
                columns: [
                    { data: 'v_owner.name', name: 'v_owner.name', searchable: true, orderable: true },
                    { data: 'v_owner.vat', name: 'v_owner.vat', searchable: true, orderable: false },
                    { data: 'v_model.name', name: 'v_model.name', searchable: true, orderable: false },
                    { data: 'licenseplate', name: 'licenseplate', searchable: true, orderable: false },
                    { data: 'year', name: 'year', searchable: true, orderable: true },
                    { data: 'month', name: 'month', searchable: true, orderable: false },
                    { data: 'v_model.vcategory.name', name: 'v_model.vcategory.name', searchable: true, orderable: false },
                    { data: 'km', name: 'km', render: function(data) { return data + ' km'; }, searchable: false, orderable: true },
                    { data: 'location_info', name: 'location_info', searchable: true, orderable: false },
                    { data: 'actions', name: 'actions', searchable: false, orderable: false },
                ],
                order: [[0, 'desc']],
            });

            $('.filter-datatable').on('change', function(e) {
                vehiclesTable.draw();
                e.preventDefault();
            });

            $('#openVehiclesModal').click(function() {
                $.get("{{ route('admin.vehicles.create') }}", function(data) {
                    $('#vehiclesModalBody').html(data);
                    $('#vehiclesModal').modal('show');
                });
            });

            $('#exportVehicles').click(function() {
                window.location.href = "{{ route('admin.vehicles.export') }}";
            });
        });
    </script>
@endsection