@extends('layouts.app')

@php
    $prefilledServiceId = (string) old('service_id', (string) request()->query('service_id', ''));
    $prefilledPlanId = (string) old('service_plan_id', (string) request()->query('service_plan_id', ''));
    $prefilledTitle = (string) old('title', (string) request()->query('title', ''));
    $prefilledTotalSlots = (string) old('total_slots', (string) request()->query('total_slots', ''));
    $prefilledAvailableSlots = (string) old('available_slots', (string) request()->query('available_slots', ''));
    $prefilledTotalPrice = (string) old('total_price', (string) request()->query('total_price', ''));
    $prefilledPricePerSlot = (string) old('price_per_slot', (string) request()->query('price_per_slot', ''));

    $selectedService = filled($prefilledServiceId)
        ? $services->firstWhere('id', (int) $prefilledServiceId)
        : null;

    if (! $selectedService && filled($prefilledPlanId)) {
        $selectedService = $services->first(fn ($service) => $service->plans->contains('id', (int) $prefilledPlanId));
    }

    $selectedPlan = $selectedService?->plans->firstWhere('id', (int) $prefilledPlanId);
    $hasLockedSelection = filled($selectedService?->id) && filled($selectedPlan?->id);

    $servicesPayload = $services
        ->map(function ($service) {
            return [
                'id' => (int) $service->id,
                'name' => (string) $service->name,
                'category' => (string) ($service->category?->name ?? 'Other'),
                'plans' => $service->plans
                    ->map(fn ($plan) => [
                        'id' => (int) $plan->id,
                        'name' => (string) $plan->name,
                        'price' => (float) $plan->price,
                        'currency' => (string) ($plan->currency ?: 'USD'),
                        'max_slots' => max((int) ($plan->max_slots ?? 1), 1),
                    ])
                    ->values()
                    ->all(),
            ];
        })
        ->values();
@endphp

