@extends('layouts.app')

@section('content')

{{-- ── SUCCESS TOAST ── --}}
@if(session('success'))
<div id="successToast" class="agency-toast">
    <span class="toast-icon">✅</span>
    <div>
        <div class="toast-title">Success</div>
        <div class="toast-msg">{{ session('success') }}</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif


<div class="card border-0 shadow-sm">

    {{-- ── CARD HEADER ── --}}
    <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3">
        <h3 class="mb-0">
            <i class="fa fa-building me-2 text-primary"></i> View Agencies
        </h3>

        <div class="d-flex align-items-center gap-3 flex-wrap">

            <span class="badge text-white bg-primary fs-6 px-3 py-2">
                {{ $agencies->total() }} Total
            </span>

            <a href="{{ route('admin.agency.create') }}" class="btn btn-primary">
                <i class="fa fa-plus me-1"></i> Add Agency
            </a>

        </div>
    </div>


    {{-- ── TABLE ── --}}
    <div class="card-body p-0">
        <table class="table table-hover align-middle mb-0">
            <thead style="background:#f8f9fc;">
                <tr>
                    <th class="px-4 py-3" style="width:60px;">SL</th>
                    <th class="py-3">Agency</th>
                    <th class="py-3">Balance</th>
                    <th class="py-3">Credit Limit</th>
                    <th class="py-3">Currency</th>
                    <th class="py-3">Country</th>
                    <th class="py-3">Status</th>
                    <th class="py-3 text-center" style="width:130px;">Action</th>
                </tr>
            </thead>

            <tbody>
                @forelse($agencies as $key => $agency)
                <tr>
                    <td class="px-4 text-muted">{{ $agencies->firstItem() + $key }}</td>

                    <td>
                        <div class="d-flex align-items-center gap-3">
                            <img src="{{ asset('storage/logos/' . $agency->agency_logo) }}"
                                 width="48" height="48"
                                 style="border-radius:10px; object-fit:cover; border:1px solid #eee;">
                            <div>
                                <a href="{{ route('admin.agency.details', $agency->uuid) }}"
                                class="fw-bold text-gray-900 text-hover-primary text-decoration-none mb-0 fs-6 d-block">
                                    {{ $agency->agency_name }}
                                </a>
                                <div class="small text-muted">{{ $agency->agency_code }}</div>

                                

                                <div class="small text-muted">
                                    {{ $agency->agency_email }}
                                </div>
                            </div>
                        </div>
                    </td>

                    <td>
                        <span class="price-badge">
                            {{ optional($agency->wallet)->balance ?? 0 }}
                        </span>
                    </td>

                    <td>{{ $agency->credit_limit }}</td>

                    <td>
                        <span class="dest-badge">
                            {{ $agency->currency->c_shortname }}
                        </span>
                    </td>

                    <td>{{ $agency->country_id }}</td>

                    <td>
                        <span class="status-badge">Approved</span>
                    </td>

                    <td class="text-center">
                        <div class="d-flex gap-2 justify-content-center">

                            <button class="action-btn action-btn--view"
                                data-bs-toggle="modal"
                                data-bs-target="#agencyModal{{ $agency->id }}"
                                title="View Details">
                                <i class="fa fa-eye"></i>
                            </button>

                            <a href="{{ route('admin.agency.details', $agency->uuid) }}"
                               class="action-btn action-btn--edit" title="Edit">
                                <i class="fa fa-pen"></i>
                            </a>

                            <a href="#" class="action-btn action-btn--delete" title="Delete">
                                <i class="fa fa-trash"></i>
                            </a>

                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted py-5">
                        <i class="fa fa-building fa-2x mb-2 d-block"></i>
                        No agencies added yet.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>


    {{-- ── PAGINATION ── --}}
    @if($agencies->hasPages())
    <div class="card-footer bg-white border-top px-4 py-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <p class="mb-0 text-muted small">
            Showing <strong>{{ $agencies->firstItem() }}</strong>–<strong>{{ $agencies->lastItem() }}</strong>
            of <strong>{{ $agencies->total() }}</strong> agenc{{ $agencies->total() !== 1 ? 'ies' : 'y' }}
        </p>
        {{ $agencies->onEachSide(1)->links() }}
    </div>
    @endif

</div>


{{-- ── VIEW DETAILS MODALS ── --}}
@foreach($agencies as $agency)
<div class="modal fade" id="agencyModal{{ $agency->id }}" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            <div class="modal-header border-0 py-4 px-4 text-white"
                 style="background: linear-gradient(135deg, #1565C0, #1976D2);">
                <div>
                    <h5 class="modal-title fw-bold mb-1">
                        <i class="fa fa-building me-2"></i> Agency Details
                    </h5>
                    <div class="small opacity-75">{{ $agency->agency_name }}</div>
                </div>
                <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-4">

                {{-- Summary cards row --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">🏢 Agency Information</div></div>

                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🏷️</div>
                            <div class="detail-label">Agency Name</div>
                            <div class="detail-value" style="font-size:13px;">{{ $agency->agency_name }}</div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">💵</div>
                            <div class="detail-label">Balance</div>
                            <div class="detail-value" style="">
                                {{ optional($agency->wallet)->balance ?? 0 }}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">💳</div>
                            <div class="detail-label">Credit Limit</div>
                            <div class="detail-value" style="font-size:13px;">{{ $agency->credit_limit }}</div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🌐</div>
                            <div class="detail-label">Currency</div>
                            <div class="detail-value" style="font-size:13px;">{{ $agency->currency->c_shortname }}</div>
                        </div>
                    </div>
                </div>

                {{-- Detail table --}}
                <table class="table table-bordered">
                    <tr>
                        <th width="180">Logo</th>
                        <td>
                            <img src="{{ asset('storage/logos/' . $agency->agency_logo) }}"
                                 width="100" style="border-radius:8px;">
                        </td>
                    </tr>
                    <tr><th>Agency Name</th><td>{{ $agency->agency_name }}</td></tr>
                    <tr><th>Email</th><td>{{ $agency->agency_email }}</td></tr>
                    <tr><th>Balance</th><td>{{ optional($agency->wallet)->balance ?? 0 }}</td></tr>
                    <tr><th>Credit Limit</th><td>{{ $agency->credit_limit }}</td></tr>
                    <tr><th>Currency</th><td>{{ $agency->currency->c_shortname }}</td></tr>
                    <tr><th>Country</th><td>{{ $agency->country_id }}</td></tr>
                    <tr>
                        <th>Status</th>
                        <td><span class="status-badge">Approved</span></td>
                    </tr>
                </table>

            </div>

            <div class="modal-footer border-0 px-4 pb-4 pt-0">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                    data-bs-dismiss="modal">Close</button>
                <a href="{{ route('admin.agency.details', $agency->uuid) }}" class="btn btn-primary rounded-pill px-4">
                    <i class="fa fa-pen me-2"></i> Edit Agency
                </a>
            </div>

        </div>
    </div>
</div>
@endforeach


<style>
/* ── Toast ── */
.agency-toast {
    position: fixed; bottom: 30px; right: 30px;
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    color: #fff; padding: 14px 18px; border-radius: 12px;
    font-size: 14px; font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 9999; display: flex; align-items: flex-start; gap: 12px;
    max-width: 340px; animation: slideInRight 0.4s ease;
}
.toast-icon  { font-size: 1.4rem; line-height:1; flex-shrink:0; margin-top:2px; }
.toast-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.toast-msg   { font-size: 12px; opacity: 0.9; line-height: 1.4; }
.toast-close { background:none; border:none; color:#fff; cursor:pointer; opacity:0.7; font-size:14px; margin-left:8px; padding:0; align-self:flex-start; margin-top:2px; }
.toast-close:hover { opacity:1; }
@keyframes slideInRight {
    from { opacity:0; transform:translateX(60px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ── Badges ── */
.dest-badge   { display:inline-block; background:#e8f5e9; color:#2e7d32; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.status-badge { display:inline-block; background:#e8f0fe; color:#1a56c4; padding:3px 12px; border-radius:20px; font-size:12px; font-weight:600; }

/* ── Detail modal ── */
.detail-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:#888; margin-bottom:4px; }
.detail-card  { background:#f8f9fc; border:1px solid #eef0f8; border-radius:12px; padding:16px; text-align:center; height:100%; }
.detail-icon  { font-size:1.4rem; margin-bottom:6px; }
.detail-label { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.detail-value { font-size:15px; font-weight:700; color:#1a1a2e; }

/* ── Action buttons ── */
.action-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:8px; border:none;
    cursor:pointer; font-size:14px; text-decoration:none;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.action-btn:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.15); }
.action-btn--view   { background:#e8f5e9; color:#2e7d32; }
.action-btn--view:hover   { background:#2e7d32; color:#fff; }
.action-btn--edit   { background:#e3f2fd; color:#1565c0; }
.action-btn--edit:hover   { background:#1565c0; color:#fff; }
.action-btn--delete { background:#ffebee; color:#c62828; }
.action-btn--delete:hover { background:#c62828; color:#fff; }

/* ── Pagination ── */
.pagination .page-link { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px !important; font-size:13px; font-weight:600; padding:0; color:#555; border:1px solid #dee2e6; transition:all 0.2s; }
.pagination .page-link:hover { background:#1976D2; border-color:#1976D2; color:#fff; }
.pagination .page-item.active .page-link { background:#1976D2; border-color:#1976D2; color:#fff; }
.pagination .page-item.disabled .page-link { opacity:0.4; pointer-events:none; }
</style>


<script>
var toast = document.getElementById('successToast');
if (toast) {
    setTimeout(function () {
        toast.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        toast.style.opacity    = '0';
        toast.style.transform  = 'translateX(60px)';
        setTimeout(function () { toast.remove(); }, 500);
    }, 4000);
}
</script>

@endsection