@extends('layouts.app')

@section('style')
<style>
    .inv-page { padding: 20px 12px 32px; max-width: 1100px; margin: 0 auto; }
    .inv-page .page-title { font-size: 1.45rem; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
    .inv-page .page-sub { color: #64748b; margin: 0 0 18px; font-size: .92rem; }
    .inv-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
    .inv-tabs a {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 16px; border-radius: 10px; text-decoration: none !important;
        border: 1px solid #e2e8f0; color: #334155; background: #fff; font-weight: 600;
    }
    .inv-tabs a.active { background: #2563eb; border-color: #2563eb; color: #fff; }
    .inv-card {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
        padding: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04); margin-bottom: 16px;
    }
    .inv-card h5 { margin: 0 0 12px; font-weight: 700; color: #0f172a; font-size: 1rem; }
    .inv-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
    .inv-filter .form-group { margin: 0; min-width: 200px; flex: 1; }
    .inv-job {
        display: flex; gap: 12px; align-items: flex-start;
        border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
        cursor: pointer; transition: border-color .15s, background .15s;
    }
    .inv-job:hover { border-color: #93c5fd; background: #f8fbff; }
    .inv-job.selected { border-color: #2563eb; background: #eff6ff; }
    .inv-job .meta { color: #64748b; font-size: .85rem; margin-top: 4px; }
    .inv-job .title { font-weight: 600; color: #0f172a; }
    .inv-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    .inv-file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .inv-file-chip {
        display: inline-flex; align-items: center; gap: 6px;
        background: #f1f5f9; border-radius: 8px; padding: 6px 10px; font-size: .85rem; color: #334155;
    }
    .inv-submit-bar {
        position: sticky; bottom: 0; background: rgba(255,255,255,.96);
        border-top: 1px solid #e2e8f0; padding: 12px 0; margin-top: 8px;
        display: flex; justify-content: flex-end; gap: 10px; z-index: 5;
    }
    .badge-waiting { background: #f59e0b; }
    .badge-approved { background: #16a34a; }
    .badge-rejected { background: #ef4444; }
    .inv-empty { text-align: center; padding: 36px 12px; color: #64748b; }
    .inv-table td, .inv-table th { vertical-align: middle !important; }
    .inv-file-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
    .inv-file-thumbs img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; }
    .inv-file-thumbs .pdf {
        width: 42px; height: 42px; border-radius: 6px; background: #fef2f2; color: #ef4444;
        display: inline-flex; align-items: center; justify-content: center; border: 1px solid #fecaca;
    }
    @media (max-width: 768px) {
        .inv-page { padding: 12px 8px 28px; }
        .inv-job { padding: 10px; }
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="inv-page">
            <h3 class="page-title">1.adım Hizmet Faturası Yükle</h3>
            <p class="page-sub">
                Tamamlanan hizmetler için fatura yükleyin. Sürücüyü seçin, faturaya eklenecek işleri işaretleyin, tutarı ve kilometreyi girin ve dosyayı gönderin.
            </p>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0 pl-3">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="inv-tabs">
                <a href="{{ route('invoices.index', array_filter(['tab' => 'send', 'driver_id' => $selectedDriverId ?: null])) }}"
                   class="{{ $tab === 'send' ? 'active' : '' }}">
                    <i class="fa fa-paper-plane"></i> Gönder
                </a>
                <a href="{{ route('invoices.index', array_filter(['tab' => 'list', 'driver_id' => $selectedDriverId ?: null])) }}"
                   class="{{ $tab === 'list' ? 'active' : '' }}">
                    <i class="fa fa-file-text-o"></i> Faturalarım
                </a>
            </div>

            @if($tab === 'send')
                <div class="inv-card">
                    <form method="get" action="{{ route('invoices.index') }}" class="inv-filter">
                        <input type="hidden" name="tab" value="send">
                        <div class="form-group">
                            <label>2- Hizmeti Veren Sürücüler</label>
                            <select name="driver_id" class="form-control" onchange="this.form.submit()">
                                <option value="">Tüm sürücüler</option>
                                @foreach($drivers as $driver)
                                    <option value="{{ $driver->id }}" {{ (string)$selectedDriverId === (string)$driver->id ? 'selected' : '' }}>
                                        {{ $driver->prenom }} {{ $driver->nom }}
                                        @if(!empty($driver->firma_adi)) — {{ $driver->firma_adi }} @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>

                    @if($pendingJobs->isEmpty())
                        <div class="inv-empty">
                            <i class="fa fa-check-circle" style="font-size:2rem;color:#16a34a;"></i>
                            <p class="mt-2 mb-0">Gönderilecek tamamlanmış iş bulunamadı.</p>
                        </div>
                    @else
                        <form method="post" action="{{ route('invoices.store') }}" enctype="multipart/form-data" id="invoiceSendForm">
                            @csrf

                            <div class="inv-actions">
                                <h5 class="mb-0">3- Faturaya İşlenecek Hizmetleri Seçin ({{ $pendingJobs->count() }})</h5>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="selectAllJobs">Tümünü seç</button>
                            </div>

                            <div id="jobList">
                                @foreach($pendingJobs as $job)
                                    @php
                                        $code = $job->id . (!empty($job->dijialfa_id) ? '-' . $job->dijialfa_id : '');
                                        $plate = $job->dijialfa_musteri_plaka ?? null;
                                        $label = $plate ? ($code . '/' . $plate) : $code;
                                    @endphp
                                    <label class="inv-job" data-driver-id="{{ $job->id_conducteur }}">
                                        <input type="checkbox" name="ride_ids[]" value="{{ $job->id }}" class="job-check mt-1"
                                               data-driver-id="{{ $job->id_conducteur }}">
                                        <div>
                                            <div class="title">{{ $label }}</div>
                                            <div class="meta">
                                                Sürücü: {{ $job->driverPrenom }} {{ $job->driverNom }}
                                                · {{ $job->creer ?? '' }}
                                                @if(!empty($job->destination))
                                                    · {{ \Illuminate\Support\Str::limit($job->destination, 40) }}
                                                @endif
                                            </div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>

                            <div class="inv-card mt-3 mb-0" style="box-shadow:none;padding:0;border:0;">
                                <h5>4 - Fatura Tutarı Giriniz</h5>
                                <div class="form-group">
                                    <input type="number" step="0.01" min="0.01" name="amount" class="form-control"
                                           placeholder="Örn. 1500.00" value="{{ old('amount') }}" required>
                                </div>

                                <h5>5 - Kilometre (KM) Giriniz</h5>
                                <div class="form-group">
                                    <input type="number" step="0.01" min="0.01" name="km" class="form-control"
                                           placeholder="Örn. 42.5" value="{{ old('km') }}" required>
                                </div>

                                <h5>6 - Fatura Görsel/Dosyaları Seçiniz (PDF /Görsel)</h5>
                                <div class="form-group">
                                    <input type="file" name="invoice_files[]" id="invoice_files" class="form-control-file"
                                           accept=".pdf,.jpg,.jpeg,.png,.gif,.bmp,.webp,application/pdf,image/*" multiple required>
                                    <small class="text-muted">Birden fazla dosya seçebilirsiniz. Max 10 MB / dosya.</small>
                                    <div class="inv-file-list" id="selectedFilesPreview"></div>
                                </div>

                                <h5>7 - Açıklama (Opsiyonel)</h5>
                                <div class="form-group mb-0">
                                    <textarea name="comment" class="form-control" rows="2" placeholder="Açıklama girin">{{ old('comment') }}</textarea>
                                </div>
                            </div>

                            <div class="inv-submit-bar">
                                <button type="submit" class="btn btn-primary btn-lg" id="submitInvoiceBtn" disabled>
                                    <i class="fa fa-paper-plane"></i> Fatura Gönder
                                </button>
                            </div>
                        </form>
                    @endif
                </div>
            @else
                <div class="inv-card">
                    <form method="get" action="{{ route('invoices.index') }}" class="inv-filter">
                        <input type="hidden" name="tab" value="list">
                        <div class="form-group">
                            <label>Sürücü</label>
                            <select name="driver_id" class="form-control" onchange="this.form.submit()">
                                <option value="">Tüm sürücüler</option>
                                @foreach($drivers as $driver)
                                    <option value="{{ $driver->id }}" {{ (string)$selectedDriverId === (string)$driver->id ? 'selected' : '' }}>
                                        {{ $driver->prenom }} {{ $driver->nom }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Durum</label>
                            <select name="status" class="form-control" onchange="this.form.submit()">
                                @php $status = request('status', 'all'); @endphp
                                <option value="all" {{ $status === 'all' ? 'selected' : '' }}>Tümü</option>
                                <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Bekleyen</option>
                                <option value="approved" {{ $status === 'approved' ? 'selected' : '' }}>Onaylanan</option>
                                <option value="rejected" {{ $status === 'rejected' ? 'selected' : '' }}>Reddedilen</option>
                            </select>
                        </div>
                    </form>

                    @if($invoices->isEmpty())
                        <div class="inv-empty">
                            <p class="mb-0">Henüz fatura kaydı yok.</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-bordered inv-table mb-0">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Sürücü</th>
                                    <th>İş(ler)</th>
                                    <th>Tutar</th>
                                    <th>KM</th>
                                    <th>Dosyalar</th>
                                    <th>Durum</th>
                                    <th>Tarih</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($invoices as $invoice)
                                    @php
                                        $st = strtolower((string)($invoice->status ?? 'waiting'));
                                        $badge = $st === 'approved' ? 'badge-approved' : ($st === 'rejected' || $st === 'failed' ? 'badge-rejected' : 'badge-waiting');
                                        $label = $st === 'approved' ? 'Onaylandı' : ($st === 'rejected' || $st === 'failed' ? 'Reddedildi' : 'Bekliyor');
                                        $urls = $invoice->invoice_url;
                                    @endphp
                                    <tr>
                                        <td>{{ $invoice->id }}</td>
                                        <td>
                                            @if($invoice->driver)
                                                {{ $invoice->driver->prenom }} {{ $invoice->driver->nom }}
                                            @else
                                                #{{ $invoice->driver_id }}
                                            @endif
                                        </td>
                                        <td style="max-width:220px;word-break:break-word;">{{ $invoice->getAttributes()['requite_id'] ?? '' }}</td>
                                        <td>{{ number_format((float)$invoice->amount, 2, ',', '.') }} ₺</td>
                                        <td>
                                            @if($invoice->km !== null && $invoice->km !== '')
                                                {{ rtrim(rtrim(number_format((float) $invoice->km, 2, ',', '.'), '0'), ',') }} km
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td>
                                            <div class="inv-file-thumbs">
                                                @foreach($urls as $url)
                                                    @if(\App\Models\DriverInvoice::isImageUrl($url))
                                                        <a href="{{ $url }}" target="_blank" rel="noopener"><img src="{{ $url }}" alt="Fatura"></a>
                                                    @elseif(\App\Models\DriverInvoice::extensionFromUrl($url) === 'pdf')
                                                        <a href="{{ $url }}" target="_blank" rel="noopener" class="pdf"><i class="fa fa-file-pdf-o"></i></a>
                                                    @else
                                                        <a href="{{ $url }}" target="_blank" rel="noopener" class="pdf"><i class="fa fa-external-link"></i></a>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </td>
                                        <td><span class="badge {{ $badge }}">{{ $label }}</span></td>
                                        <td>{{ $invoice->insert_date ?? $invoice->created_at }}</td>
                                        <td>
                                            <a href="{{ route('invoices.show', $invoice->id) }}" class="btn btn-sm btn-info">Detay</a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">{{ $invoices->links() }}</div>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
    var form = document.getElementById('invoiceSendForm');
    if (!form) return;

    var checks = Array.prototype.slice.call(document.querySelectorAll('.job-check'));
    var submitBtn = document.getElementById('submitInvoiceBtn');
    var selectAllBtn = document.getElementById('selectAllJobs');
    var fileInput = document.getElementById('invoice_files');
    var preview = document.getElementById('selectedFilesPreview');

    function selectedChecks() {
        return checks.filter(function (c) { return c.checked; });
    }

    function refreshJobStyles() {
        checks.forEach(function (c) {
            var row = c.closest('.inv-job');
            if (row) row.classList.toggle('selected', c.checked);
        });
    }

    function updateSubmitState() {
        var selected = selectedChecks();
        var hasAmount = !!(form.amount && form.amount.value && parseFloat(form.amount.value) > 0);
        var hasKm = !!(form.km && form.km.value && parseFloat(form.km.value) > 0);
        var hasFiles = !!(fileInput && fileInput.files && fileInput.files.length > 0);
        submitBtn.disabled = !(selected.length && hasAmount && hasKm && hasFiles);
        refreshJobStyles();
    }

    checks.forEach(function (c) {
        c.addEventListener('change', updateSubmitState);
    });

    if (selectAllBtn) {
        selectAllBtn.addEventListener('click', function () {
            var allSelected = checks.length > 0 && checks.every(function (c) { return c.checked; });
            checks.forEach(function (c) { c.checked = !allSelected; });
            updateSubmitState();
        });
    }

    if (form.amount) {
        form.amount.addEventListener('input', updateSubmitState);
    }

    if (form.km) {
        form.km.addEventListener('input', updateSubmitState);
    }

    if (fileInput) {
        fileInput.addEventListener('change', function () {
            preview.innerHTML = '';
            Array.prototype.forEach.call(fileInput.files || [], function (f) {
                var chip = document.createElement('span');
                chip.className = 'inv-file-chip';
                chip.textContent = f.name;
                preview.appendChild(chip);
            });
            updateSubmitState();
        });
    }

    form.addEventListener('submit', function (e) {
        if (!selectedChecks().length) {
            e.preventDefault();
            alert('En az bir iş seçin.');
            return;
        }
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Gönderiliyor...';
    });

    updateSubmitState();
})();
</script>
@endsection