@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

    <div class="d-flex justify-content-between align-items-center mb-4 no-print">
        <div>
            <h4 class="fw-bold text-dark mb-1">Vendor Ledger Statement</h4>
            <p class="text-muted small mb-0">Detailed financial summary and profile logs for <strong>{{ $vendor->name
                    }}</strong></p>
        </div>
        <div class="d-flex gap-2">
            <button onclick="window.print()" class="btn btn-dark btn-sm px-3 rounded-3 shadow-sm">
                <i class="bi bi-printer me-1"></i> Print Statement
            </button>
            <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-secondary btn-sm px-3 rounded-3">
                <i class="bi bi-arrow-left me-1"></i> Back to Hub
            </a>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <div class="bg-indigo-100 text-primary rounded-circle d-inline-flex p-3 mb-2"
                            style="background-color: rgba(79, 70, 229, 0.1); color: #4f46e5;">
                            <i class="bi bi-building fs-2"></i>
                        </div>
                        <h5 class="fw-bold text-dark mb-0">{{ $vendor->name }}</h5>
                        <span class="badge bg-light text-indigo-600 border mt-2" style="color: #4f46e5;">{{
                            $vendor->vendor_code }}</span>
                    </div>

                    <hr class="text-muted opacity-20">

                    <div class="vstack gap-3 mt-3">
                        <div>
                            <small class="text-muted d-block text-uppercase small fw-bold"
                                style="font-size: 10px;">Mobile Number</small>
                            <span class="text-dark fw-semibold"><i class="bi bi-telephone me-2 text-secondary"></i>{{
                                $vendor->mobile_number }}</span>
                        </div>
                        <div>
                            <small class="text-muted d-block text-uppercase small fw-bold"
                                style="font-size: 10px;">Email Address</small>
                            <span class="text-dark small"><i class="bi bi-envelope me-2 text-secondary"></i>{{
                                $vendor->email_id ?? 'N/A' }}</span>
                        </div>
                        <div>
                            <small class="text-muted d-block text-uppercase small fw-bold" style="font-size: 10px;">GST
                                Identification</small>
                            <span class="font-monospace text-dark bg-light px-2 py-0.5 rounded border small">{{
                                $vendor->gst_number ?? 'Not Registered' }}</span>
                        </div>
                        <div>
                            <small class="text-muted d-block text-uppercase small fw-bold"
                                style="font-size: 10px;">Default Payment Terms</small>
                            <span class="badge bg-light text-dark border"><i
                                    class="bi bi-credit-card me-1 text-secondary"></i>{{ $vendor->payment_terms ??
                                'Standard' }}</span>
                        </div>
                        <div>
                            <small class="text-muted d-block text-uppercase small fw-bold"
                                style="font-size: 10px;">Registered Office Address</small>
                            <p class="text-secondary small mb-0 mt-1" style="line-height: 1.4;"><i
                                    class="bi bi-geo-alt me-1 text-secondary"></i>{{ $vendor->address ?? 'No physical
                                address logged.' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white border-bottom py-3 px-4">
                    <h5 class="mb-0 fw-bold text-dark"><i class="bi bi-calculator me-2 text-indigo-600"
                            style="color: #4f46e5;"></i>Account Balance </h5>
                </div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <div class="p-4 bg-light rounded-3 border h-100">
                                <span class="text-muted small text-uppercase d-block fw-bold"
                                    style="font-size: 11px;">Total Purchase Volume</span>
                                <h2 class="fw-bold text-dark mt-2 mb-0">₹{{
                                    number_format($vendor->total_purchase_amount, 2) }}</h2>
                                <small class="text-muted mt-2 d-block">Cumulative procurement metrics</small>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="p-4 bg-danger bg-opacity-10 rounded-3 border border-danger border-opacity-20 h-100"
                                style="background-color: rgba(220, 53, 69, 0.05);">
                                <span class="text-danger small text-uppercase d-block fw-bold"
                                    style="font-size: 11px;">Net Outstanding Dues</span>
                                <h2 class="fw-bold text-danger mt-2 mb-0">₹{{
                                    number_format($vendor->pending_payment_amount, 2) }}</h2>
                                <small class="text-muted mt-2 d-block">Pending accounts payable</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white border-bottom py-3 px-4">
                    <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-journal-text me-2 text-secondary"></i>Item
                        Procurement Timeline (Logs)</h6>
                </div>
                <div class="card-body p-4 text-center text-muted py-5">
                    <i class="bi bi-clock-history fs-3 opacity-40 d-block mb-2"></i>
                    <span class="small">Master profile connected cleanly. Individual item level billing summaries will
                        reflect automatically upon next purchase phase.</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection