@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-column-fluid">

    {{-- ── TOOLBAR ── --}}
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Agency Profile</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">Agency Profile</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- ── CONTENT ── --}}
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">

            {{-- Agency Header --}}
            <div class="card mb-2 mb-xxl-8">
                <div class="card-body pt-9 pb-0">
                    @include('admin.agency.agency_header')
                </div>
            </div>

            <div class="row g-5 g-xxl-8">
                <div class="col-xl-12">

                    {{-- ── SUCCESS ALERT ── --}}
                    @if(session()->has('success'))
                    <div class="alert alert-dismissible bg-light-success d-flex flex-column flex-sm-row p-5 mb-4" style="border-radius:12px;">
                        <i class="ki-duotone ki-notification-bing fs-2hx text-success me-4 mb-5 mb-sm-0"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                        <div class="d-flex flex-column pe-0 pe-sm-10">
                            <span>{{ session()->get('success') }}</span>
                        </div>
                        <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
                            <i class="ki-duotone ki-cross fs-1 text-success"><span class="path1"></span><span class="path2"></span></i>
                        </button>
                    </div>
                    @endif

                    {{-- ── WALLET BALANCE CARD ── --}}
                    <div class="card border-0 shadow-sm mb-5">
                        <div class="card-header d-flex justify-content-between align-items-center py-4"
                             style="background: linear-gradient(135deg, #1565C0, #1976D2); border-radius: 12px 12px 0 0;">
                            <h5 class="mb-0 text-white fw-bold">
                                <i class="fa fa-wallet me-2"></i> Wallet Balance
                            </h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-3 mb-2">
                                <div class="col-md-4">
                                    <div class="detail-card text-center">
                                        <div class="detail-icon">💵</div>
                                        <div class="detail-label">Current Balance</div>
                                        <div class="detail-value" style="color:#1a6e2e; font-size:22px;">
                                            {{ optional($agency->wallet)->balance ?? 0 }}
                                            <small style="font-size:13px; color:#888; font-weight:400;"> {{ $agency->currency->c_shortname }}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <a href="#" class="btn btn-primary rounded-pill px-4"
                                   data-bs-toggle="modal" data-bs-target="#wallet_balance_modal">
                                    <i class="fa fa-plus me-2"></i> Add Balance
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- ── TRANSACTION HISTORY ── --}}
                    <div class="card border-0 shadow-sm">
                        <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3">
                            <h5 class="mb-0 fw-bold">
                                <i class="fa fa-history me-2 text-primary"></i> Wallet Transaction History
                                <small class="text-primary fs-7 fw-normal ms-1">( Last 10 Transactions )</small>
                            </h5>
                        </div>

                        <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">Date</th>
                                        <th class="py-3">Type</th>
                                        <th class="py-3">Remarks</th>
                                        <th class="py-3">Amount</th>
                                        <th class="py-3">Balance After</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($wallet_transactions as $txn)
                                    <tr>
                                        <td class="px-4">{{ $txn->created_at->format('d M Y H:i') }}</td>
                                        <td>
                                            <span class="txn-badge txn-badge--{{ $txn->type }}">
                                                {{ ucfirst($txn->type) }}
                                            </span>
                                        </td>
                                        <td>{{ ucfirst($txn->reference_id) }}</td>
                                        <td class="{{ $txn->type === 'deposit' ? 'text-success fw-bold' : 'text-danger fw-bold' }}">
                                            {{ $txn->type === 'deposit' ? '+' : '-' }}{{ number_format($txn->amount, 3) }}
                                        </td>
                                        <td>{{ number_format($txn->balance_after, 3) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>


{{-- ── WALLET MODAL ── --}}
<div class="modal fade" id="wallet_balance_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-550px">
        <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);">
                <h5 class="modal-title fw-bold mb-0">
                    <i class="fa fa-wallet me-2"></i> Update Wallet Amount
                </h5>
                <div class="btn btn-sm btn-icon btn-active-color-primary ms-auto" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1 text-white"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body p-4">
                <form id="wallet_balance_modal_form" class="form" action="{{ route('admin.agency.updateWallet', $agency->uuid) }}" method="post">
                    @csrf
                    @method('PUT')
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Current Wallet Balance</label>
                        <input type="text" class="form-control" name="current_balance"
                               value="{{ optional($agency->wallet)->balance ?? 0 }}" readonly/>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Wallet Recharge Amount <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" placeholder="Add Wallet Recharge Amount" name="wallet_recharge"/>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Remarks</label>
                        <input type="text" class="form-control" placeholder="Remarks" name="reference_id"/>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4 me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                            <i class="fa fa-check me-2"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.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; }

.txn-badge {
    display:inline-block; padding:3px 12px;
    border-radius:20px; font-size:12px; font-weight:600;
}
.txn-badge--deposit  { background:#e8f5e9; color:#2e7d32; }
.txn-badge--debit    { background:#ffebee; color:#c62828; }
.txn-badge--withdraw { background:#ffebee; color:#c62828; }
</style>

@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        $('#wallet_balance_modal_form').on('submit', function (e) {
            let rechargeAmount = $('input[name="wallet_recharge"]').val().trim();
            $('.wallet-error').remove();
            if (rechargeAmount === '' || parseFloat(rechargeAmount) <= 0) {
                e.preventDefault();
                $('input[name="wallet_recharge"]').after(
                    '<div class="text-danger mt-2 wallet-error">Wallet recharge amount is required and must be greater than 0.</div>'
                );
                $('input[name="wallet_recharge"]').focus();
                return false;
            }
        });
    });
</script>
@endsection