@extends('layouts.app')

@section('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .drv-page {
        --drv-blue: #0f6cbd;
        --drv-blue-soft: #e8f3fc;
        --drv-slate: #64748b;
        --drv-border: #e2e8f0;
        --drv-card: #ffffff;
        max-width: 1100px;
        margin: 0 auto;
        padding: 18px 12px 40px;
    }
    .drv-page .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }
    .drv-page .page-header-left {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }
    .drv-page .page-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--drv-blue-soft);
        color: var(--drv-blue);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }
    .drv-page .page-header h3 {
        margin: 0;
        font-size: clamp(1.2rem, 2.2vw, 1.5rem);
        font-weight: 700;
        color: #0f172a;
    }
    .drv-page .page-header p {
        margin: 4px 0 0;
        color: var(--drv-slate);
        font-size: .9rem;
    }
    .drv-page .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 40px;
        padding: 0 14px;
        border-radius: 10px;
        border: 1px solid var(--drv-border);
        background: #fff;
        color: #334155;
        font-weight: 600;
        text-decoration: none !important;
    }
    .drv-card {
        background: var(--drv-card);
        border: 1px solid var(--drv-border);
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        margin-bottom: 16px;
        overflow: hidden;
    }
    .drv-card-header {
        padding: 16px 18px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }
    .drv-card-header h4 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: #0f172a;
    }
    .drv-card-body { padding: 16px 18px 18px; }
    .drv-search {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }
    .drv-search .form-control,
    .drv-id-row input {
        height: 42px;
        border-radius: 10px;
        border: 1px solid var(--drv-border);
        padding: 0 12px;
    }
    .drv-search .form-control {
        flex: 1;
        min-width: 220px;
    }
    .drv-search .btn,
    .drv-id-row .btn,
    .drv-actions .btn {
        height: 42px;
        border-radius: 10px;
        padding: 0 16px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .drv-search .btn-primary,
    .drv-id-row .btn-primary,
    .drv-actions .btn-primary {
        background: var(--drv-blue);
        border-color: var(--drv-blue);
    }
    .drv-search .btn-secondary,
    .drv-actions .btn-secondary {
        background: #fff;
        border: 1px solid var(--drv-border);
        color: #334155;
    }
    .drv-field-label {
        display: block;
        font-size: .8rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 6px;
    }
    .drv-id-field { margin-top: 14px; }
    .drv-id-row {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .drv-id-row input {
        flex: 1;
        min-width: 0;
    }
    .drv-hint {
        margin: 6px 0 0;
        font-size: .78rem;
        color: var(--drv-slate);
    }
    .drv-preview { margin-top: 14px; display: none; }
    .drv-preview-card {
        border: 1px solid var(--drv-border);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        background: #f8fafc;
    }
    .drv-preview-card.already {
        background: #fff7ed;
        border-color: #fdba74;
    }
    .drv-preview-card h5 {
        margin: 0 0 6px;
        font-size: .98rem;
        font-weight: 700;
        color: #0f172a;
    }
    .drv-preview-card p {
        margin: 0;
        font-size: .85rem;
        color: #475569;
        line-height: 1.45;
    }
    .drv-preview-missing {
        color: #b91c1c;
        font-size: .85rem;
        margin-bottom: 10px;
    }
    .drv-actions {
        margin-top: 14px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }
    .drv-page table {
        width: 100%;
        border-collapse: collapse;
    }
    .drv-page th,
    .drv-page td {
        text-align: left;
        padding: 12px 10px;
        border-bottom: 1px solid var(--drv-border);
        font-size: .9rem;
        color: #0f172a;
        vertical-align: middle;
    }
    .drv-page th {
        color: #64748b;
        font-weight: 700;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .drv-empty {
        text-align: center;
        color: var(--drv-slate);
        padding: 28px 8px;
    }
    .drv-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 3px 10px;
        font-size: .78rem;
        font-weight: 700;
    }
    .drv-badge.on { background: #ecfdf3; color: #15803d; }
    .drv-badge.off { background: #fff7ed; color: #b45309; }
    .drv-count {
        background: var(--drv-blue-soft);
        color: var(--drv-blue);
        border-radius: 999px;
        padding: 4px 10px;
        font-size: .82rem;
        font-weight: 700;
    }
    .unlink-btn {
        background: none;
        border: 0;
        color: #dc2626;
        cursor: pointer;
        font-size: 15px;
        padding: 4px 6px;
    }
    .select2-container .select2-selection--multiple {
        min-height: 42px;
        border-radius: 10px !important;
        border-color: var(--drv-border) !important;
    }
    .drv-alert {
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 14px;
    }
    .drv-alert.success { background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; }
    .drv-alert.danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
    #confirmDriverAttachBtn.disabled {
        opacity: .55;
        pointer-events: none;
    }
    @media (max-width: 700px) {
        .drv-page th:nth-child(5),
        .drv-page td:nth-child(5),
        .drv-page th:nth-child(6),
        .drv-page td:nth-child(6) {
            display: none;
        }
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="drv-page">
            <div class="page-header">
                <div class="page-header-left">
                    <div class="page-header-icon">
                        <i class="mdi mdi-account-card-details"></i>
                    </div>
                    <div>
                        <h3>Bağlı sürücüler</h3>
                        <p>
                            {{ $dispatcher->first_name }} {{ $dispatcher->last_name }}
                            @if(!empty($dispatcher->firma_adi)) — {{ $dispatcher->firma_adi }} @endif
                        </p>
                    </div>
                </div>
                <a href="{{ route('users.profile') }}" class="back-link">
                    <i class="fa fa-arrow-left"></i> Hesabıma dön
                </a>
            </div>

            @if(session('success'))
                <div class="drv-alert success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="drv-alert danger">{{ session('error') }}</div>
            @endif

            {{-- Geçici olarak gizlendi: Sürücü bağla / ekle
            <div class="drv-card">
                <div class="drv-card-header">
                    <h4>Sürücü bağla / ekle</h4>
                </div>
                <div class="drv-card-body">
                    <form action="{{ route('users.drivers.attach') }}" method="post" id="attachDriversForm">
                        @csrf
                        <label for="driver_ids" class="drv-field-label">Sürücü ara ve seç</label>
                        <select id="driver_ids" name="driver_ids[]" multiple="multiple" style="width:100%;"></select>

                        <div class="drv-id-field">
                            <label for="driver_id_input" class="drv-field-label">veya sürücü ID gir</label>
                            <div class="drv-id-row">
                                <input type="text"
                                       id="driver_id_input"
                                       name="driver_id_input"
                                       value="{{ old('driver_id_input') }}"
                                       placeholder="Örn: 12, 45, 78">
                                <button type="button" class="btn btn-primary" id="lookupDriverBtn">
                                    <i class="fa fa-search"></i> Sorgula
                                </button>
                            </div>
                            <p class="drv-hint">Birden fazla ID’yi virgül veya boşluk ile ayırabilirsiniz.</p>
                        </div>

                        <div class="drv-preview" id="driverPreview"></div>

                        <div class="drv-actions">
                            <button type="submit" class="btn btn-primary" id="attachDriversBtn">
                                <i class="fa fa-link"></i> Sürücü bağla
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            --}}

            <div class="drv-card">
                <div class="drv-card-body" style="padding-bottom:8px;">
                    <form method="get" action="{{ route('users.drivers') }}" class="drv-search">
                        <input type="text"
                               name="q"
                               value="{{ $search }}"
                               class="form-control"
                               placeholder="Bağlı sürücülerde ara: ID, ad, telefon, firma...">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-search"></i> Ara
                        </button>
                        @if($search !== '')
                            <a href="{{ route('users.drivers') }}" class="btn btn-secondary">Temizle</a>
                        @endif
                    </form>
                </div>
            </div>

            <div class="drv-card">
                <div class="drv-card-header">
                    <h4>Sürücü listesi</h4>
                    <span class="drv-count">
                        @if($search !== '')
                            {{ $linkedDrivers->total() }} sonuç / {{ $totalDrivers }} toplam
                        @else
                            {{ $totalDrivers }} sürücü
                        @endif
                    </span>
                </div>
                <div class="drv-card-body">
                    <div class="table-responsive">
                        <table>
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Ad</th>
                                <th>Soyad</th>
                                <th>Firma</th>
                                <th>Telefon</th>
                                <th>E-posta</th>
                                <th>Durum</th>
                                <th>İşlem</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($linkedDrivers as $driver)
                                @php
                                    $active = in_array(strtolower((string)($driver->statut ?? '')), ['yes', '1', 'active'], true);
                                @endphp
                                <tr>
                                    <td>{{ $driver->driver_id }}</td>
                                    <td>{{ $driver->prenom }}</td>
                                    <td>{{ $driver->nom }}</td>
                                    <td>{{ $driver->firma_adi ?: '—' }}</td>
                                    <td>{{ $driver->phone ?: '—' }}</td>
                                    <td>{{ $driver->email ?: '—' }}</td>
                                    <td>
                                        <span class="drv-badge {{ $active ? 'on' : 'off' }}">
                                            {{ $active ? 'Aktif' : 'Pasif' }}
                                        </span>
                                    </td>
                                    <td>
                                        <form action="{{ route('users.drivers.detach', $driver->link_id) }}"
                                              method="post"
                                              class="d-inline js-unlink-driver"
                                              onsubmit="return confirm('Bu sürücünün bağlantısını kaldırmak istiyor musunuz?');">
                                            @csrf
                                            <button type="submit" class="unlink-btn" title="Bağlantıyı kaldır">
                                                <i class="fa fa-unlink"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="drv-empty">
                                        @if($search !== '')
                                            Aramanızla eşleşen sürücü bulunamadı.
                                        @else
                                            Henüz bağlı sürücü yok. Yukarıdan sürücü bağlayabilirsiniz.
                                        @endif
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($linkedDrivers->hasPages())
                        <div class="mt-3">{{ $linkedDrivers->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmDriverModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:#0f6cbd;color:#fff;">
                <h5 class="modal-title">Sürücü bağlama onayı</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Kapat">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-2">Aşağıdaki sürücüleri hesabınıza bağlamak üzeresiniz.</p>
                <div id="confirmDriverModalBody"></div>
                <div class="form-check mt-3">
                    <input type="checkbox" class="form-check-input" id="confirmDriverCheck">
                    <label class="form-check-label" for="confirmDriverCheck">Bilgileri kontrol ettim, bağlamak istiyorum.</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                <button type="button" class="btn btn-primary disabled" id="confirmDriverAttachBtn" aria-disabled="true">Onayla ve bağla</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script>
(function () {
    // Form geçici gizlendiyse select2/attach JS çalışmasın
    if (!$('#attachDriversForm').length) return;

    var searchUrl = @json(route('users.drivers.search'));
    var previewUrl = @json(route('users.drivers.preview'));
    var allowSubmit = false;
    var lastPreview = { drivers: [], missing: [] };

    $('#driver_ids').select2({
        placeholder: 'Sürücü adı, telefon veya ID yazın...',
        allowClear: true,
        width: '100%',
        ajax: {
            url: searchUrl,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { q: params.term || '' };
            },
            processResults: function (data) {
                return data;
            }
        },
        minimumInputLength: 0
    });

    function parseDriverIds(value) {
        return (value || '').split(/[\s,;]+/).map(function (item) {
            return parseInt(item, 10);
        }).filter(function (item) {
            return item > 0;
        });
    }

    function driverCardHtml(driver) {
        var extraClass = driver.already_linked ? ' already' : '';
        var linkedNote = driver.already_linked
            ? '<p><strong>Bu sürücü zaten bağlı.</strong></p>'
            : '';
        return '<div class="drv-preview-card' + extraClass + '">' +
            '<h5>#' + driver.id + ' ' + (driver.first_name || '') + ' ' + (driver.last_name || '') + '</h5>' +
            '<p>Firma: ' + (driver.firma_adi || '-') + '</p>' +
            '<p>Telefon: ' + (driver.phone || '-') + '</p>' +
            '<p>E-posta: ' + (driver.email || '-') + '</p>' +
            linkedNote +
            '</div>';
    }

    function renderPreview(data) {
        lastPreview = data || { drivers: [], missing: [] };
        var html = '';
        if (lastPreview.missing && lastPreview.missing.length) {
            html += '<p class="drv-preview-missing">Bulunamayan ID: ' + lastPreview.missing.join(', ') + '</p>';
        }
        (lastPreview.drivers || []).forEach(function (driver) {
            html += driverCardHtml(driver);
        });
        var box = $('#driverPreview');
        if (html) {
            box.html(html).show();
        } else {
            box.hide().empty();
        }
    }

    function lookupIds() {
        var ids = parseDriverIds($('#driver_id_input').val());
        if (!ids.length) {
            renderPreview({ drivers: [], missing: [] });
            return;
        }
        $.getJSON(previewUrl, { ids: ids.join(',') }, function (data) {
            renderPreview(data);
        });
    }

    $('#lookupDriverBtn').on('click', lookupIds);

    $('#confirmDriverCheck').on('change', function () {
        var ready = $(this).is(':checked');
        $('#confirmDriverAttachBtn')
            .toggleClass('disabled', !ready)
            .attr('aria-disabled', ready ? 'false' : 'true');
    });

    $('#confirmDriverAttachBtn').on('click', function () {
        if (!$('#confirmDriverCheck').is(':checked')) return;
        allowSubmit = true;
        $('#confirmDriverModal').modal('hide');
        $('#attachDriversForm')[0].submit();
    });

    $('#attachDriversForm').on('submit', function (e) {
        if (allowSubmit) return true;
        e.preventDefault();

        var selected = ($('#driver_ids').val() || []).map(function (v) { return parseInt(v, 10); });
        var typed = parseDriverIds($('#driver_id_input').val());
        var allIds = selected.concat(typed).filter(function (v, i, arr) {
            return v > 0 && arr.indexOf(v) === i;
        });

        if (!allIds.length) {
            alert('Lütfen sürücü seçin veya ID girin.');
            return false;
        }

        $.getJSON(previewUrl, { ids: allIds.join(',') }, function (data) {
            lastPreview = data || { drivers: [], missing: [] };
            renderPreview(lastPreview);

            var body = '';
            (lastPreview.drivers || []).forEach(function (driver) {
                if (driver.already_linked) return;
                body += '<div class="mb-2"><strong>#' + driver.id + '</strong> ' +
                    (driver.first_name || '') + ' ' + (driver.last_name || '') +
                    ' — ' + (driver.firma_adi || '-') + '</div>';
            });
            if (!body) {
                body = '<div class="text-muted">Bağlanacak yeni sürücü yok (zaten bağlı veya bulunamadı).</div>';
            }
            if (lastPreview.missing && lastPreview.missing.length) {
                body += '<div class="text-danger mt-2">Bulunamayan: ' + lastPreview.missing.join(', ') + '</div>';
            }

            $('#confirmDriverModalBody').html(body);
            $('#confirmDriverCheck').prop('checked', false).trigger('change');
            $('#confirmDriverModal').modal('show');
        });

        return false;
    });
})();
</script>
@endsection