@push('style')
<style>
    .listing-create-wrap {
        padding: 1.5rem 0 2.5rem;
    }

    .listing-create-card {
        border: 1px solid rgba(201, 142, 74, 0.14);
        border-radius: 24px;
        box-shadow: 0 18px 38px rgba(34, 29, 23, 0.08);
        overflow: hidden;
    }

    .listing-create-head {
        padding: 1.6rem 1.6rem 1.1rem;
        border-bottom: 1px solid rgba(201, 142, 74, 0.12);
    }

    .listing-create-title {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 800;
        color: #1b1b1b;
    }

    .listing-create-copy {
        margin: 0.45rem 0 0;
        color: #6b6258;
        font-size: 0.98rem;
    }

    .listing-create-body {
        padding: 1.6rem;
        background: #fffdfa;
    }

    .listing-field-card {
        height: 100%;
        border: 1px solid rgba(201, 142, 74, 0.12);
        border-radius: 18px;
        background: #fff;
        padding: 1rem;
    }

    .listing-field-card h6 {
        margin-bottom: 0.35rem;
        font-size: 0.95rem;
        font-weight: 700;
        color: #1f1d1a;
    }

    .listing-field-card p {
        margin: 0;
        color: #7a7268;
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .listing-summary-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding: 1rem 1.1rem;
        border: 1px dashed rgba(201, 142, 74, 0.32);
        border-radius: 18px;
        background: rgba(201, 142, 74, 0.06);
    }

    .listing-summary-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.55rem 0.9rem;
        border-radius: 999px;
        background: #fff;
        color: #4c443c;
        font-size: 0.88rem;
        font-weight: 600;
    }

    .listing-summary-pill strong {
        color: #1c1916;
    }

    .listing-locked-note {
        margin-top: 1rem;
        padding: 0.95rem 1rem;
        border-radius: 16px;
        background: rgba(201, 142, 74, 0.08);
        color: #6b6258;
        font-size: 0.92rem;
        font-weight: 600;
    }

    @media (max-width: 767.98px) {
        .listing-create-head,
        .listing-create-body {
            padding: 1.15rem;
        }
    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y listing-create-wrap">
    <div class="card listing-create-card">
        <div class="listing-create-head">
            <h1 class="listing-create-title">Create Subscription Listing</h1>
            <p class="listing-create-copy">Service, plan, title, aur package price admin setup se aate hain. Aap yahan sirf apni sharing listing complete karte ho.</p>
        </div>

        <div class="listing-create-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0 ps-3">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if ($services->isEmpty())
                <div class="alert alert-warning mb-0">No active services are available for creating a listing right now.</div>
            @elseif (! $hasLockedSelection)
                <div class="alert alert-warning mb-0">
                    <div class="fw-semibold mb-2">Select a service and plan first.</div>
                    <div class="mb-3">Admin-defined service details yahan read-only show hote hain. Pehle service selection screen se apna subscription choose karein.</div>
                    <a href="{{ route('subscriptions.create') }}" class="btn btn-sm btn-primary">Choose Subscription</a>
                </div>
            @else
                <form method="POST" action="{{ route('subscriptions.store') }}" id="listingCreateForm" novalidate>
                    @csrf

                    <div class="row g-4">
                        <div class="col-12 col-lg-6">
                            <input type="hidden" name="service_id" id="service_id" value="{{ $prefilledServiceId }}">
                            <label for="service_display" class="form-label">Service</label>
                            <input
                                type="text"
                                id="service_display"
                                class="form-control @error('service_id') is-invalid @enderror"
                                value="{{ $selectedService?->name ?? '' }}"
                                readonly
                            >
                            @error('service_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-lg-6">
                            <input type="hidden" name="service_plan_id" id="service_plan_id" value="{{ $prefilledPlanId }}">
                            <label for="plan_display" class="form-label">Plan</label>
                            <input
                                type="text"
                                id="plan_display"
                                class="form-control @error('service_plan_id') is-invalid @enderror"
                                value="{{ $selectedPlan?->name ?? '' }}"
                                readonly
                            >
                            @error('service_plan_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label for="title" class="form-label">Listing title</label>
                            <input
                                type="text"
                                name="title"
                                id="title"
                                class="form-control @error('title') is-invalid @enderror"
                                value="{{ $prefilledTitle }}"
                                readonly
                            >
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-4">
                            <label for="total_slots" class="form-label">Total slots</label>
                            <input
                                type="number"
                                min="1"
                                step="1"
                                name="total_slots"
                                id="total_slots"
                                class="form-control @error('total_slots') is-invalid @enderror"
                                value="{{ $prefilledTotalSlots }}"
                                required
                            >
                            @error('total_slots')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-4">
                            <label for="available_slots" class="form-label">Available slots</label>
                            <input
                                type="number"
                                min="1"
                                step="1"
                                name="available_slots"
                                id="available_slots"
                                class="form-control @error('available_slots') is-invalid @enderror"
                                value="{{ $prefilledAvailableSlots }}"
                                readonly
                            >
                            @error('available_slots')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-4">
                            <label for="total_price" class="form-label">Total package price</label>
                            <input
                                type="number"
                                min="0"
                                step="0.01"
                                name="total_price"
                                id="total_price"
                                class="form-control @error('total_price') is-invalid @enderror"
                                value="{{ $prefilledTotalPrice }}"
                                readonly
                            >
                            @error('total_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label for="price_per_slot" class="form-label">Price per slot</label>
                            <input
                                type="number"
                                min="0"
                                step="0.01"
                                name="price_per_slot"
                                id="price_per_slot"
                                class="form-control @error('price_per_slot') is-invalid @enderror"
                                value="{{ $prefilledPricePerSlot }}"
                                readonly
                            >
                            @error('price_per_slot')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label d-block">Visibility</label>
                            <input type="hidden" name="is_public" value="0">
                            <div class="form-control" style="background:#f9fafb; color:#6b6258;" readonly>
                                Hidden by default. This subscription will stay private until you switch it to Displayed publicly from Manage subscription.
                            </div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label for="starts_at" class="form-label">Start date</label>
                            <input
                                type="date"
                                name="starts_at"
                                id="starts_at"
                                class="form-control @error('starts_at') is-invalid @enderror"
                                value="{{ old('starts_at') }}"
                            >
                            @error('starts_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label for="ends_at" class="form-label">End date</label>
                            <input
                                type="date"
                                name="ends_at"
                                id="ends_at"
                                class="form-control @error('ends_at') is-invalid @enderror"
                                value="{{ old('ends_at') }}"
                            >
                            @error('ends_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label for="notes" class="form-label">Notes</label>
                            <textarea
                                name="notes"
                                id="notes"
                                rows="4"
                                class="form-control @error('notes') is-invalid @enderror"
                                placeholder="Add any extra details for your listing."
                            >{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        @if(auth()->user()->hasRole('super admin'))
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        role="switch"
                                        name="requires_manual_approval"
                                        id="requires_manual_approval"
                                        value="1"
                                        @checked(old('requires_manual_approval'))
                                    >
                                    <label class="form-check-label" for="requires_manual_approval">Require manual approval before members join</label>
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="listing-summary-bar">
                        <span class="listing-summary-pill">Selected service: <strong id="selectedServiceLabel">None</strong></span>
                        <span class="listing-summary-pill">Selected plan: <strong id="selectedPlanLabel">None</strong></span>
                        <span class="listing-summary-pill">Plan price: <strong id="selectedPlanPrice">-</strong></span>
                        <span class="listing-summary-pill">Suggested slots: <strong id="selectedPlanSlots">-</strong></span>
                    </div>

                    <div class="listing-locked-note">
                        Service, plan, listing title, package price, aur price per slot admin setup aur selected plan ke hisaab se locked hain. Aap sirf shareable slots aur extra listing details complete kar sakte ho.
                    </div>

                    <div class="row g-3 mt-1">
                        <div class="col-12 col-lg-4">
                            <div class="listing-field-card">
                                <h6>Quick help</h6>
                                <p>Admin-defined service data yahan automatically fill hota hai. Aapko bas apni listing ke shareable slots aur optional notes confirm karne hain.</p>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="listing-field-card">
                                <h6>Price logic</h6>
                                <p>`Total package price` admin plan se aati hai. `Price per slot` us price ko aapke selected shareable slots par divide karke auto-calculate hota hai. Join time per connection admin fee `0.64` alag apply hogi.</p>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="listing-field-card">
                                <h6>After submit</h6>
                                <p>Listing save hone ke baad `My Shared Subscriptions` mein nazar aayegi aur status pending review/draft ke sath store hogi.</p>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2 mt-4">
                        <button type="submit" class="btn btn-primary">Create Listing</button>
                        <a href="{{ route('dashboard.my-shared-subscriptions') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            @endif
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const services = @json($servicesPayload);
        const serviceIdInput = document.getElementById('service_id');
        const planIdInput = document.getElementById('service_plan_id');
        const serviceDisplayInput = document.getElementById('service_display');
        const planDisplayInput = document.getElementById('plan_display');
        const titleInput = document.getElementById('title');
        const totalSlotsInput = document.getElementById('total_slots');
        const availableSlotsInput = document.getElementById('available_slots');
        const totalPriceInput = document.getElementById('total_price');
        const pricePerSlotInput = document.getElementById('price_per_slot');
        const selectedServiceLabel = document.getElementById('selectedServiceLabel');
        const selectedPlanLabel = document.getElementById('selectedPlanLabel');
        const selectedPlanPrice = document.getElementById('selectedPlanPrice');
        const selectedPlanSlots = document.getElementById('selectedPlanSlots');
        const initialServiceId = @json($prefilledServiceId);
        const initialPlanId = @json($prefilledPlanId);

        if (!serviceIdInput || !planIdInput || !titleInput || !totalSlotsInput || !availableSlotsInput || !totalPriceInput || !pricePerSlotInput) {
            return;
        }

        const findService = (serviceId) => services.find((service) => String(service.id) === String(serviceId));
        const findPlan = (service, planId) => service?.plans.find((plan) => String(plan.id) === String(planId)) ?? null;
        const resolveParticipantLimit = (service, plan) => {
            const serviceName = String(service?.name || '').toLowerCase();
            const planName = String(plan?.name || '').toLowerCase();
            const configuredLimit = Math.max(Number(plan?.max_slots || 0), 0);

            if (serviceName.includes('netflix') && planName.includes('standard')) {
                return 3;
            }

            if (serviceName.includes('netflix') && planName.includes('premium')) {
                return 5;
            }

            return configuredLimit > 1 ? configuredLimit : 6;
        };
        const resolveShareableSlots = (service, plan) => Math.max(resolveParticipantLimit(service, plan) - 1, 1);
        const formatMoney = (amount, currency) => {
            const symbolMap = { USD: '$', GBP: 'GBP', EUR: 'EUR' };
            const symbol = symbolMap[String(currency || 'USD').toUpperCase()] || String(currency || 'USD').toUpperCase();

            return symbol + ' ' + Number(amount || 0).toFixed(2);
        };

        const syncSummary = (service, plan) => {
            if (serviceDisplayInput) {
                serviceDisplayInput.value = service ? service.name : '';
            }

            if (planDisplayInput) {
                planDisplayInput.value = plan ? plan.name : '';
            }

            selectedServiceLabel.textContent = service ? service.name : 'None';
            selectedPlanLabel.textContent = plan ? plan.name : 'None';
            selectedPlanPrice.textContent = plan ? formatMoney(plan.price, plan.currency) : '-';
            selectedPlanSlots.textContent = plan ? String(resolveShareableSlots(service, plan)) : '-';
        };

        const syncDerivedFields = (service, plan, forceSlots) => {
            if (!plan) {
                return;
            }

            const autoTitle = service.name + ' - ' + plan.name;
            const slotLimit = resolveShareableSlots(service, plan);
            const fallbackSlots = Math.max(1, slotLimit);
            const requestedSlots = Number(totalSlotsInput.value || fallbackSlots);
            const normalizedSlots = Math.min(Math.max(requestedSlots, 1), slotLimit);

            if (forceSlots || !totalSlotsInput.value) {
                totalSlotsInput.value = String(normalizedSlots);
            }

            totalSlotsInput.min = '1';
            totalSlotsInput.max = String(slotLimit);
            totalSlotsInput.value = String(normalizedSlots);
            availableSlotsInput.value = String(normalizedSlots);
            totalPriceInput.value = Number(plan.price).toFixed(2);
            pricePerSlotInput.value = (Number(plan.price) / normalizedSlots).toFixed(2);
            titleInput.value = autoTitle;
        };

        const initializeLockedForm = () => {
            const service = findService(initialServiceId || serviceIdInput.value);

            if (!service) {
                syncSummary(null, null);
                return;
            }

            const plan = findPlan(service, initialPlanId || planIdInput.value);

            if (!plan) {
                syncSummary(service, null);
                return;
            }

            serviceIdInput.value = String(service.id);
            planIdInput.value = String(plan.id);
            syncDerivedFields(service, plan, false);
            syncSummary(service, plan);
        };

        totalSlotsInput.addEventListener('input', () => {
            const service = findService(serviceIdInput.value);
            const plan = findPlan(service, planIdInput.value);

            if (!service || !plan) {
                return;
            }

            syncDerivedFields(service, plan, false);
            syncSummary(service, plan);
        });

        initializeLockedForm();
    });
</script>
@endpush