@extends('master.app')
@section('title', 'Received Details')

@section('pageCSS')
<style>
    :root{
        --radius: 18px;
        --shadow: 0 14px 34px rgba(2, 6, 23, .08);
        --muted: #6b7280;
        --line: #e5e7eb;
    }

    .card-soft{ border:0; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
    .fade-in{ animation:fadeIn .25s ease-in-out; }
    @keyframes fadeIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    .hero{
        background: linear-gradient(135deg, #0d6efd, #4f46e5);
        color:#fff;
        position: relative;
    }
    .hero:before{
        content:"";
        position:absolute;
        width:330px;height:330px;border-radius:999px;
        background: rgba(255,255,255,.14);
        top:-130px; right:-130px;
        pointer-events:none;
    }
    .hero .inner{ position:relative; z-index:2; }

    .pill{
        padding:.35rem .75rem;
        border-radius:999px;
        background: rgba(255,255,255,.16);
        border: 1px solid rgba(255,255,255,.22);
        display:inline-flex; align-items:center; gap:.45rem;
        font-size:.9rem; white-space:nowrap;
    }

    .kv{
        display:flex; justify-content:space-between; align-items:center;
        padding:.55rem 0; border-bottom:1px dashed var(--line);
    }
    .kv:last-child{ border-bottom:0; }
    .kv .k{ color:var(--muted); }
    .kv .v{ font-weight:700; color:#111827; }

    .btn-rounded{ border-radius:999px; }
    .btn-soft{
        background: rgba(2, 132, 199, .10);
        color:#0369a1; border:0;
    }
    .btn-soft:hover{ background: rgba(2, 132, 199, .16); }

    .mini-card{
        border: 1px solid #eef2ff;
        background: #f8fafc;
        border-radius: 14px;
        padding: 14px;
    }

    .label-badge{
        font-size:.8rem;
        padding:.25rem .6rem;
        border-radius:999px;
        background: rgba(15,23,42,.06);
        display:inline-flex;
        align-items:center;
        gap:.35rem;
    }
</style>
@endsection

@section('body')
<main class="app-content fade-in">
    @include('general.valert')

    {{-- HEADER --}}
    <div class="card-soft mb-3">
        <div class="hero p-4">
            <div class="inner d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div>
                    <h4 class="mb-1 fw-bold">
                        <i class="fas fa-receipt me-1"></i> Received Voucher
                    </h4>
                    <div class="text-white-50 small">
                        Details • Audit friendly • Print A4 / Small Printer
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2">
                    <span class="pill">
                        <i class="fas fa-hashtag"></i>
                        #{{ $data->recieved_number }}
                    </span>
                    <span class="pill">
                        <i class="fas fa-calendar"></i>
                        {{ $data->date }}
                    </span>

                    <a href="{{ route('customer_recieved.index') }}" class="btn btn-light btn-sm btn-rounded px-3">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </a>

                    <a href="{{ route('customer_recieved.edit', $data->id) }}" class="btn btn-warning btn-sm btn-rounded px-3">
                        <i class="fas fa-pen-to-square me-1"></i> Edit
                    </a>

                    {{-- Print (open print page) --}}
                    <a target="_blank"
                       href="{{ route('customer_recieved.recipt', $data->id) }}?paper=a4"
                       class="btn btn-success btn-sm btn-rounded px-3">
                        <i class="fas fa-print me-1"></i> Print A4
                    </a>

                    <a target="_blank"
                       href="{{ route('customer_recieved.recipt', $data->id) }}?paper=80"
                       class="btn btn-dark btn-sm btn-rounded px-3">
                        <i class="fas fa-receipt me-1"></i> Small Printer (80mm)
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-white p-4">
            <div class="row g-3">

                {{-- LEFT: SUMMARY --}}
                <div class="col-lg-5">
                    <div class="mini-card">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="fw-bold mb-0"><i class="fas fa-circle-info me-1"></i> Summary</h6>

                            @php
                                $payMap = [1=>'Cash',2=>'Bank',3=>'Sarafi',4=>'Token'];
                                $pay = $payMap[$data->transaction_id] ?? '—';
                                $ctarget = $data->c_target == 1 ? 'Yes' : 'No';
                                $currency = optional($data->currency)->title_en ?? '';
                            @endphp

                            <span class="label-badge">
                                <i class="fas fa-right-left"></i> {{ $pay }}
                            </span>
                        </div>

                        <div class="kv">
                            <div class="k"><i class="fas fa-user me-1"></i> Customer</div>
                            <div class="v">{{ optional($data->customer)->name }}</div>
                        </div>

                        <div class="kv">
                            <div class="k"><i class="fas fa-phone me-1"></i> Phone</div>
                            <div class="v">{{ optional($data->customer)->phone ?? '-' }}</div>
                        </div>

                        <div class="kv">
                            <div class="k"><i class="fas fa-location-dot me-1"></i> Address</div>
                            <div class="v">{{ optional($data->customer)->address ?? '-' }}</div>
                        </div>

                        <div class="kv">
                            <div class="k"><i class="fas fa-heading me-1"></i> Title</div>
                            <div class="v">{{ $data->title }}</div>
                        </div>

                        <div class="kv">
                            <div class="k"><i class="fas fa-bullseye me-1"></i> Cash Target</div>
                            <div class="v">{{ $ctarget }}</div>
                        </div>

                        <div class="kv">
                            <div class="k"><i class="fas fa-coins me-1"></i> Currency</div>
                            <div class="v">{{ $currency }}</div>
                        </div>

                        @if($data->currency_id != 1)
                            <div class="kv">
                                <div class="k"><i class="fas fa-exchange-alt me-1"></i> Ex. Rate</div>
                                <div class="v">{{ $data->ex_rate ?? '-' }}</div>
                            </div>
                        @endif

                        <div class="kv">
                            <div class="k"><i class="fas fa-note-sticky me-1"></i> Details</div>
                            <div class="v">{{ $data->details ?? '-' }}</div>
                        </div>
                    </div>
                </div>

                {{-- RIGHT: BALANCE --}}
                <div class="col-lg-7">
                    @php
                        // Before amount = current balance + received amount
                        $previous_balance = $tbalance + ($data->amount ?? 0);
                        $new_balance = $tbalance; // after this received
                    @endphp

                    <div class="mini-card">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="fw-bold mb-0"><i class="fas fa-calculator me-1"></i> Customer Ledger Snapshot</h6>
                            <span class="label-badge">
                                <i class="fas fa-shield-halved"></i> Auto calculated
                            </span>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="p-3 rounded-3 border bg-white">
                                    <div class="text-muted small"><i class="fas fa-clock-rotate-left me-1"></i> Previous Balance</div>
                                    <div class="h5 fw-bold mb-0">{{ $previous_balance }} {{ $currency }}</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="p-3 rounded-3 border bg-white">
                                    <div class="text-muted small"><i class="fas fa-hand-holding-dollar me-1"></i> Received Amount</div>
                                    <div class="h5 fw-bold mb-0">{{ $data->amount }} {{ $currency }}</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="p-3 rounded-3 border bg-white">
                                    <div class="text-muted small"><i class="fas fa-wallet me-1"></i> New Balance</div>
                                    <div class="h5 fw-bold mb-0">{{ $new_balance }} {{ $currency }}</div>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('customer_recieved.delete', $data->id) }}"
                               onclick="return confirm('Are you sure you want to delete this item?')"
                               class="btn btn-outline-danger btn-rounded px-4">
                                <i class="fas fa-trash me-1"></i> Delete
                            </a>

                            <a target="_blank"
                               href="{{ route('customer_recieved.recipt', $data->id) }}?paper=a4"
                               class="btn btn-primary btn-rounded px-4">
                                <i class="fas fa-print me-1"></i> Print Receipt
                            </a>
                        </div>
                    </div>

                    <div class="hint mt-2">
                        <i class="fas fa-circle-info me-1"></i>
                        “Previous Balance” is calculated as (New Balance + Received Amount).
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('pageJs')
<script>
    $(".app-menu").removeClass("active");
    $("#nav_salei").addClass("active");
    $("#salei").addClass("is-expanded");
    $("#customer_recieved").addClass("active");
</script>
@endsection