@extends('layouts.app')

@section('title', 'Recurring Bill Details')

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small text-uppercase">
                <li class="breadcrumb-item"><a href="{{ route('recurring-bills.index') }}" class="text-decoration-none">Recurring Bills</a></li>
                <li class="breadcrumb-item active">Profile Details</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0 text-dark fw-bold">{{ $recurringBill->profile_name }}</h2>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('recurring-bills.edit', $recurringBill) }}" class="btn btn-white border shadow-sm px-4 fw-bold">Edit Profile</a>
        <form action="{{ route('recurring-bills.destroy', $recurringBill) }}" method="POST" onsubmit="return confirm('Delete this profile?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-light text-danger border shadow-sm px-4 fw-bold">Delete</button>
        </form>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="row mb-5">
                    <div class="col-6">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Vendor</label>
                        <h6 class="text-dark fw-bold mb-0">{{ $recurringBill->vendor->name }}</h6>
                    </div>
                    <div class="col-3 text-center border-start">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Status</label>
                        <span class="badge {{ $recurringBill->status == 'active' ? 'bg-success' : ($recurringBill->status == 'paused' ? 'bg-warning text-dark' : 'bg-danger') }} rounded-pill px-3">
                            {{ ucfirst($recurringBill->status) }}
                        </span>
                    </div>
                    <div class="col-3 text-end border-start">
                        <label class="small text-muted text-uppercase fw-bold d-block mb-1">Next Bill Date</label>
                        <h6 class="text-dark fw-bold mb-0">{{ $recurringBill->status != 'stopped' ? $recurringBill->next_bill_date->format('d M Y') : '-' }}</h6>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead class="bg-light text-muted small text-uppercase fw-bold">
                            <tr>
                                <th class="ps-0">Item Description</th>
                                <th class="text-center">Qty</th>
                                <th class="text-end">Rate</th>
                                <th class="text-end pe-0">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recurringBill->items as $item)
                            <tr>
                                <td class="ps-0 fw-bold text-dark">{{ $item->item_name }}</td>
                                <td class="text-center">{{ number_format($item->quantity, 2) }}</td>
                                 <td class="text-end">{{ formatCurrency($item->rate) }}</td>
                                 <td class="text-end pe-0 fw-bold">{{ formatCurrency($item->amount) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="row justify-content-end mt-4">
                    <div class="col-md-5">
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted fw-bold">SUB TOTAL</span>
                             <span class="fw-bold text-dark">{{ formatCurrency($recurringBill->subtotal) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted fw-bold">TAX ({{ optional($recurringBill->taxDetails)->rate ?? 0 }}%)</span>
                             <span class="fw-bold text-dark">{{ formatCurrency($recurringBill->tax_amount) }}</span>
                        </div>
                        <div class="d-flex justify-content-between border-top pt-2 mt-2">
                            <span class="fw-bold text-dark h5 mb-0">TOTAL</span>
                             <span class="fw-bold text-primary h5 mb-0">{{ formatCurrency($recurringBill->total) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($recurringBill->notes || $recurringBill->terms)
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm rounded-4 h-100">
                    <div class="card-body p-4">
                        <h6 class="small text-muted text-uppercase fw-bold mb-2">Notes</h6>
                        <p class="small text-muted mb-0">{!! nl2br(e($recurringBill->notes)) !!}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm rounded-4 h-100">
                    <div class="card-body p-4">
                        <h6 class="small text-muted text-uppercase fw-bold mb-2">Terms & Conditions</h6>
                        <p class="small text-muted mb-0">{!! nl2br(e($recurringBill->terms)) !!}</p>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark text-uppercase small mb-4">Schedule Information</h6>
                <div class="d-flex justify-content-between mb-3">
                    <span class="text-muted small">Frequency</span>
                    <span class="fw-bold small text-dark">Every {{ $recurringBill->interval_value }} {{ ucfirst(rtrim($recurringBill->frequency, 'ly')) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span class="text-muted small">Start Date</span>
                    <span class="fw-bold small text-dark">{{ $recurringBill->start_date->format('d M Y') }}</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span class="text-muted small">End Date</span>
                    <span class="fw-bold small text-dark">{{ $recurringBill->end_date ? $recurringBill->end_date->format('d M Y') : 'Never' }}</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between mb-3">
                    <span class="text-muted small">Auto Create</span>
                    <span class="badge bg-light text-dark border">{{ $recurringBill->auto_create_bill ? 'YES' : 'NO' }}</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span class="text-muted small">Auto Approve</span>
                    <span class="badge bg-light text-dark border">{{ $recurringBill->auto_approve_bill ? 'YES' : 'NO' }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection