@section('title')
        Serviços
    @stop

    @section('content-header')
        Serviços
    @stop

    @section('breadcrumb')
        <li class="active">Serviços</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="openServicesModal">
                            <i class="fas fa-plus"></i> Novo Serviço
                        </button>
                    </li>
                    <button type="button" class="btn btn-primary btn-sm" id="exportServices">
                        <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="container">
            <table id="services-table" class="table table-striped">
                <thead>
                <tr>
                    <th class="header panel-blue w-6">Nome</th>
                    <th class="header panel-blue w-6">Descrição</th>
                    <th class="header panel-blue w-2">Valor/Hora</th>
                    <th class="header panel-blue w-4">Ações</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        </div>
        <div class="modal fade" id="servicesModal" tabindex="-1" role="dialog" aria-labelledby="servicesModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="servicesModalLabel">Novo Serviç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="servicesModalBody">
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @section('scripts')
        <script>
            $(document).ready(function() {
                function openEditModal() {
                    var id_service = $(this).data('id');
                    $.get("{{ url('admin/services') }}/" + id_service + "/edit", function(data) {
                        $('#servicesModalBody').html(data);
                        $('#servicesModalLabel').text('Editar Serviço');
                        $('#servicesModal').modal('show');
                    });
                }
                $(document).on('click', '.openEditModal', openEditModal);
                $(document).on('click', '.delete-service', function() {
                    var serviceId = $(this).data('service-id');

                    Swal.fire({
                        title: 'Tem a certeza?',
                        text: 'Esta ação não pode ser revertida!',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Sim, apagar!',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Enviar o formulário de exclusão
                            $('#deleteForm' + serviceId).submit();
                        }
                    });
                });
                $('#services-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('admin.services.datatable') }}",
                    columns: [
                        { data: 'name', name: 'name', searchable: true },
                        { data: 'description', name: 'description', searchable: true },
                        { data: 'hour_rate', name: 'hour_rate', searchable: true,
                            render: function(data, type, row) {
                                if (data === null || data === undefined) {
                                    return '';
                                }
                            return data.toFixed(2) + ' €';
                        }},
                        { data: 'actions', name: 'actions', searchable: false, orderable:false },
                    ],
                    order: [
                    [0, 'asc']
                ]
                });
                $('#openServicesModal').click(function() {
                    $.get("{{ route('admin.services.create') }}", function(data) {
                        $('#servicesModalBody').html(data);
                        $('#servicesModal').modal('show');
                    });
            });
                $('#exportServices').click(function() {
                    window.location.href = "{{ route('admin.services.export') }}";
                });
            });

        </script>
    @endsection