@php
    $allSettings      = \App\Models\Setting::getAllAsArray();
    $currencySymbol   = $allSettings['currency_symbol']   ?? '₹';
    $currencyPosition = $allSettings['currency_position'] ?? 'before';
@endphp

@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0"><h3>Payment Plans</h3></div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Payment Plans</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Flash alerts --}}
            @foreach(['success','error'] as $type)
                @if(session($type))
                    <div class="container-fluid">
                        <div class="alert alert-{{ $type === 'error' ? 'danger' : $type }} alert-dismissible fade show">
                            <i class="fas fa-{{ $type === 'success' ? 'check-circle' : 'exclamation-circle' }} mr-2"></i>
                            {{ session($type) }}
                            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                        </div>
                    </div>
                @endif
            @endforeach

            <div class="container-fluid">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            All Plans
                            <span class="badge badge-primary ml-2">{{ $plans->count() }}</span>
                        </h5>
                        <a href="{{ route('payment-plans.create') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus mr-1"></i> New Plan
                        </a>
                    </div>

                    <div class="card-body p-0">
                        @if($plans->isEmpty())
                            <div class="text-center text-muted py-5">
                                <i class="fas fa-file-invoice-dollar fa-3x mb-3 d-block"></i>
                                No payment plans yet. <a href="{{ route('payment-plans.create') }}">Create one</a>
                            </div>
                        @else
                        <div class="pp-grid">
                            @foreach($plans as $plan)
                            <div class="pp-card {{ $plan->is_active ? '' : 'pp-card--inactive' }}" id="plan-card-{{ $plan->id }}">

                                {{-- Header --}}
                                <div class="pp-card-header">
                                    <div class="pp-card-title-row">
                                        <div>
                                            <div class="pp-card-name">{{ $plan->name }}</div>
                                            @if($plan->description)
                                                <div class="pp-card-desc">{{ $plan->description }}</div>
                                            @endif
                                        </div>
                                        <div class="pp-toggle-wrap">
                                            <label class="pp-toggle" title="{{ $plan->is_active ? 'Active' : 'Inactive' }}">
                                                <input type="checkbox"
                                                       class="pp-toggle-input"
                                                       data-id="{{ $plan->id }}"
                                                       {{ $plan->is_active ? 'checked' : '' }}>
                                                <span class="pp-toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>

                                    {{-- Summary pills --}}
                                    <div class="pp-pills">
                                        <span class="pp-pill pp-pill--blue">
                                            <i class="fas fa-list-ol"></i>
                                            {{ $plan->milestones->count() }} milestones
                                        </span>
                                        @php
                                            $total = $plan->milestones->sum('percentage');
                                        @endphp
                                        @if($total > 0)
                                        <span class="pp-pill pp-pill--gold">
                                            <i class="fas fa-percent"></i>
                                            {{ number_format($total, 0) }}% mapped
                                        </span>
                                        @endif
                                        <span class="pp-pill {{ $plan->is_active ? 'pp-pill--green' : 'pp-pill--grey' }}">
                                            <i class="fas fa-circle" style="font-size:7px;"></i>
                                            {{ $plan->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </div>
                                </div>

                                {{-- Milestone timeline --}}
                                <div class="pp-timeline">
                                    @foreach($plan->milestones as $i => $m)
                                    <div class="pp-milestone">
                                        <div class="pp-milestone-dot">
                                            <i class="{{ \App\Models\PaymentPlanMilestone::typeIcon($m->type) }}"></i>
                                        </div>
                                        <div class="pp-milestone-body">
                                            <div class="pp-milestone-label">{{ $m->label }}</div>
                                            <div class="pp-milestone-meta">
                                                <span class="pp-type-badge pp-type-{{ $m->type }}">
                                                    {{ \App\Models\PaymentPlanMilestone::typeLabel($m->type) }}
                                                </span>
                                                @if($m->percentage)
                                                    <span class="pp-milestone-pct">{{ $m->percentage }}%</span>
                                                @endif
                                                @if($m->installment_count && $m->installment_interval)
                                                    <span class="pp-milestone-sub">
                                                        × {{ $m->installment_count }} {{ $m->installment_interval }}
                                                    </span>
                                                @endif
                                                @if($m->due_date)
                                                    <span class="pp-milestone-sub">
                                                        <i class="fas fa-calendar-alt"></i>
                                                        {{ $m->due_date->format('M Y') }}
                                                    </span>
                                                @endif
                                            </div>
                                            @if($m->note)
                                                <div class="pp-milestone-note">{{ $m->note }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    @if(!$loop->last)
                                        <div class="pp-timeline-line"></div>
                                    @endif
                                    @endforeach
                                </div>

                                {{-- Footer actions --}}
                                <div class="pp-card-footer">
                                    <small class="text-muted">
                                        {{ $plan->plots->count() ?? 0 }} unit(s) assigned
                                    </small>
                                    <div style="display:flex;gap:8px;">
                                        <a href="{{ route('payment-plans.edit', $plan->id) }}"
                                           class="btn btn-sm btn-warning">
                                            <i class="fas fa-edit mr-1"></i>Edit
                                        </a>
                                        <form action="{{ route('payment-plans.destroy', $plan->id) }}"
                                              method="POST"
                                              onsubmit="return confirm('Delete this plan? It will be removed from all assigned units.')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-danger" type="submit">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>

                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                </div>
            </div>

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

<style>
/* ── Grid ── */
.pp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* ── Card ── */
.pp-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex; flex-direction: column;
    transition: box-shadow 0.2s;
}
.pp-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.pp-card--inactive { opacity: 0.6; }

/* ── Card header ── */
.pp-card-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #fffdf8, #fff);
}
.pp-card-title-row {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.pp-card-name { font-size: 15px; font-weight: 700; color: #2d3748; }
.pp-card-desc { font-size: 12px; color: #6c757d; margin-top: 3px; }

/* ── Pills ── */
.pp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.pp-pill--blue  { background: #e8f4ff; color: #007bff; }
.pp-pill--gold  { background: #fff8ee; color: #c9a96e; }
.pp-pill--green { background: #e8f5e9; color: #28a745; }
.pp-pill--grey  { background: #f0f0f0; color: #6c757d; }

/* ── Toggle ── */
.pp-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.pp-toggle-input { opacity: 0; width: 0; height: 0; }
.pp-toggle-slider {
    position: absolute; inset: 0;
    background: #ced4da; border-radius: 22px;
    transition: background 0.2s;
}
.pp-toggle-slider::before {
    content: ''; position: absolute;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; left: 3px; top: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pp-toggle-input:checked + .pp-toggle-slider { background: #28a745; }
.pp-toggle-input:checked + .pp-toggle-slider::before { transform: translateX(18px); }

/* ── Timeline ── */
.pp-timeline { padding: 16px 18px; flex: 1; }
.pp-milestone { display: flex; align-items: flex-start; gap: 12px; }
.pp-milestone-dot {
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff8ee; border: 2px solid #c9a96e;
    display: flex; align-items: center; justify-content: center;
    color: #c9a96e; font-size: 13px; flex-shrink: 0;
}
.pp-milestone-body { flex: 1; padding-bottom: 4px; }
.pp-milestone-label { font-size: 13px; font-weight: 600; color: #343a40; }
.pp-milestone-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.pp-milestone-pct { font-size: 13px; font-weight: 700; color: #c9a96e; }
.pp-milestone-sub { font-size: 11px; color: #6c757d; }
.pp-milestone-note { font-size: 11px; color: #6c757d; font-style: italic; margin-top: 3px; }
.pp-timeline-line {
    width: 2px; height: 14px; background: #e9ecef;
    margin-left: 15px; margin-bottom: 0;
}

/* ── Type badges ── */
.pp-type-badge {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.pp-type-down_payment     { background: #e3f2fd; color: #1565c0; }
.pp-type-installment      { background: #f3e5f5; color: #6a1b9a; }
.pp-type-on_completion    { background: #e8f5e9; color: #2e7d32; }
.pp-type-on_handover      { background: #fff3e0; color: #e65100; }
.pp-type-rental_guarantee { background: #fce4ec; color: #880e4f; }
.pp-type-custom           { background: #f5f5f5; color: #424242; }

/* ── Card footer ── */
.pp-card-footer {
    padding: 12px 18px;
    border-top: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center;
    background: #fafafa;
}

@media (max-width: 576px) {
    .pp-grid { grid-template-columns: 1fr; padding: 12px; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.pp-toggle-input').forEach(function (toggle) {
        toggle.addEventListener('change', function () {
            var id   = this.dataset.id;
            var card = document.getElementById('plan-card-' + id);
            fetch('/admin/payment-plans/' + id + '/toggle', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
            })
            .then(function(r){ return r.json(); })
            .then(function(data){
                card.classList.toggle('pp-card--inactive', !data.is_active);
            })
            .catch(function(){
                // Revert toggle on failure
                toggle.checked = !toggle.checked;
            });
        });
    });
});
</script>

@include('Partials.footer')