@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .cost-center-show-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .cost-center-overview {
            padding: 1.25rem;
        }

        .cost-center-overview__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
        }

        .cost-center-title-box {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .cost-center-icon {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .cost-center-label {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .cost-center-title {
            color: #111827;
            font-size: 1.22rem !important;
            font-weight: 950;
            line-height: 1.25;
            margin: 0;
            overflow-wrap: anywhere;
        }

        .cost-center-actions {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .cost-center-details-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
        }

        .detail-box {
            border: 1px solid #eef2f7;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
        }

        .detail-box__label {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.35rem;
        }

        .detail-box__value {
            color: #111827;
            font-size: 1rem;
            font-weight: 900;
            overflow-wrap: anywhere;
        }

        .entries-card {
            padding: 0;
        }

        .entries-card__head {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .entries-card__title {
            color: #111827;
            font-size: 1.05rem !important;
            font-weight: 900;
            margin: 0;
        }

        .entries-card__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin: 0.2rem 0 0;
        }

        .cost-filter-box {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .cost-filter-form {
            display: grid;
            grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) auto auto;
            gap: 0.75rem;
            align-items: end;
        }

        .filter-field label {
            display: inline-block;
            margin-bottom: 0.4rem;
            color: #374151;
            font-size: 0.84rem;
            font-weight: 750;
        }

        .asset-input,
        .asset-select {
            width: 100% !important;
            min-height: 42px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.62rem 0.85rem;
            background: #fff;
            color: #111827;
            box-shadow: none !important;
            transition: 0.18s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            min-height: 42px;
            border-radius: 999px;
            padding: 0.62rem 1rem;
            font-size: 0.85rem;
            font-weight: 850;
            text-decoration: none;
            transition: 0.18s ease;
            border: 1px solid transparent;
            white-space: nowrap;
            cursor: pointer;
        }

        .asset-btn--primary {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .asset-btn--primary:hover {
            background: #1d4ed8;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
        }

        .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

        .entries-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .entries-table {
            min-width: 1080px;
            width: 100%;
            margin: 0;
            vertical-align: middle;
        }

        .entries-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.76rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

        .entries-table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            padding: 0.95rem 1rem;
            white-space: nowrap;
        }

        .entries-table tbody tr {
            transition: 0.16s ease;
        }

        .entries-table tbody tr:hover {
            background: #fbfdff;
        }

        .entry-cell {
            min-width: 240px;
        }

        .entry-id {
            color: #111827;
            font-size: 0.92rem;
            font-weight: 900;
            margin-bottom: 0.15rem;
        }

        .entry-ref {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 750;
            margin-bottom: 0.12rem;
        }

        .entry-desc {
            color: #94a3b8;
            font-size: 0.78rem;
            font-weight: 650;
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .entry-date {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.74rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .entry-type {
            text-transform: uppercase;
        }

        .creator-cell {
            color: #475569;
            font-weight: 750;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .money-debit {
            color: #166534;
            font-weight: 900;
        }

        .money-credit {
            color: #b91c1c;
            font-weight: 900;
        }

        .entry-actions {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }

        .review-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            min-height: 34px;
            border-radius: 999px;
            padding: 0.42rem 0.75rem;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #dbeafe;
            font-size: 0.78rem;
            font-weight: 850;
            text-decoration: none;
            transition: 0.18s ease;
        }

        .review-btn:hover {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
            transform: translateY(-1px);
        }

        .empty-state {
            padding: 3.5rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .empty-state i {
            display: block;
            font-size: 2.7rem;
            color: #cbd5e1;
            margin-bottom: 0.8rem;
        }

        .empty-state h6 {
            color: #475569;
            font-size: 1rem;
            font-weight: 900;
            margin: 0;
        }

        .empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        @media (max-width: 1199.98px) {
            .cost-filter-form {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .cost-center-details-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .cost-center-overview,
            .entries-card__head,
            .cost-filter-box,
            .table-pagination {
                padding: 1rem;
            }

            .cost-filter-form,
            .cost-center-details-grid {
                grid-template-columns: 1fr;
            }

            .cost-center-actions,
            .cost-center-actions .asset-btn {
                width: 100%;
            }
        }
    </style>

    <div class="container-fluid app-bg cost-center-show-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Cost Center Details"
                    description="Review cost center information and related journal entries across statuses, types, and date ranges.">
                    <a href="{{ route('cost_centers.index') }}" class="asset-btn asset-btn--secondary">
                        <i class="fas fa-arrow-left"></i>
                        Back
                    </a>
                </x-page-title>

                <div class="ui-card cost-center-overview">
                    <div class="cost-center-overview__head">
                        <div class="cost-center-title-box">
                            <div class="cost-center-icon">
                                <i class="fas fa-layer-group"></i>
                            </div>

                            <div>
                                <div class="cost-center-label">Cost Center</div>
                                <h4 class="cost-center-title">
                                    {{ $costCenter->title }}
                                </h4>
                            </div>
                        </div>

                        <div class="cost-center-actions">
                            <a href="{{ route('cost_centers.index') }}" class="asset-btn asset-btn--secondary">
                                <i class="fas fa-arrow-left"></i>
                                Back to List
                            </a>
                        </div>
                    </div>

                    <div class="cost-center-details-grid">
                        <div class="detail-box">
                            <div class="detail-box__label">Code</div>
                            <div class="detail-box__value">
                                {{ $costCenter->code }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card entries-card">
                    <div class="entries-card__head">
                        <div>
                            <h5 class="entries-card__title">Journal Entries For This Cost Center</h5>
                            <p class="entries-card__sub">
                                Includes draft, posted, and cancelled journal entries linked to this cost center.
                            </p>
                        </div>

                        <span class="ui-pill ui-pill--info">
                            <i class="fas fa-book"></i>
                            {{ method_exists($journalEntries, 'total') ? $journalEntries->total() : $journalEntries->count() }} Entry(s)
                        </span>
                    </div>

                    <div class="cost-filter-box">
                        <form method="GET" action="{{ route('cost_centers.show', $costCenter->id) }}" class="cost-filter-form">
                            <div class="filter-field">
                                <label for="search">Search</label>
                                <input type="text"
                                       id="search"
                                       name="search"
                                       class="asset-input"
                                       placeholder="Search ref/description/id"
                                       value="{{ request('search') }}">
                            </div>

                            <div class="filter-field">
                                <label for="status">Status</label>
                                <select name="status" id="status" class="asset-select">
                                    <option value="">All Statuses</option>
                                    <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="posted" {{ request('status') === 'posted' ? 'selected' : '' }}>Posted</option>
                                    <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                </select>
                            </div>

                            <div class="filter-field">
                                <label for="type">Type</label>
                                <select name="type" id="type" class="asset-select">
                                    <option value="">All Types</option>
                                    <option value="expense" {{ request('type') === 'expense' ? 'selected' : '' }}>Expense</option>
                                    <option value="payroll" {{ request('type') === 'payroll' ? 'selected' : '' }}>Payroll</option>
                                    <option value="transfer" {{ request('type') === 'transfer' ? 'selected' : '' }}>Transfer</option>
                                    <option value="manual" {{ request('type') === 'manual' ? 'selected' : '' }}>Manual</option>
                                </select>
                            </div>

                            <div class="filter-field">
                                <label for="start_date">Start Date</label>
                                <input type="date"
                                       id="start_date"
                                       name="start_date"
                                       class="asset-input"
                                       value="{{ request('start_date') }}">
                            </div>

                            <div class="filter-field">
                                <label for="end_date">End Date</label>
                                <input type="date"
                                       id="end_date"
                                       name="end_date"
                                       class="asset-input"
                                       value="{{ request('end_date') }}">
                            </div>

                            <div class="filter-field">
                                <label class="d-block">&nbsp;</label>
                                <button type="submit" class="asset-btn asset-btn--primary w-100">
                                    <i class="fas fa-filter"></i>
                                    Filter
                                </button>
                            </div>

                            <div class="filter-field">
                                <label class="d-block">&nbsp;</label>
                                <a href="{{ route('cost_centers.show', $costCenter->id) }}" class="asset-btn asset-btn--secondary w-100">
                                    Clear
                                </a>
                            </div>
                        </form>
                    </div>

                    <div class="entries-table-wrap">
                        <table class="entries-table">
                            <thead>
                                <tr>
                                    <th>Entry</th>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Creator</th>
                                    <th class="text-end">Debit</th>
                                    <th class="text-end">Credit</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse($journalEntries as $entry)
                                    @php
                                        $debit = $entry->lines->sum('debit');
                                        $credit = $entry->lines->sum('credit');
                                        $status = $entry->status ?? 'draft';

                                        $statusClass = match ($status) {
                                            'posted' => 'ui-pill--success',
                                            'cancelled' => 'ui-pill--neutral',
                                            'draft' => 'ui-pill--warn',
                                            default => 'ui-pill--neutral',
                                        };
                                    @endphp

                                    <tr>
                                        <td>
                                            <div class="entry-cell">
                                                <div class="entry-id">#{{ $entry->id }}</div>
                                                <div class="entry-ref">
                                                    Ref: {{ $entry->reference_no ?: '-' }}
                                                </div>
                                                <div class="entry-desc" title="{{ $entry->description ?: '-' }}">
                                                    {{ $entry->description ?: '-' }}
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <span class="entry-date">
                                                <i class="fas fa-calendar-alt"></i>
                                                {{ optional($entry->date)->format('Y-m-d') }}
                                            </span>
                                        </td>

                                        <td>
                                            <span class="ui-pill ui-pill--info entry-type">
                                                {{ strtoupper($entry->type ?? 'manual') }}
                                            </span>
                                        </td>

                                        <td>
                                            <span class="ui-pill {{ $statusClass }}">
                                                {{ strtoupper($status) }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="creator-cell" title="{{ $entry->creator->full_name ?? $entry->creator->name ?? 'System' }}">
                                                {{ $entry->creator->full_name ?? $entry->creator->name ?? 'System' }}
                                            </div>
                                        </td>

                                        <td class="text-end">
                                            <span class="money-debit">
                                                {{ number_format($debit, 2) }}
                                            </span>
                                        </td>

                                        <td class="text-end">
                                            <span class="money-credit">
                                                {{ number_format($credit, 2) }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="entry-actions">
                                                <a href="{{ route('journal_entries.review', $entry->id) }}" class="review-btn">
                                                    <i class="far fa-eye"></i>
                                                    Review
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8">
                                            <div class="empty-state">
                                                <i class="fas fa-book-open"></i>
                                                <h6>No journal entries found.</h6>
                                                <p>No journal entries found for this cost center.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($journalEntries instanceof \Illuminate\Pagination\LengthAwarePaginator)
                        <div class="table-pagination">
                            {{ $journalEntries->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection