@extends('layouts.user_type.auth')
@section('subscriptionPackage')
<div class="container-fluid py-4 px-4">
    @include('components.alert')

    <div id="tableView" class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <h5 class="mb-0" style="font-weight:700;">Subscriptions</h5>
                <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Manage company subscription packages and billing.</p>
            </div>
            <button class="qc-btn-create btn bg-gradient-primary btn-sm mb-0" id="addButton">
                <i class="fas fa-plus me-1" style="font-size:0.72rem;"></i> Add Subscription
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive" style="border:none;max-height:calc(100vh - 280px);overflow-y:auto;">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th style="padding-left:1.25rem;width:4%;">#</th>
                            <th>Company</th>
                            <th class="text-center">Package</th>
                            <th class="text-center">Expiry Date</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($subscriptions as $index => $subscription)
                            <tr>
                                <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($subscriptions->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                <td><span style="font-weight:700;color:var(--heading);">{{ $subscription->companyProfile->company_name }}</span></td>
                                <td class="text-center"><span class="badge bg-gradient-light" style="font-size:0.66rem;">{{ $subscription->package->package_name }}</span></td>
                                <td class="text-center"><span class="mono" style="font-size:0.75rem;color:var(--grey-mid);">{{ \Carbon\Carbon::parse($subscription->expires_at)->format('d/m/Y') }}</span></td>
                                <td class="text-center"><span class="badge bg-gradient-success">{{ ucfirst($subscription->status) }}</span></td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <a href="#" class="ia-view" onclick="openSubscriptionDetails({{ $subscription }}, '{{ \Carbon\Carbon::parse($subscription->expires_at)->format('d/m/Y') }}', '{{ \Carbon\Carbon::parse($subscription->payment->payment_date)->format('d-m-y | H:i:s') }}')" title="View">
                                            <i class="fas fa-eye" style="font-size:0.72rem;"></i>
                                        </a>
                                        <a href="{{ route('subscriptionPackage.invoice', $subscription->id) }}" class="ia-edit" title="Invoice" style="background:linear-gradient(135deg,var(--qc-success-soft),var(--qc-success-soft));border:1px solid var(--qc-success-soft);">
                                            <i class="fas fa-download" style="font-size:0.72rem;color:var(--qc-success);"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6"><div class="empty-state"><i class="fas fa-credit-card"></i><p>No subscriptions found</p></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                @include('components.pagination', ['paginator' => $subscriptions])
            </div>
        </div>
    </div>

    <!-- Form View -->
    <div id="formView" class="card" style="display:none;">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h6 class="mb-0" style="font-weight:700;">Add Subscription Package</h6>
            <button onclick="toggleView('table')" style="width:32px;height:32px;border-radius:50%;background:var(--faint);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;"><i class="fas fa-times" style="font-size:0.82rem;color:var(--grey-mid);"></i></button>
        </div>
        <div class="card-body">
            <form id="subscriptionForm" action="{{ route('subscriptionPackage.store') }}" method="POST" class="row g-3">
                @csrf
                <div class="col-md-4">
                    <label for="company_id" class="form-label">Company <span class="text-danger">*</span></label>
                    <select class="form-select" id="company_id" name="company_id" required>
                        <option value="">Select Company</option>
                        @foreach ($companyProfiles as $cp)
                            <option value="{{ $cp->id }}" data-company-name="{{ $cp->company_name }}" data-email="{{ $cp->email }}">{{ $cp->company_name }}</option>
                        @endforeach
                    </select>
                    <div id="company-details" style="display:none;margin-top:0.75rem;padding:0.75rem;background:var(--smoke);border-radius:var(--r-md);border:1px solid var(--border);">
                        <p style="font-size:0.72rem;font-weight:700;color:var(--grey);margin-bottom:0.5rem;">Company Info</p>
                        <p style="font-size:0.8rem;margin:0;"><strong id="company-name"></strong></p>
                        <p style="font-size:0.78rem;color:var(--grey-mid);margin:0;" id="company-email"></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="package_id" class="form-label">Package <span class="text-danger">*</span></label>
                    <select class="form-select" id="package_id" name="package_id" required>
                        <option value="">Select Package</option>
                        @foreach ($packages as $package)
                            <option value="{{ $package->id }}" data-package-name="{{ $package->package_name }}" data-pricing="{{ $package->pricing }}" data-duration="{{ $package->duration }}">{{ $package->package_name }}</option>
                        @endforeach
                    </select>
                    <div id="package-details" style="display:none;margin-top:0.75rem;padding:0.75rem;background:var(--smoke);border-radius:var(--r-md);border:1px solid var(--border);">
                        <p style="font-size:0.72rem;font-weight:700;color:var(--grey);margin-bottom:0.5rem;">Package Info</p>
                        <p style="font-size:0.8rem;margin:0;"><strong id="package-name"></strong></p>
                        <p style="font-size:0.78rem;color:var(--indigo);margin:0;">₹<span id="package-pricing"></span> · <span id="package-duration"></span> months</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="payment_method" class="form-label">Payment Method <span class="text-danger">*</span></label>
                    <select class="form-select" id="payment_method" name="payment_method" required>
                        <option value="">Select Method</option>
                        <option value="Credit Card">Credit Card</option>
                        <option value="Debit Card">Debit Card</option>
                        <option value="UPI">UPI</option>
                        <option value="Cash Payment">Cash Payment</option>
                    </select>
                    <div id="payment-details" style="display:none;margin-top:0.75rem;">
                        <div id="online-payment-fields" style="display:none;">
                            <div class="mb-2"><label class="form-label">Transaction ID <span class="text-danger">*</span></label><input type="text" class="form-control" id="transaction_id" name="transaction_id"></div>
                            <div><label class="form-label">Payment Date <span class="text-danger">*</span></label><input type="date" class="form-control" id="payment_date" name="payment_date" max="{{ \Carbon\Carbon::today()->toDateString() }}"></div>
                        </div>
                        <div id="offline-payment-fields" style="display:none;">
                            <label class="form-label">Subscription Key <span class="text-danger">*</span></label>
                            <input type="text" class="form-control mono" id="subscription_key" name="subscription_key">
                        </div>
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-end gap-2 pt-3" style="border-top:1px solid var(--border);">
                    <button type="button" onclick="toggleView('table')" class="qc-btn-dismiss btn btn-light mb-0">Cancel</button>
                    <button type="submit" class="qc-btn-confirm btn bg-gradient-primary mb-0">Save Subscription</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Details View -->
    <div id="detailsView" class="card" style="display:none;">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h6 class="mb-0" style="font-weight:700;">Subscription Details</h6>
            <button onclick="toggleView('table')" style="width:32px;height:32px;border-radius:50%;background:var(--faint);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;"><i class="fas fa-times" style="font-size:0.82rem;color:var(--grey-mid);"></i></button>
        </div>
        <div class="card-body">
            @php
                $sections = [
                    'Company Details' => [
                        ['label'=>'Company Name','id'=>'detail-company-name'],
                        ['label'=>'Email','id'=>'detail-company-email'],
                        ['label'=>'Phone','id'=>'detail-company-phone'],
                    ],
                    'Package Details' => [
                        ['label'=>'Package Name','id'=>'detail-package-name'],
                        ['label'=>'Billing Cycle','id'=>'detail-billing-cycle'],
                        ['label'=>'Pricing','id'=>'detail-pricing'],
                        ['label'=>'User Limit','id'=>'detail-user-limit'],
                        ['label'=>'Support Level','id'=>'detail-support-level'],
                        ['label'=>'Status','id'=>'detail-package-status'],
                        ['label'=>'Expiry Date','id'=>'detail-expires-at'],
                        ['label'=>'Duration','id'=>'detail-duration'],
                    ],
                    'Payment Details' => [
                        ['label'=>'Payment Method','id'=>'detail-payment-method'],
                        ['label'=>'Payment Status','id'=>'detail-payment-status'],
                        ['label'=>'Transaction ID','id'=>'detail-transaction-id'],
                        ['label'=>'Amount','id'=>'detail-amount'],
                        ['label'=>'Payment Date','id'=>'detail-payment-date'],
                    ],
                ];
            @endphp
            @foreach($sections as $title => $fields)
                <p style="font-size:0.72rem;font-weight:800;color:var(--grey);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;@if(!$loop->first)margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);@endif">{{ $title }}</p>
                <div class="row g-3">
                    @foreach($fields as $field)
                        <div class="col-md-3">
                            <p class="mb-1" style="font-size:0.7rem;color:var(--grey);font-weight:700;">{{ $field['label'] }}</p>
                            <p id="{{ $field['id'] }}" style="font-weight:600;color:var(--heading);font-size:0.82rem;margin:0;"></p>
                        </div>
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>
</div>

<script>
    function toggleView(view) {
        ['tableView','formView','detailsView'].forEach(id => document.getElementById(id).style.display='none');
        document.getElementById(view==='form'?'formView':view==='details'?'detailsView':'tableView').style.display='block';
    }
    function openSubscriptionDetails(subscription, expiryDate, paymentDate) {
        const company=subscription.company_profile||subscription.companyProfile, pkg=subscription.package, payment=subscription.payment;
        if(company) {
            document.getElementById('detail-company-name').innerText=company.company_name||'';
            document.getElementById('detail-company-email').innerText=company.email||'';
            document.getElementById('detail-company-phone').innerText=company.phone||'';
        }
        if(pkg) {
            document.getElementById('detail-package-name').innerText=pkg.package_name||'';
            document.getElementById('detail-billing-cycle').innerText=pkg.billing_cycle||'';
            document.getElementById('detail-pricing').innerText='₹'+(pkg.pricing||0);
            document.getElementById('detail-user-limit').innerText=pkg.user_limit||'';
            document.getElementById('detail-support-level').innerText=pkg.support_level||'';
            document.getElementById('detail-package-status').innerText=pkg.package_status||'';
            document.getElementById('detail-duration').innerText=(pkg.duration||0)+' months';
        }
        if(payment) {
            document.getElementById('detail-payment-method').innerText=payment.payment_method||'';
            document.getElementById('detail-payment-status').innerText=payment.payment_status||'';
            document.getElementById('detail-transaction-id').innerText=payment.transaction_id||'N/A';
            document.getElementById('detail-amount').innerText='₹'+payment.amount;
        }
        document.getElementById('detail-expires-at').innerText=expiryDate||'';
        document.getElementById('detail-payment-date').innerText=paymentDate||'';
        toggleView('details');
    }
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('addButton').addEventListener('click', function() {
            document.getElementById('subscriptionForm').reset();
            document.getElementById('company-details').style.display='none';
            document.getElementById('package-details').style.display='none';
            document.getElementById('payment-details').style.display='none';
            toggleView('form');
        });
        document.getElementById('company_id').addEventListener('change', function() {
            const opt=this.options[this.selectedIndex];
            if(opt.value) {
                document.getElementById('company-name').textContent=opt.getAttribute('data-company-name');
                document.getElementById('company-email').textContent=opt.getAttribute('data-email');
                document.getElementById('company-details').style.display='block';
            } else document.getElementById('company-details').style.display='none';
        });
        document.getElementById('package_id').addEventListener('change', function() {
            const opt=this.options[this.selectedIndex];
            if(opt.value) {
                document.getElementById('package-name').textContent=opt.getAttribute('data-package-name');
                document.getElementById('package-pricing').textContent=opt.getAttribute('data-pricing');
                document.getElementById('package-duration').textContent=opt.getAttribute('data-duration');
                document.getElementById('package-details').style.display='block';
            } else document.getElementById('package-details').style.display='none';
        });
        document.getElementById('payment_method').addEventListener('change', function() {
            const m=this.value;
            document.getElementById('online-payment-fields').style.display='none';
            document.getElementById('offline-payment-fields').style.display='none';
            ['transaction_id','payment_date','subscription_key'].forEach(id=>document.getElementById(id)?.removeAttribute('required'));
            if(m==='Credit Card'||m==='Debit Card'||m==='UPI') {
                document.getElementById('online-payment-fields').style.display='block';
                ['transaction_id','payment_date'].forEach(id=>document.getElementById(id)?.setAttribute('required','required'));
            } else if(m==='Cash Payment') {
                document.getElementById('offline-payment-fields').style.display='block';
                document.getElementById('subscription_key')?.setAttribute('required','required');
            }
            document.getElementById('payment-details').style.display=m?'block':'none';
        });
    });
</script>
@endsection