@extends('backend.app')

@section('title', 'Edit Subscription')

@push('style')
<style>
    .detail-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .info-row {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .info-row:last-child {
        border-bottom: none;
    }
</style>
@endsection

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row align-items-center">
                    <div class="col-12">
                        @include('backend.partials.breadcrumb', [
                            'items' => [
                                ['url' => route('dashboard'), 'title' => 'Dashboard', 'icon' => 'fas fa-home'],
                                ['url' => route('admin.manual-subscriptions.index'), 'title' => 'Subscribers', 'icon' => 'fas fa-users'],
                                ['title' => 'Edit Subscription', 'icon' => 'fas fa-edit'],
                            ]
                        ])
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- User Info Header -->
            <div class="detail-card">
                <div class="d-flex align-items-center">
                    <div class="avatar bg-white me-3" style="width: 60px; height: 60px;">
                        <div class="avatar-content" style="font-size: 1.5rem; color: #7367f0;">
                            {{ substr($user->name ?? 'U', 0, 1) }}
                        </div>
                    </div>
                    <div>
                        <h5 class="mb-0">{{ $user->name }}</h5>
                        <p class="mb-0 opacity-75">{{ $user->email }}</p>
                        @if($user->company)
                            <p class="mb-0 mt-1">
                                <span class="badge bg-light text-dark">{{ $user->company->name }}</span>
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Current Subscription Info -->
            <div class="card mb-3">
                <div class="card-header bg-light-primary">
                    <h5 class="card-title mb-0">Current Subscription Details</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <label class="text-muted small">Status</label>
                            @if($subscription->active())
                                <span class="badge bg-light-success text-success">Active</span>
                            @else
                                <span class="badge bg-light-danger text-danger">Inactive</span>
                            @endif
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="text-muted small">Current Plan</label>
                            @php $currentPlan = \App\Models\SubscriptionPlan::where('stripe_price_id', $subscription->stripe_price)->first(); @endphp
                            <p class="mb-0">
                                @if($currentPlan)
                                    <strong>{{ $currentPlan->title }}</strong>
                                @else
                                    <span class="text-muted">Unknown</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="text-muted small">Started At</label>
                            <p class="mb-0">{{ $subscription->starts_at->format('F d, Y') }}</p>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="text-muted small">Current End Date</label>
                            <p class="mb-0">
                                @if($subscription->ends_at)
                                    <strong>{{ $subscription->ends_at->format('F d, Y') }}</strong>
                                @else
                                    <span class="text-muted">Ongoing</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Edit Form -->
            <form method="POST" action="{{ route('admin.manual-subscriptions.update', $subscription->id) }}">
                @csrf
                @method('PUT')

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible">
                        <strong>Success!</strong> {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible">
                        <strong>Error:</strong> Please fix the following issues:
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Update Subscription</h4>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">You can only update the end date of this subscription.</p>

                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">New End Date <span class="text-danger">*</span></label>
                                <input type="date"
                                       name="ends_at"
                                       class="form-control"
                                       value="{{ $subscription->ends_at ? $subscription->ends_at->format('Y-m-d') : '' }}"
                                       min="{{ now()->format('Y-m-d') }}"
                                       required>
                                <small class="text-muted">Choose the new end date for this subscription</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit -->
                <div class="row mt-3">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary btn-lg me-2">
                            <i class="fas fa-save me-1"></i> Update End Date
                        </button>
                        <a href="{{ route('admin.manual-subscriptions.show', $subscription->id) }}"
                           class="btn btn-outline-info btn-lg me-2">
                            <i class="fas fa-eye me-1"></i> View Details
                        </a>
                        <a href="{{ route('admin.manual-subscriptions.index') }}"
                           class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-list me-1"></i> Back to List
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
    // Confirm before submission
    $('form').on('submit', function() {
        const currentEnd = '{{ $subscription->ends_at ? $subscription->ends_at->format('F d, Y') : 'Ongoing' }}';
        const newEnd = $('input[name="ends_at"]').val();

        return confirm(`Update subscription end date:\nFrom: ${currentEnd}\nTo: ${newEnd}\n\nAre you sure?`);
    });
});
</script>
@endpush
@endsection