@extends('layouts.app', ['title' => 'Firmendaten'])
@section('content')

{{-- Edit Modal (nur für MGT) --}}
@if (Auth::user()->get_employee->is_mgt)
<div class="modal fade" id="edit-company-modal" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius:12px; overflow:hidden;">
            <form action="{{ route('system.company.update') }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate
                  style="display:flex; flex-direction:column; overflow:hidden; min-height:0; flex:1 1 auto;">
                @csrf

                {{-- Header --}}
                <div class="modal-header border-0 px-4 pt-4 pb-3" style="background:#f8f9fb;">
                    <div>
                        <h5 class="modal-title fw-bold mb-0">
                            <i class="bi bi-building-fill me-2 text-primary"></i>Firmendaten bearbeiten
                        </h5>
                        <div class="text-muted small mt-1">Allgemeine Stammdaten der Firma</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                {{-- Body --}}
                <div class="modal-body px-4 py-3">

                    {{-- Abschnitt: Allgemein --}}
                    <div class="d-flex align-items-center gap-2 mb-3 mt-1">
                        <span class="badge rounded-pill text-bg-primary px-2 py-1" style="font-size:10px; letter-spacing:.05em;">ALLGEMEIN</span>
                        <hr class="flex-grow-1 m-0">
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-7">
                            <label class="form-label fw-semibold small">Firmenname <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" value="{{ old('name', $company->name) }}" required placeholder="z.B. Muster GmbH">
                            @error('name') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-5">
                            <label class="form-label fw-semibold small">App-Name</label>
                            <input type="text" class="form-control" name="app_name" value="{{ old('app_name', $company->app_name) }}" placeholder="z.B. Muster MGT">
                            <div class="form-text">Anzeige in Browser-Tab &amp; Menü</div>
                        </div>
                    </div>

                    {{-- Abschnitt: Adresse --}}
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <span class="badge rounded-pill text-bg-secondary px-2 py-1" style="font-size:10px; letter-spacing:.05em;">ADRESSE</span>
                        <hr class="flex-grow-1 m-0">
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-8">
                            <label class="form-label fw-semibold small">Straße</label>
                            <input type="text" class="form-control" name="str" value="{{ old('str', $company->str) }}" placeholder="Musterstraße">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold small">Hausnummer</label>
                            <input type="text" class="form-control" name="hn" value="{{ old('hn', $company->hn) }}" placeholder="12a">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold small">PLZ</label>
                            <input type="text" class="form-control" name="plz" value="{{ old('plz', $company->plz) }}" placeholder="12345">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label fw-semibold small">Ort</label>
                            <input type="text" class="form-control" name="ort" value="{{ old('ort', $company->ort) }}" placeholder="Berlin">
                        </div>
                    </div>

                    {{-- Abschnitt: Kontakt --}}
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <span class="badge rounded-pill text-bg-secondary px-2 py-1" style="font-size:10px; letter-spacing:.05em;">KONTAKT</span>
                        <hr class="flex-grow-1 m-0">
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold small">Telefon</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                                <input type="text" class="form-control" name="tel" value="{{ old('tel', $company->tel) }}" placeholder="+49 30 123456">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold small">Fax</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-printer"></i></span>
                                <input type="text" class="form-control" name="fax" value="{{ old('fax', $company->fax) }}" placeholder="+49 30 123457">
                            </div>
                        </div>
                       
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">Webseite</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-globe"></i></span>
                                <input type="text" class="form-control" name="webseite" value="{{ old('webseite', $company->webseite) }}" placeholder="www.firma.de">
                            </div>
                        </div>
                         <div class="col-md-6">
                            <label class="form-label fw-semibold small">E-Mail</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                                <input type="email" class="form-control" name="email" value="{{ old('email', $company->email) }}" placeholder="info@firma.de">
                            </div>
                        </div>
                    </div>

                    {{-- Abschnitt: Steuer --}}
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <span class="badge rounded-pill text-bg-secondary px-2 py-1" style="font-size:10px; letter-spacing:.05em;">STEUER</span>
                        <hr class="flex-grow-1 m-0">
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">Steuernummer</label>
                            <input type="text" class="form-control" name="steuer_nr" value="{{ old('steuer_nr', $company->steuer_nr) }}" placeholder="046/159/12345">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">USt-IdNr.</label>
                            <input type="text" class="form-control" name="ust_id" value="{{ old('ust_id', $company->ust_id) }}" placeholder="DE123456789">
                        </div>
                    </div>

                    {{-- Abschnitt: Logo --}}
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <span class="badge rounded-pill text-bg-secondary px-2 py-1" style="font-size:10px; letter-spacing:.05em;">LOGO</span>
                        <hr class="flex-grow-1 m-0">
                    </div>
                    <div class="row g-3">
                        <div class="col-12">
                            @if ($company->logo)
                            <div class="d-flex align-items-center gap-3 p-3 rounded mb-3" style="background:#f8f9fb; border:1px dashed #dee2e6;">
                                <img src="{{ asset('assets/images/logo/' . $company->logo) }}" alt="Logo" style="max-height:60px; max-width:180px; object-fit:contain;">
                                <div>
                                    <div class="fw-semibold small">Aktuelles Logo</div>
                                    <div class="text-muted small">{{ $company->logo }}</div>
                                </div>
                            </div>
                            @endif
                            <input type="file" class="form-control" name="logo" accept=".png,.jpg,.jpeg">
                            <div class="form-text">PNG oder JPG, max. 2 MB. Leer lassen = Logo unverändert.</div>
                        </div>
                    </div>

                </div>

                {{-- Footer --}}
                <div class="modal-footer border-0 px-4 py-3" style="background:#f8f9fb;">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-floppy me-1"></i> Speichern
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>
@endif

{{-- Page --}}
<div class="container-fluid py-4" style="max-width: 960px;">

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Firmendaten</h4>
            <small class="text-muted">Stammdaten &amp; Kontaktinformationen</small>
        </div>
        @if(Auth::user()->get_employee->is_mgt)
        <button class="btn btn-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#edit-company-modal">
            <i class="bi bi-pencil me-1"></i>Bearbeiten
        </button>
        @endif
    </div>

    @if(session('msg'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm py-2 mb-4">
            <i class="bi bi-check-circle me-2"></i>{{ session('msg') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Firmen-Header-Card --}}
    <div class="card border-0 shadow-sm mb-3" style="border-left: 4px solid #3b82f6 !important;">
        <div class="card-body px-4 py-3 d-flex align-items-center gap-4">
            <div class="flex-shrink-0">
                @if($company->logo)
                    <img src="{{ asset('assets/images/logo/' . $company->logo) }}"
                         alt="Logo" style="max-height:56px; max-width:160px; object-fit:contain;">
                @else
                    <span class="bg-primary bg-opacity-10 text-primary rounded-3 d-flex align-items-center justify-content-center"
                          style="width:56px; height:56px; font-size:24px;">
                        <i class="bi bi-building"></i>
                    </span>
                @endif
            </div>
            <div class="flex-grow-1">
                <h5 class="fw-bold mb-0">{{ $company->name ?? '—' }}</h5>
                @if($company->app_name)
                    <div class="text-muted small mt-1">{{ $company->app_name }}</div>
                @endif
            </div>
            @if($company->webseite || $company->email)
            <div class="text-end d-none d-md-block">
                @if($company->webseite)
                    <div class="small text-muted"><i class="bi bi-globe me-1"></i>{{ $company->webseite }}</div>
                @endif
                @if($company->email)
                    <div class="small text-muted"><i class="bi bi-envelope me-1"></i>{{ $company->email }}</div>
                @endif
            </div>
            @endif
        </div>
    </div>

    {{-- Info Cards: 3 Spalten --}}
    <div class="row g-3 mb-3">

        {{-- Adresse --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100" style="border-left: 3px solid #64748b !important;">
                <div class="card-body px-3 py-3">
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <i class="bi bi-geo-alt-fill text-secondary"></i>
                        <span class="fw-semibold small text-uppercase text-secondary" style="letter-spacing:.06em;">Adresse</span>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        <div>
                            <div class="text-muted" style="font-size:.7rem;">Straße</div>
                            <div class="small">{{ trim(($company->str ?? '') . ' ' . ($company->hn ?? '')) ?: '—' }}</div>
                        </div>
                        <div>
                            <div class="text-muted" style="font-size:.7rem;">PLZ / Ort</div>
                            <div class="small">{{ trim(($company->plz ?? '') . ' ' . ($company->ort ?? '')) ?: '—' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Kontakt --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100" style="border-left: 3px solid #3b82f6 !important;">
                <div class="card-body px-3 py-3">
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <i class="bi bi-telephone-fill text-primary"></i>
                        <span class="fw-semibold small text-uppercase text-primary" style="letter-spacing:.06em;">Kontakt</span>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        @if($company->tel)
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-telephone text-muted" style="font-size:.75rem; width:14px;"></i>
                            <span class="small">{{ $company->tel }}</span>
                        </div>
                        @endif
                        @if($company->fax)
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-printer text-muted" style="font-size:.75rem; width:14px;"></i>
                            <span class="small">{{ $company->fax }}</span>
                        </div>
                        @endif
                        @if($company->email)
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-envelope text-muted" style="font-size:.75rem; width:14px;"></i>
                            <span class="small">{{ $company->email }}</span>
                        </div>
                        @endif
                        @if($company->webseite)
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-globe text-muted" style="font-size:.75rem; width:14px;"></i>
                            <span class="small">{{ $company->webseite }}</span>
                        </div>
                        @endif
                        @if(!$company->tel && !$company->fax && !$company->email && !$company->webseite)
                            <span class="text-muted small">—</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Steuer --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100" style="border-left: 3px solid #f59e0b !important;">
                <div class="card-body px-3 py-3">
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <i class="bi bi-receipt text-warning"></i>
                        <span class="fw-semibold small text-uppercase text-warning" style="letter-spacing:.06em;">Steuer</span>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        <div>
                            <div class="text-muted" style="font-size:.7rem;">Steuernummer</div>
                            <div class="small font-monospace">{{ $company->steuer_nr ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-muted" style="font-size:.7rem;">USt-IdNr.</div>
                            <div class="small font-monospace">{{ $company->ust_id ?? '—' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- Bankkonten --}}
    <div class="card border-0 shadow-sm" style="border-left: 3px solid #22c55e !important;">
        <div class="card-body px-3 py-3">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-bank text-success"></i>
                    <span class="fw-semibold small text-uppercase text-success" style="letter-spacing:.06em;">Bankkonten</span>
                </div>
                @if(Auth::user()->get_employee->is_mgt)
                <button class="btn btn-sm btn-outline-success rounded-pill px-3"
                        data-bs-toggle="modal" data-bs-target="#addBankModal">
                    <i class="bi bi-plus-lg me-1"></i>Hinzufügen
                </button>
                @endif
            </div>

            @if($bankAccounts->isEmpty())
            <p class="text-muted small mb-0">Noch keine Bankkonten hinterlegt.</p>
            @else
            <div class="row g-2">
                @foreach($bankAccounts as $ba)
                <div class="col-md-6 col-xl-4">
                    <div class="rounded-3 px-3 py-2 h-100 d-flex flex-column gap-1"
                         style="background:{{ $ba->is_default ? '#f0fdf4' : '#f8fafc' }}; border: 1px solid {{ $ba->is_default ? '#86efac' : '#e2e8f0' }};">
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="fw-semibold small">{{ $ba->bank_name ?? '—' }}</span>
                            @if($ba->is_default)
                                <span class="badge bg-success" style="font-size:.65rem;"><i class="bi bi-star-fill me-1"></i>Standard</span>
                            @elseif(Auth::user()->get_employee->is_mgt)
                                <form method="POST" action="{{ route('system.company.bank.default', $ba->id) }}" class="mb-0">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-secondary py-0 px-2" style="font-size:.65rem; line-height:1.6;">
                                        Als Standard
                                    </button>
                                </form>
                            @endif
                        </div>
                        <div class="text-muted" style="font-size:.72rem;">{{ $ba->account_holder ?? '' }}</div>
                        <div class="font-monospace" style="font-size:.72rem; color:#374151;">{{ $ba->iban ?? '—' }}</div>
                        <div class="font-monospace text-muted" style="font-size:.7rem;">{{ $ba->bic ?? '' }}</div>
                        @if(Auth::user()->get_employee->is_mgt)
                        <div class="d-flex gap-1 mt-1">
                            <button class="btn btn-outline-primary py-0 px-2 btn-edit-bank"
                                    data-id="{{ $ba->id }}"
                                    data-bank="{{ $ba->bank_name }}"
                                    data-holder="{{ $ba->account_holder }}"
                                    data-iban="{{ $ba->iban }}"
                                    data-bic="{{ $ba->bic }}"
                                    style="font-size:.7rem;">
                                <i class="bi bi-pencil me-1"></i>Bearbeiten
                            </button>
                            <form method="POST" action="{{ route('system.company.bank.delete', $ba->id) }}" class="mb-0"
                                  onsubmit="return confirm('Bankkonto wirklich entfernen?')">
                                @csrf
                                <button type="submit" class="btn btn-outline-danger py-0 px-2" style="font-size:.7rem;">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>

</div>

{{-- Modal: Bankkonto hinzufügen --}}
@if(Auth::user()->get_employee->is_mgt)
<div class="modal fade" id="addBankModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('system.company.bank.store') }}">
                @csrf
                <div class="modal-header">
                    <h6 class="modal-title"><i class="bi bi-bank me-2"></i>Bankkonto hinzufügen</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Bank</label>
                        <input type="text" class="form-control" name="bank_name" placeholder="z.B. Sparkasse Potsdam">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Kontoinhaber</label>
                        <input type="text" class="form-control" name="account_holder" placeholder="Firmenname GmbH">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">IBAN</label>
                        <input type="text" class="form-control font-monospace" name="iban" placeholder="DE12 3456 7890 1234 5678 90">
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">BIC</label>
                        <input type="text" class="form-control font-monospace" name="bic" placeholder="BELADEBEXXX">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-sm btn-success"><i class="bi bi-floppy me-1"></i>Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Bankkonto bearbeiten --}}
<div class="modal fade" id="editBankModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="editBankForm" action="">
                @csrf
                <div class="modal-header">
                    <h6 class="modal-title"><i class="bi bi-pencil me-2"></i>Bankkonto bearbeiten</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Bank</label>
                        <input type="text" class="form-control" name="bank_name" id="edit_bank_name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Kontoinhaber</label>
                        <input type="text" class="form-control" name="account_holder" id="edit_account_holder">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">IBAN</label>
                        <input type="text" class="form-control font-monospace" name="iban" id="edit_iban">
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">BIC</label>
                        <input type="text" class="form-control font-monospace" name="bic" id="edit_bic">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-floppy me-1"></i>Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<script>
    (function () {
        'use strict';
        var forms = document.querySelectorAll('.needs-validation');
        Array.prototype.slice.call(forms).forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    })();

    @if($errors->any())
        var modal = new bootstrap.Modal(document.getElementById('edit-company-modal'));
        modal.show();
    @endif

    document.querySelectorAll('.btn-edit-bank').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const id = this.dataset.id;
            document.getElementById('edit_bank_name').value      = this.dataset.bank   ?? '';
            document.getElementById('edit_account_holder').value = this.dataset.holder ?? '';
            document.getElementById('edit_iban').value           = this.dataset.iban   ?? '';
            document.getElementById('edit_bic').value            = this.dataset.bic    ?? '';
            document.getElementById('editBankForm').action       =
                '{{ url("system/firma/bankkonto") }}/' + id;
            new bootstrap.Modal(document.getElementById('editBankModal')).show();
        });
    });
</script>

@endsection