@extends('layouts.app')
@section('title', 'Renew License')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('licenses.index') }}">Licenses</a></li>
    <li class="breadcrumb-item"><a href="{{ route('licenses.show', $license) }}">{{ $license->license_key }}</a></li>
    <li class="breadcrumb-item active">Renew</li>
@endsection

@section('content')
<div class="page-header">
    <h1 class="page-title"><i class="bi bi-arrow-clockwise me-2"></i>Renew License</h1>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="card table-card p-4">
            <h6 class="fw-bold mb-3">Current License</h6>
            <table class="table table-sm table-borderless mb-0">
                <tr><td class="text-muted small">Key</td><td><code class="small">{{ $license->license_key }}</code></td></tr>
                <tr><td class="text-muted small">Customer</td><td class="small">{{ $license->customer?->company_name }}</td></tr>
                <tr><td class="text-muted small">Type</td><td><span class="badge badge-{{ $license->license_type }}">{{ ucfirst($license->license_type) }}</span></td></tr>
                <tr><td class="text-muted small">Current Expiry</td>
                    <td class="small {{ $license->isExpired() ? 'text-danger fw-bold' : '' }}">
                        {{ $license->expiry_date?->format('d M Y') ?? 'Lifetime' }}
                    </td>
                </tr>
                <tr><td class="text-muted small">Status</td><td><span class="badge badge-{{ $license->status }}">{{ ucfirst($license->status) }}</span></td></tr>
            </table>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card table-card p-4">
            <h6 class="fw-bold mb-4">Renewal Options</h6>
            <form action="{{ route('licenses.renew.store', $license) }}" method="POST">
                @csrf
                <div class="row g-3 mb-4">
                    @php
                        $base = $license->expiry_date && !$license->isExpired() ? $license->expiry_date : now();
                    @endphp
                    @foreach([
                        '1_year'  => ['label' => '1 Year', 'date' => $base->copy()->addYear()],
                        '2_years' => ['label' => '2 Years', 'date' => $base->copy()->addYears(2)],
                        '3_years' => ['label' => '3 Years', 'date' => $base->copy()->addYears(3)],
                        'lifetime' => ['label' => 'Lifetime', 'date' => null],
                    ] as $value => $option)
                    <div class="col-md-6">
                        <label class="w-100 cursor-pointer">
                            <input type="radio" name="renewal_period" value="{{ $value }}" class="d-none renewal-radio"
                                   {{ old('renewal_period', '1_year') === $value ? 'checked' : '' }}>
                            <div class="card border-2 p-3 renewal-option {{ old('renewal_period', '1_year') === $value ? 'border-primary bg-primary bg-opacity-5' : 'border-light' }}"
                                 style="cursor:pointer;transition:all 0.2s">
                                <div class="fw-bold">{{ $option['label'] }}</div>
                                <div class="text-muted small">
                                    New expiry: {{ $option['date'] ? $option['date']->format('d M Y') : '♾️ No expiry' }}
                                </div>
                            </div>
                        </label>
                    </div>
                    @endforeach
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-medium small">Amount (₹)</label>
                        <input type="number" name="amount" class="form-control" value="{{ old('amount', 0) }}"
                               min="0" step="0.01">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-medium small">Notes</label>
                        <textarea name="notes" class="form-control" rows="2" placeholder="Optional notes...">{{ old('notes') }}</textarea>
                    </div>
                </div>

                <div class="mt-4 d-flex gap-2">
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-arrow-clockwise me-1"></i>Renew License
                    </button>
                    <a href="{{ route('licenses.show', $license) }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.renewal-radio').forEach(function (radio) {
    radio.addEventListener('change', function () {
        document.querySelectorAll('.renewal-option').forEach(el => {
            el.classList.remove('border-primary', 'bg-primary', 'bg-opacity-5');
            el.classList.add('border-light');
        });
        this.nextElementSibling.classList.add('border-primary', 'bg-primary', 'bg-opacity-5');
        this.nextElementSibling.classList.remove('border-light');
    });
});
</script>
@endpush