@section('title', 'Localizações')

@section('content-header', 'Localizações')

@section('breadcrumb')
    <li class="active">Localizações</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="openlocationsModal">
                        <i class="fas fa-plus"></i> Nova Localização
                    </button>
                </li>
                <button type="button" class="btn btn-primary btn-sm" id="exportLocations">
                    <i class="fas fa-download"></i> Exportar
                </button>
                <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>
            </ul>
        </div>
        <div class="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#locations-table">
            <ul class="list-inline pull-left">
                <li style="margin-bottom: 5px;" class="col-xs-6">
                    <strong>Cidade</strong><br/>
                    <div class="w-100px">
                        {{ Form::select('city', ['' => 'Todas'] + $cities->pluck('name', 'name')->toArray(), Request::has('city') ? Request::get('city') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                    </div>
                </li>
            </ul>
        </div>
        <div class="container">
                <table id="locations-table" class="table table-striped">
                    <thead>
                    <tr>
                        <th class="header panel-blue">Nome</th>
                        <th class="header panel-blue">Morada</th>
                        <th class="header panel-blue">Código-Postal</th>
                        <th class="header panel-blue">Cidade</th>
                        <th class="header panel-blue">Ações</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    <div class="modal fade" id="locationsModal" tabindex="-1" role="dialog" aria-labelledby="locationsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="locationsModalLabel">Adicionar Localização</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="locationsModalBody">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="colaboratorsModal" tabindex="-1" role="dialog" aria-labelledby="colaboratorsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="colaboratorsModalLabel">Gerir Colaboradores</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="colaboratorsModalBody">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            function openEditModal() {
                var id_garage = $(this).data('id');
                $.get("{{ url('admin/locations') }}/" + id_garage + "/edit", function(data) {
                    $('#locationsModalBody').html(data);
                    $('#locationsModalLabel').text('Editar Localização');
                    $('#locationsModal').modal('show');
                });
            }
            function closeModal(){
                $('#colaboratorsModal').modal('hide');
            }

            function openColaboratorsModal() {
                var id_garage = $(this).data('id');
                $.get("{{ url('admin/locations') }}/" + id_garage + "/manageColaborators", function(data) {
                    $('#colaboratorsModalBody').html(data);
                    $('#colaboratorsModalLabel').text('Gerir Colaboradores');
                    $('#colaboratorsModal').modal('show');
                });
            }
            $(document).on('click', '#associateBtn', closeModal);
            $(document).on('click', '#disassociateBtn', closeModal);
            $(document).on('click', '.openEditModal', openEditModal);
            $(document).on('click', '.openColaboratorsModal', openColaboratorsModal);


            var locationsTable = $('#locations-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.locations.datatable') }}",
                    data: function(d) {
                        d.city = $('select[name=city]').val();
                        d.search = $('input[type=search]').val();
                    }
                },
                columns: [
                    { data: 'name', name: 'name', searchable: true, orderable: true },
                    { data: 'address', name: 'address', searchable: true, orderable: true },
                    { data: 'zipcode', name: 'zipcode', searchable: true, orderable: true },
                    { data: 'city', name: 'city', searchable: true, orderable: true },
                    { data: 'actions', name: 'actions', searchable: false, orderable: false }
                ],
                order: [
                    [0, 'asc']
                ]
            });

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

            $('#openlocationsModal').click(function() {
                $.get("{{ route('admin.locations.create') }}", function(data) {
                    $('#locationsModalBody').html(data);
                    $('#locationsModal').modal('show');
                });
            });

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