@extends('backend.master')
@section('title','Edit Installment #'.$installment->id)

@push('styles')
    {{-- Bootstrap Icons --}}
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
@endpush

@section('content')

<style>
    :root{
        --inst-primary:#dc2626;
        --inst-primary-soft:#fee2e2;
        --inst-bg:#f5f5f5;
    }

    .inst-edit-bg{
        background:var(--inst-bg);
    }

    .inst-card{
        border-radius:1rem;
        box-shadow:0 10px 28px rgba(15,23,42,.08);
        border:1px solid #e5e7eb;
        background:#fff;
    }

    .inst-section-title{
        font-size:.8rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:#6b7280;
        margin-bottom:.25rem;
    }

    .badge-status{
        border-radius:999px;
        padding:.25rem .6rem;
        font-size:.7rem;
        font-weight:600;
        display:inline-flex;
        align-items:center;
        gap:.25rem;
    }
    .badge-status .dot{
        width:.45rem;
        height:.45rem;
        border-radius:999px;
    }

    .badge-upcoming{
        background:#eff6ff;
        color:#1d4ed8;
    }
    .badge-upcoming .dot{ background:#3b82f6; }

    .badge-paid{
        background:#ecfdf3;
        color:#15803d;
    }
    .badge-paid .dot{ background:#22c55e; }

    .badge-late{
        background:#fef2f2;
        color:#b91c1c;
    }
    .badge-late .dot{ background:#ef4444; }

    .mini-label{
        font-size:.75rem;
        color:#6b7280;
        text-transform:uppercase;
        letter-spacing:.06em;
    }
    .mini-value{
        font-size:.9rem;
        font-weight:600;
        color:#111827;
    }

    .btn-soft-secondary{
        background:#f9fafb;
        color:#374151;
        border:1px solid #e5e7eb;
        border-radius:999px;
    }
    .btn-soft-secondary:hover{
        background:#e5e7eb;
        border-color:#d1d5db;
    }

    .btn-soft-primary{
        background:linear-gradient(135deg,#ef4444,#dc2626);
        color:#fff;
        border:none;
        border-radius:999px;
        box-shadow:0 12px 26px rgba(220,38,38,.45);
    }
    .btn-soft-primary:hover{
        filter:brightness(1.02);
        box-shadow:0 16px 34px rgba(185,28,28,.55);
    }

    @media (max-width:768px){
        .inst-header-stack{
            flex-direction:column;
            align-items:flex-start!important;
            gap:.4rem;
        }
    }
</style>

@php
    if ($installment->status === 'paid') {
        $statusClass = 'badge-paid';
        $statusLabel = 'Paid';
    } elseif ($installment->status === 'late') {
        $statusClass = 'badge-late';
        $statusLabel = 'Late';
    } else {
        $statusClass = 'badge-upcoming';
        $statusLabel = 'Upcoming';
    }
@endphp

<div class="inst-edit-bg py-3 py-md-4">
    <div class="container-fluid" style="max-width:900px;">

        <div class="d-flex inst-header-stack justify-content-between align-items-center mb-3">
            <div>
                <h5 class="mb-1 fw-semibold d-flex align-items-center gap-2">
                    <i class="bi bi-pencil-square text-danger fs-5"></i>
                    <span>Installment #{{ $installment->id }}</span>
                </h5>
                <small class="text-muted">
                    Loan #{{ $loan->id }} · User: {{ $loan->user?->name ?? 'N/A' }}
                </small>
            </div>

            <div class="d-flex flex-wrap gap-2 align-items-center">
                <span class="badge-status {{ $statusClass }}">
                    <span class="dot"></span>
                    {{ $statusLabel }}
                </span>

                <a href="{{ route('admin.loans.installments', $loan) }}"
                   class="btn btn-sm btn-soft-secondary d-inline-flex align-items-center gap-1">
                    <i class="bi bi-arrow-left"></i>
                    <span>Back to schedule</span>
                </a>
            </div>
        </div>

        {{-- Info card --}}
        <div class="card inst-card mb-3">
            <div class="card-body">
                <div class="inst-section-title mb-2">Installment info</div>

                <div class="row g-3">
                    <div class="col-sm-4">
                        <div class="mini-label">Due date</div>
                        <div class="mini-value">
                            {{ $installment->due_date?->format('d M Y') }}
                        </div>
                        <div class="text-muted small">
                            {{ $installment->due_date?->diffForHumans() }}
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="mini-label">Installment amount</div>
                        <div class="mini-value">
                            ৳ {{ number_format($installment->amount) }}
                        </div>
                        <div class="text-muted small">
                            P: {{ number_format($installment->principal_part) }},
                            I: {{ number_format($installment->interest_part) }}
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="mini-label">Current status</div>
                        <div class="mini-value text-capitalize">
                            {{ $installment->status }}
                        </div>
                        @if($installment->paid_at)
                            <div class="text-muted small">
                                <i class="bi bi-clock-history me-1"></i>
                                Paid at {{ $installment->paid_at->format('d M, H:i') }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Update form --}}
        <form method="POST" action="{{ route('admin.installments.update', $installment) }}">
            @csrf
            @method('PUT')

            <div class="card inst-card mb-3">
                <div class="card-body">
                    <div class="inst-section-title mb-2">Update payment</div>

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Status</label>
                            <select name="status"
                                    class="form-select @error('status') is-invalid @enderror">
                                <option value="upcoming" {{ old('status', $installment->status)==='upcoming' ? 'selected' : '' }}>Upcoming</option>
                                <option value="paid"     {{ old('status', $installment->status)==='paid'     ? 'selected' : '' }}>Paid</option>
                                <option value="late"     {{ old('status', $installment->status)==='late'     ? 'selected' : '' }}>Late</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                Paid করলে নিচের payment fields পূরণ করলে future reference সহজ হবে।
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Paid amount (BDT)</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-cash-stack"></i>
                                </span>
                                <input type="number"
                                       name="paid_amount"
                                       value="{{ old('paid_amount', $installment->paid_amount) }}"
                                       class="form-control @error('paid_amount') is-invalid @enderror"
                                       placeholder="e.g. {{ $installment->amount }}">
                                @error('paid_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text">
                                Status যদি paid হয়, তাহলে এই ফিল্ডটা অবশ্যই পূরণ করো।
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Payment method</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-credit-card-2-front"></i>
                                </span>
                                <input type="text"
                                       name="payment_method"
                                       value="{{ old('payment_method', $installment->payment_method) }}"
                                       class="form-control @error('payment_method') is-invalid @enderror"
                                       placeholder="bkash / nagad / bank">
                                @error('payment_method')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text">
                                ইচ্ছা করলে short name লিখতে পারো (যেমন: bkash, nagad).
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Payment TRX ID</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-upc-scan"></i>
                                </span>
                                <input type="text"
                                       name="payment_trx_id"
                                       value="{{ old('payment_trx_id', $installment->payment_trx_id) }}"
                                       class="form-control @error('payment_trx_id') is-invalid @enderror"
                                       placeholder="SMS / bank transaction id">
                                @error('payment_trx_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text">
                                ভবিষ্যতে verify করার সময় এই TRX ID কাজে আসবে।
                            </div>
                        </div>

                    </div>
                </div>

                <div class="card-footer bg-transparent border-0 pt-0 pb-3">
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('admin.loans.installments', $loan) }}"
                           class="btn btn-soft-secondary d-inline-flex align-items-center gap-1">
                            <i class="bi bi-x-circle"></i>
                            <span>Cancel</span>
                        </a>
                        <button type="submit"
                                class="btn btn-soft-primary d-inline-flex align-items-center gap-2">
                            <i class="bi bi-save2"></i>
                            <span>Save changes</span>
                        </button>
                    </div>
                </div>
            </div>

        </form>

    </div>
</div>
@endsection