@section('title')
    Clientes
@stop

@section('content-header')
    Clientes
@stop

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

@section('content')
    <div class="box no-border">
        <div class="box-body">
            <ul class="datatable-filters list-inline pull-left" data-target="#datatablee">
                <li>
                    <a href="{{ route('admin.customers.create') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-plus"></i> Novo Cliente
                    </a>
                </li>
                <li>
                    <button type="button" class="btn btn-primary btn-sm" id="exportVehicles">
                        <i class="fas fa-download"></i> Exportar
                    </button>
                </li>
            </ul>
        </div>
        <div class="container">
            <table id="datatable" class="table table-striped">
                <thead>
                <tr>
                    <th class="header panel-blue">Nome</th>
                    <th class="header panel-blue">NIF</th>
                    <th class="header panel-blue">Morada</th>
                    <th class="header panel-blue">Localidade</th>
                    <th class="header panel-blue">Telefone</th>
                    <th class="header panel-blue">Telemóvel</th>
                    <th class="header panel-blue">Email</th>
                    <th class="header panel-blue">Particular</th>
                    <th class="header panel-blue">Ativo</th>
                    <th class="header panel-blue">Ações</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="customersModal" tabindex="-1" role="dialog" aria-labelledby="customersModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customersModalLabel">Editar Cliente</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="customersModalBody">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="historyModalLabel">Histórico de Compromissos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="appointmentDetailsModal" tabindex="-1" role="dialog" aria-labelledby="appointmentDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="appointmentDetailsModalLabel">Detalhes do Compromisso</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            function openEditModal() {
                var id_customer = $(this).data('id');
                $.get("{{ url('admin/customers') }}/" + id_customer + "/edit", function(data) {
                    $('#customersModalBody').html(data);
                    $('#customersModalLabel').text('Editar Cliente');
                    $('#customersModal').modal('show');
                });
            }
            $(document).on('click', '.openEditModal', openEditModal);
            function openDetailsModal() {
                var id_appointment = $(this).data('id');
                var url = "{{ route('admin.appointments.show', ['id_appointment' => ':id']) }}";
                url = url.replace(':id', id_appointment);

                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function (data) {
                        $('#appointmentDetailsModal .modal-body').html(data);
                        $('#appointmentDetailsModal').modal('show');
                    },
                    error: function (xhr, status, error) {
                        console.error("AJAX Error: ", error);
                        alert("An error occurred while loading the appointment details.");
                    }
                });
            }
            $(document).on('click', '.openDetailsModal', openDetailsModal);

                $('#historyModal').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget);
                    var customerId = button.data('customer-id');
                    var modal = $(this);

                    modal.find('.modal-body').html('');

                    $.ajax({
                        url: '/admin/customers/' + customerId + '/history',
                        method: 'GET',
                        success: function (response) {
                            modal.find('.modal-body').html(response);
                        },
                        error: function (xhr, status, error) {
                            console.error("AJAX Error: ", error);
                            modal.find('.modal-body').html('<p>Error loading history. Please try again.</p>');
                        }
                    });
                });
            var oTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                columns: [
                    { data: 'name', name: 'name', orderable: true, searchable: true },
                    { data: 'vat', name: 'vat', orderable: false, searchable: true },
                    { data: 'address', name: 'address', orderable: false, searchable: true },
                    { data: 'city', name: 'city', orderable: false, searchable: true },
                    { data: 'phone', name: 'phone', orderable: false, searchable: true },
                    { data: 'mobile', name: 'mobile', orderable: false, searchable: true },
                    { data: 'contact_email', name: 'contact_email', orderable: false, searchable: true },
                    { data: 'is_particular', name: 'is_particular', orderable: false, searchable: true, render: function(data, type, row) {
                            if (data == 0) {
                                return '<i class="fas fa-check-circle text-center center-block text-green"></i>';
                            } else {
                                return '<i class="fas fa-times-circle text-center center-block text-red"></i>';
                            }}},
                    { data: 'is_active', name: 'is_active', orderable: false, searchable: true, render: function(data, type, row) {
                            if (data == 0) {
                                return '<i class="fas fa-times-circle text-center center-block text-red"></i>';
                            } else {
                                return '<i class="fas fa-check-circle text-center center-block text-green"></i>';
                            }}},
                    { data: 'actions', name: 'actions', orderable: false, searchable: false },
                ],
                order: [[0, "asc"]],
                ajax: {
                    url: "{{ route('admin.customers.datatable') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function (d) {
                    },
                    beforeSend: function () {
                        Datatables.cancelDatatableRequest(oTable);
                    },
                    complete: function () {
                        Datatables.complete();
                    },
                    error: function (xhr, status, error) {
                        console.error("AJAX Error: ", error);
                    }
                }
            });
            $('.filter-datatable').on('change', function (e) {
                oTable.draw();
                e.preventDefault();
            });
        });
    </script>
@endsection