@extends('layouts.app')

@section('title', 'My Services — ' . config('app.name'))

@section('header')
    <h2 class="h5 fw-semibold mb-0">{{ __('My Services') }}</h2>
@endsection

@section('content')
    <div class="hp-container" style="max-width: 52rem;">
        @if (session('status') === 'service-added')
            <div class="alert alert-success">Service added.</div>
        @elseif (session('status') === 'service-updated')
            <div class="alert alert-success">Service updated. Existing bookings keep their original price &mdash; only new bookings use the updated price.</div>
        @elseif (session('status') === 'service-removed')
            <div class="alert alert-secondary">Service removed.</div>
        @endif

        <div class="hp-card p-4 mb-4">
            <p class="hp-section-title">Add a service</p>
            <form method="POST" action="{{ route('provider.services.store') }}" class="row g-3">
                @csrf
                <div class="col-12 col-sm-6">
                    <x-input-label for="service_id" value="Service" />
                    <select id="service_id" name="service_id" class="form-select" required>
                        <option value="">Select a service</option>
                        @foreach ($categories as $category)
                            <optgroup label="{{ $category->name }}">
                                @foreach ($category->services as $service)
                                    <option value="{{ $service->id }}">{{ $service->name }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-sm-3">
                    <x-input-label for="pricing_type" value="Pricing type" />
                    <select id="pricing_type" name="pricing_type" class="form-select" required>
                        @foreach (['hourly', 'visit', 'session', 'day', 'week', 'monthly', 'custom'] as $type)
                            <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-sm-3">
                    <x-input-label for="base_price" value="Base price (₹)" />
                    <x-text-input id="base_price" type="number" step="0.01" min="0" name="base_price" required />
                </div>
                <div class="col-12">
                    <x-input-label for="description" value="Details (optional)" />
                    <textarea id="description" name="description" rows="2" class="form-control" placeholder="What's included, your experience with this service, availability, etc.">{{ old('description') }}</textarea>
                </div>
                <div class="col-12">
                    <x-primary-button>{{ __('Add Service') }}</x-primary-button>
                </div>
            </form>
        </div>

        <p class="hp-section-title d-flex justify-content-between">
            Services you offer
            <span class="fw-normal" style="text-transform:none;letter-spacing:normal;">{{ $providerServices->count() }} active</span>
        </p>
        <div class="hp-card p-3">
            @forelse ($providerServices as $providerService)
                <div class="hp-list-row d-block">
                    <div class="d-flex align-items-start justify-content-between flex-wrap gap-3">
                        <div class="d-flex align-items-start gap-3">
                            <span class="hp-quick-link-icon" style="background:var(--hp-primary-soft);color:var(--hp-primary);">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Zm5 0V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18"/></svg>
                            </span>
                            <div>
                                <p class="fw-semibold small mb-0">{{ $providerService->service->name }}</p>
                                <p class="text-muted small mb-0">{{ $providerService->service->category->name }} &middot; &#8377;{{ number_format($providerService->base_price, 2) }} / {{ $providerService->pricing_type }}</p>
                                @if ($providerService->description)
                                    <p class="text-muted small mb-0 mt-1">{{ $providerService->description }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="d-flex gap-3 flex-shrink-0">
                            <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" data-bs-toggle="collapse" data-bs-target="#edit-service-{{ $providerService->id }}">
                                Edit
                            </button>
                            <form method="POST" action="{{ route('provider.services.destroy', $providerService) }}" onsubmit="return confirm('Remove this service?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-link text-danger text-decoration-none">Remove</button>
                            </form>
                        </div>
                    </div>

                    <div class="collapse mt-3" id="edit-service-{{ $providerService->id }}">
                        <form method="POST" action="{{ route('provider.services.update', $providerService) }}" class="row g-2 ps-5">
                            @csrf @method('PATCH')
                            <div class="col-6 col-sm-4">
                                <x-input-label value="Pricing type" />
                                <select name="pricing_type" class="form-select form-select-sm" required>
                                    @foreach (['hourly', 'visit', 'session', 'day', 'week', 'monthly', 'custom'] as $type)
                                        <option value="{{ $type }}" @selected($providerService->pricing_type === $type)>{{ ucfirst($type) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6 col-sm-4">
                                <x-input-label value="Base price (₹)" />
                                <x-text-input type="number" step="0.01" min="0" name="base_price" class="form-control-sm" :value="$providerService->base_price" required />
                            </div>
                            <div class="col-12">
                                <x-input-label value="Details (optional)" />
                                <textarea name="description" rows="2" class="form-control form-control-sm">{{ $providerService->description }}</textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-sm btn-primary mt-1">Save changes</button>
                            </div>
                            <div class="col-12">
                                <p class="text-muted small mb-0 mt-1">Price changes only apply to new bookings &mdash; bookings already made keep the price they were booked at.</p>
                            </div>
                        </form>
                    </div>
                </div>
            @empty
                <div class="hp-empty">
                    <span class="hp-empty-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Zm5 0V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18"/></svg>
                    </span>
                    <p class="mb-0 small">You haven't added any services yet.</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection