@extends('layouts.layout-2')

@section('content')
    <div class="d-flex justify-content-between align-items-center py-3 mb-3">
        <h4 class="font-weight-bold mb-0">
            {{ __('Kontakte') }}
            <small class="text-muted font-weight-light ml-2 d-none d-md-inline" id="header-subtitle">Stammkunden ohne Duplikate</small>
        </h4>
        <a href="{{ route('contact_detail', ['new']) }}" class="btn btn-sm btn-primary" id="btn-new-contact">
            <span class="fa fa-plus mr-1"></span> {{ __('Neuer Kontakt') }}
        </a>
    </div>

    {{-- Filterleiste --}}
    <div class="card mb-3">
        <div class="card-body py-2">
            <div class="form-row align-items-end">

                <div class="form-group col-sm-4 col-md-3 mb-2">
                    <label class="form-label small text-muted mb-1">{{ __('Schnellsuche') }}</label>
                    <input type="text" id="filter-search" class="form-control form-control-sm"
                        placeholder="Name, Vorname, E-Mail, Telefon…">
                </div>

                <div class="form-group col-sm-3 col-md-2 mb-2">
                    <label class="form-label small text-muted mb-1">{{ __('PLZ / Ort') }}</label>
                    <input type="text" id="filter-location" class="form-control form-control-sm"
                        placeholder="z.B. 80331 oder München">
                </div>

                <div class="form-group col-sm-5 col-md-4 mb-2">
                    <label class="form-label small text-muted mb-1">{{ __('Anzeigen') }}</label>
                    <div class="btn-group btn-group-sm d-flex" id="filter-group" role="group">
                        <button type="button" class="btn btn-outline-primary filter-btn active" data-filter="">
                            Alle
                        </button>
                        <button type="button" class="btn btn-outline-primary filter-btn" data-filter="has_leads">
                            Mit Anfragen
                        </button>
                        <button type="button" class="btn btn-outline-primary filter-btn" data-filter="has_bookings">
                            Mit Buchungen
                        </button>
                        <button type="button" class="btn btn-outline-warning filter-btn" data-filter="deleted">
                            <span class="fa fa-trash mr-1"></span> Papierkorb
                        </button>
                    </div>
                </div>

                <div class="form-group col-auto mb-2 ml-auto">
                    <button type="button" id="filter-reset" class="btn btn-sm btn-outline-danger">
                        <span class="fa fa-times mr-1"></span> Zurücksetzen
                    </button>
                </div>

            </div>
        </div>
    </div>

    {{-- History-Modal (Anfragen + Buchungen) --}}
    <div class="modal fade" id="contactHistoryModal" tabindex="-1" role="dialog" aria-labelledby="contactHistoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactHistoryModalLabel">
                        <i class="fa fa-history mr-2"></i>
                        <span id="history-modal-title">Anfragen &amp; Buchungen</span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="history-modal-body">
                    <div class="text-center py-4">
                        <span class="fa fa-spinner fa-spin fa-2x text-muted"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Bestätigungs-Modal Löschen --}}
    <div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="deleteContactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteContactModalLabel">
                        <i class="fa fa-exclamation-triangle text-danger mr-2"></i>Kontakt löschen
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Soll <strong id="delete-contact-name"></strong> wirklich gelöscht werden?</p>
                    <p class="text-muted small mb-0">Der Kontakt wird als gelöscht markiert und kann bei Bedarf
                        wiederhergestellt werden.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                    <button type="button" class="btn btn-danger" id="btn-confirm-delete">
                        <span class="fa fa-trash mr-1"></span> Endgültig löschen
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Fehler-Toast --}}
    <div id="delete-error-toast" class="alert alert-danger alert-dismissible fade"
        style="position:fixed; bottom:1rem; right:1rem; z-index:9999; min-width:300px; display:none;">
        <button type="button" class="close" onclick="$('#delete-error-toast').fadeOut();">&times;</button>
        <span id="delete-error-message"></span>
    </div>

    {{-- Erfolg-Toast (Wiederherstellen) --}}
    <div id="restore-success-toast" class="alert alert-success alert-dismissible fade"
        style="position:fixed; bottom:1rem; right:1rem; z-index:9999; min-width:300px; display:none;">
        <button type="button" class="close" onclick="$('#restore-success-toast').fadeOut();">&times;</button>
        <span class="fa fa-check mr-1"></span> Kontakt wurde wiederhergestellt.
    </div>

    {{-- Tabelle --}}
    <div class="card">
        <div class="table-responsive-track" id="datatables-contact-scroll">
            <div class="table-responsive-thumb" id="datatables-contact-thumb"></div>
        </div>
        <div class="card-datatable table-responsive">
            <table class="table table-striped table-bordered table-sm" id="datatables-contact">
                <thead>
                    <tr>
                        <th style="width: 42px;">&nbsp;</th>
                        <th style="width: 70px;">{{ __('ID') }}</th>
                        <th>{{ __('Vorname') }}</th>
                        <th>{{ __('Nachname') }}</th>
                        <th>{{ __('E-Mail') }}</th>
                        <th>{{ __('PLZ') }}</th>
                        <th>{{ __('Ort') }}</th>
                        <th style="width: 80px;" class="text-center">{{ __('Anfragen') }}</th>
                        <th style="width: 80px;" class="text-center">{{ __('Buchungen') }}</th>
                        <th style="width: 130px;">{{ __('Gelöscht am') }}</th>
                        <th style="width: 42px;">&nbsp;</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <script>
        $(document).ready(function() {

            var activeFilter = '';
            var locationFilter = '';

            var table = $('#datatables-contact').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": '{!! route('data_table_contacts') !!}',
                    "data": function(d) {
                        if (activeFilter === 'has_leads') {
                            d.filter_has_leads = 1;
                        }
                        if (activeFilter === 'has_bookings') {
                            d.filter_has_bookings = 1;
                        }
                        if (activeFilter === 'deleted') {
                            d.filter_deleted = 1;
                        }
                        if (locationFilter !== '') {
                            d.filter_location = locationFilter;
                        }
                    }
                },
                "order": [
                    [1, "desc"]
                ],
                "columns": [{
                        data: 'action_edit',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'id',
                        name: 'contacts.id'
                    },
                    {
                        data: 'firstname',
                        name: 'firstname',
                        searchable: true
                    },
                    {
                        data: 'name',
                        name: 'name',
                        searchable: true
                    },
                    {
                        data: 'email',
                        name: 'email',
                        searchable: true
                    },


                    {
                        data: 'zip',
                        name: 'zip',
                        searchable: true
                    },
                    {
                        data: 'city',
                        name: 'city',
                        searchable: true

                    },
                    {
                        data: 'leads_count',
                        name: 'leads_count',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'bookings_count',
                        name: 'bookings_count',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'deleted_at',
                        name: 'deleted_at',
                        searchable: false,
                        visible: false
                    },
                    {
                        data: 'action_delete',
                        orderable: false,
                        searchable: false
                    },
                ],
                "columnDefs": [{
                    // Anzahl-Badges — klickbar für History-Modal
                    targets: [7, 8],
                    render: function(data, type, row) {
                        if (data === null || parseInt(data) === 0) {
                            return '<span class="text-muted">' + (data !== null ? data : '—') + '</span>';
                        }
                        return '<span class="badge badge-pill badge-primary badge-history-link" '
                            + 'style="cursor:pointer;" data-id="' + row.raw_id + '">'
                            + data + '</span>';
                    }
                }],
                "bLengthChange": false,
                "iDisplayLength": 100,
                "language": {
                    "url": "/js/German.json"
                },
                "dom": 'rt<"d-flex justify-content-between mt-2"ip>',
                drawCallback: function() {
                    dataTableScrollTrack('#datatables-contact');
                }
            }).api();

            // ── Schnellsuche (Globale Suche) ──────────────────────────────────
            var searchTimer;
            $('#filter-search').on('keyup', function() {
                clearTimeout(searchTimer);
                var val = $(this).val();
                searchTimer = setTimeout(function() {
                    table.search(val).draw();
                }, 350);
            });

            // ── PLZ / Ort Suche (OR über zip + city, serverseitig) ───────────
            var locationTimer;
            $('#filter-location').on('keyup', function() {
                clearTimeout(locationTimer);
                locationFilter = $(this).val();
                locationTimer = setTimeout(function() {
                    table.draw();
                }, 350);
            });

            // ── Schnellfilter-Buttons ─────────────────────────────────────────
            $('.filter-btn').on('click', function() {
                $('.filter-btn').removeClass('active');
                $(this).addClass('active');
                activeFilter = $(this).data('filter');
                var isTrash = (activeFilter === 'deleted');
                $('#btn-new-contact').toggle(!isTrash);
                $('#header-subtitle').text(isTrash ? 'Gelöschte Kontakte' : 'Stammkunden ohne Duplikate');
                table.column(9).visible(isTrash);
                if (isTrash) {
                    table.order([9, 'desc']).draw();
                } else {
                    table.order([1, 'desc']).draw();
                }
            });

            // ── Zurücksetzen ──────────────────────────────────────────────────
            $('#filter-reset').on('click', function() {
                activeFilter = '';
                locationFilter = '';
                $('#filter-search').val('');
                $('#filter-location').val('');
                $('.filter-btn').removeClass('active');
                $('.filter-btn[data-filter=""]').addClass('active');
                $('#btn-new-contact').show();
                $('#header-subtitle').text('Stammkunden ohne Duplikate');
                table.column(9).visible(false);
                table.order([1, 'desc']).search('').columns().search('').draw();
            });

            // ── Löschen ───────────────────────────────────────────────────────
            var deleteContactId = null;

            // Klick auf Löschen-Button öffnet Modal
            $('#datatables-contact').on('click', '.btn-contact-delete', function() {
                deleteContactId = $(this).data('id');
                $('#delete-contact-name').text($(this).data('name'));
                $('#deleteContactModal').modal('show');
            });

            // Bestätigung: DELETE-Request abschicken
            $('#btn-confirm-delete').on('click', function() {
                if (!deleteContactId) {
                    return;
                }

                var $btn = $(this).prop('disabled', true).html(
                    '<span class="fa fa-spinner fa-spin mr-1"></span> Löschen…');

                $.ajax({
                    url: '/contact/' + deleteContactId,
                    type: 'POST',
                    data: {
                        _method: 'DELETE',
                        _token: '{{ csrf_token() }}'
                    },
                    success: function() {
                        $('#deleteContactModal').modal('hide');
                        table.draw(false); // Seite behalten, nur neu laden
                    },
                    error: function(xhr) {
                        $('#deleteContactModal').modal('hide');
                        var msg = (xhr.responseJSON && xhr.responseJSON.message) ?
                            xhr.responseJSON.message :
                            'Löschen fehlgeschlagen.';
                        $('#delete-error-message').text(msg);
                        $('#delete-error-toast').show().addClass('show');
                        setTimeout(function() {
                            $('#delete-error-toast').removeClass('show').fadeOut();
                        }, 6000);
                    },
                    complete: function() {
                        $btn.prop('disabled', false).html(
                            '<span class="fa fa-trash mr-1"></span> Endgültig löschen');
                        deleteContactId = null;
                    }
                });
            });

            // ── Wiederherstellen ──────────────────────────────────────────────
            $('#datatables-contact').on('click', '.btn-contact-restore', function() {
                var $btn = $(this).prop('disabled', true).html('<span class="fa fa-spinner fa-spin"></span>');
                var contactId = $(this).data('id');

                $.ajax({
                    url: '/contact/' + contactId + '/restore',
                    type: 'POST',
                    data: {
                        _method: 'PATCH',
                        _token: '{{ csrf_token() }}'
                    },
                    success: function() {
                        table.draw(false);
                        $('#restore-success-toast').show().addClass('show');
                        setTimeout(function() {
                            $('#restore-success-toast').removeClass('show').fadeOut();
                        }, 4000);
                    },
                    error: function() {
                        $btn.prop('disabled', false).html('<span class="fa fa-undo"></span>');
                    }
                });
            });

            // ── History-Modal (Anfragen & Buchungen) ──────────────────────────
            $('#datatables-contact').on('click', '.badge-history-link', function() {
                var contactId = $(this).data('id');
                $('#history-modal-body').html(
                    '<div class="text-center py-4"><span class="fa fa-spinner fa-spin fa-2x text-muted"></span></div>'
                );
                $('#contactHistoryModal').modal('show');
                $.get('/contact/' + contactId + '/history', function(html) {
                    $('#history-modal-body').html(html);
                }).fail(function() {
                    $('#history-modal-body').html(
                        '<p class="text-danger p-3">Fehler beim Laden der Daten.</p>'
                    );
                });
            });

        });
    </script>
@endsection