{{-- resources/views/services/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Services')
@section('page_title', 'Property Services')
@section('page_subtitle', 'Manage guest services and requests')

@section('content')

{{-- Stats --}}
<div class="row g-3 mb-3">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-clay">
                <i class="bi bi-stars"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['total'] }}</div>
                <div class="stat-label">Total Services</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-check-circle"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['active'] }}</div>
                <div class="stat-label">Active</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-warning">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['pending'] }}</div>
                <div class="stat-label">Pending Requests</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-info">
                <i class="bi bi-calendar-day"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['today'] }}</div>
                <div class="stat-label">Requests Today</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">

    {{-- Services by Category --}}
    <div class="col-xl-8">

        <div class="d-flex justify-content-between align-items-center mb-2">
            <div></div>
            <a href="{{ tenant_route('services.requests.index') }}"
               class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-list-check me-1"></i>View Requests
            </a>
        </div>

        @if($services->isEmpty())
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-stars"
                       style="font-size:2.5rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-3 mb-1">No services yet</p>
                    <p class="text-muted" style="font-size:.82rem;">
                        Add services like laundry, room service, spa, transport etc.
                    </p>
                </div>
            </div>
        @else
            @foreach($services as $category => $categoryServices)
                <div class="card mb-3">
                    <div class="card-header">
                        <span class="card-title">
                            <i class="bi bi-grid me-2"
                               style="color:var(--clay)"></i>
                            {{ $category }}
                            <span style="font-size:.75rem;font-weight:400;
                                         color:var(--muted);margin-left:6px;">
                                {{ $categoryServices->count() }} services
                            </span>
                        </span>
                    </div>
                    <div class="card-body" style="padding:0;">
                        @foreach($categoryServices as $service)
                            <div style="display:flex;align-items:center;
                                        gap:14px;padding:13px 18px;
                                        border-bottom:1px solid var(--border);
                                        {{ !$service->is_active ? 'opacity:.6;' : '' }}">
                                <div style="flex:1;">
                                    <div style="display:flex;align-items:center;
                                                gap:8px;flex-wrap:wrap;">
                                        <span class="fw-semibold"
                                              style="font-size:.84rem;">
                                            {{ $service->name }}
                                        </span>
                                        @if($service->is_chargeable && $service->price)
                                            <span style="font-size:.72rem;font-weight:600;
                                                         color:var(--clay);">
                                                {{ $service->currency }}
                                                {{ number_format($service->price, 2) }}
                                                @if($service->unit)
                                                    / {{ $service->unit }}
                                                @endif
                                            </span>
                                        @elseif(!$service->is_chargeable)
                                            <span style="font-size:.68rem;background:#d1fae5;
                                                         color:#065f46;padding:2px 7px;
                                                         border-radius:4px;">
                                                Complimentary
                                            </span>
                                        @endif
                                        @if(!$service->is_active)
                                            <span style="font-size:.68rem;background:#f1f5f9;
                                                         color:var(--muted);padding:2px 7px;
                                                         border-radius:4px;">
                                                Inactive
                                            </span>
                                        @endif
                                    </div>
                                    @if($service->description)
                                        <div style="font-size:.72rem;color:var(--muted);
                                                    margin-top:3px;">
                                            {{ Str::limit($service->description, 80) }}
                                        </div>
                                    @endif
                                    @if($service->duration_minutes)
                                        <div style="font-size:.7rem;color:var(--muted);
                                                    margin-top:2px;">
                                            <i class="bi bi-clock me-1"></i>
                                            {{ $service->duration_minutes }} min
                                        </div>
                                    @endif
                                </div>
                                <div style="font-size:.72rem;color:var(--muted);
                                             flex-shrink:0;">
                                    {{ $service->requests_count }}
                                    {{ Str::plural('request', $service->requests_count) }}
                                </div>
                                <div style="display:flex;gap:6px;flex-shrink:0;">
                                    <button class="btn btn-xs btn-outline-secondary"
                                            data-bs-toggle="modal"
                                            data-bs-target="#editServiceModal"
                                            data-id="{{ $service->id }}"
                                            data-name="{{ $service->name }}"
                                            data-category="{{ $service->category }}"
                                            data-description="{{ $service->description }}"
                                            data-price="{{ $service->price }}"
                                            data-currency="{{ $service->currency }}"
                                            data-unit="{{ $service->unit }}"
                                            data-duration="{{ $service->duration_minutes }}"
                                            data-chargeable="{{ $service->is_chargeable ? 1 : 0 }}"
                                            data-active="{{ $service->is_active ? 1 : 0 }}"
                                            data-sort="{{ $service->sort_order }}">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form method="POST"
                                          action="{{ tenant_route('services.destroy', ['service' => $service->id]) }}"
                                          onsubmit="return confirm('Delete this service?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-xs btn-outline-danger"
                                                type="submit">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        @endif
    </div>

    {{-- Add Service --}}
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <span class="card-title">Add Service</span>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ tenant_route('services.store') }}">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}"
                               placeholder="e.g. Laundry Service"
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Category <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="category"
                               class="form-control @error('category') is-invalid @enderror"
                               value="{{ old('category') }}"
                               placeholder="e.g. Housekeeping"
                               list="categoryList" required>
                        <datalist id="categoryList">
                            <option value="Room Service">
                            <option value="Housekeeping">
                            <option value="Transport">
                            <option value="Spa & Wellness">
                            <option value="Food & Beverage">
                            <option value="Laundry">
                            <option value="Business">
                            <option value="Recreation">
                            <option value="Concierge">
                        </datalist>
                        @error('category')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" rows="2"
                                  class="form-control"
                                  placeholder="Brief description">{{ old('description') }}</textarea>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="checkbox" name="is_chargeable"
                                   value="1" id="isChargeable"
                                   class="form-check-input"
                                   {{ old('is_chargeable', 1) ? 'checked' : '' }}
                                   onchange="document.getElementById('priceFields').style.display = this.checked ? 'block' : 'none'">
                            <label class="form-check-label"
                                   for="isChargeable"
                                   style="font-size:.8rem;">
                                Chargeable service
                            </label>
                        </div>
                    </div>

                    <div id="priceFields">
                        <div class="row g-2 mb-3">
                            <div class="col-5">
                                <label class="form-label fw-semibold"
                                       style="font-size:.75rem;">Price</label>
                                <input type="number" name="price"
                                       class="form-control form-control-sm"
                                       value="{{ old('price') }}"
                                       min="0" step="0.01">
                            </div>
                            <div class="col-4">
                                <label class="form-label fw-semibold"
                                       style="font-size:.75rem;">Currency</label>
                                <select name="currency"
                                        class="form-select form-select-sm">
                                    @foreach(config('kubhuka.general.supported_currencies', []) as $code => $info)
                                        <option value="{{ $code }}"
                                                {{ (tenant()->baseCurrency?->code ?? 'USD') === $code ? 'selected' : '' }}>
                                            {{ $code }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-3">
                                <label class="form-label fw-semibold"
                                       style="font-size:.75rem;">Unit</label>
                                <input type="text" name="unit"
                                       class="form-control form-control-sm"
                                       value="{{ old('unit') }}"
                                       placeholder="item">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold"
                               style="font-size:.75rem;">
                            Duration (minutes)
                        </label>
                        <input type="number" name="duration_minutes"
                               class="form-control form-control-sm"
                               value="{{ old('duration_minutes') }}"
                               min="1" placeholder="Optional">
                    </div>

                    <input type="hidden" name="sort_order"
                           value="{{ old('sort_order', 0) }}">

                    <button type="submit"
                            class="btn btn-primary btn-sm w-100">
                        <i class="bi bi-plus-lg me-1"></i>Add Service
                    </button>
                </form>
            </div>
        </div>
    </div>

</div>

{{-- Edit Modal --}}
<div class="modal fade" id="editServiceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="editServiceForm">
                @csrf @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title"
                        style="font-size:.9rem;font-weight:700;">
                        Edit Service
                    </h5>
                    <button type="button" class="btn-close"
                            data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-8">
                            <label class="form-label fw-semibold">Name</label>
                            <input type="text" name="name"
                                   id="editName" class="form-control" required>
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold">Category</label>
                            <input type="text" name="category"
                                   id="editCategory" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Description</label>
                            <textarea name="description" rows="2"
                                      id="editDesc"
                                      class="form-control"></textarea>
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold">Price</label>
                            <input type="number" name="price"
                                   id="editPrice" class="form-control"
                                   min="0" step="0.01">
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold">Currency</label>
                            <select name="currency" id="editCurrency"
                                    class="form-select">
                                @foreach(config('kubhuka.general.supported_currencies', []) as $code => $info)
                                    <option value="{{ $code }}">{{ $code }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold">Unit</label>
                            <input type="text" name="unit" id="editUnit"
                                   class="form-control">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Duration (min)</label>
                            <input type="number" name="duration_minutes"
                                   id="editDuration" class="form-control" min="1">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Sort Order</label>
                            <input type="number" name="sort_order"
                                   id="editSort" class="form-control" min="0">
                        </div>
                        <div class="col-6">
                            <div class="form-check form-switch">
                                <input type="checkbox" name="is_chargeable"
                                       value="1" id="editChargeable"
                                       class="form-check-input">
                                <label class="form-check-label"
                                       for="editChargeable"
                                       style="font-size:.8rem;">Chargeable</label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check form-switch">
                                <input type="checkbox" name="is_active"
                                       value="1" id="editActive"
                                       class="form-check-input">
                                <label class="form-check-label"
                                       for="editActive"
                                       style="font-size:.8rem;">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">Cancel</button>
                    <button type="submit"
                            class="btn btn-primary btn-sm">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.getElementById('editServiceModal')
    .addEventListener('show.bs.modal', function(e) {
        const b = e.relatedTarget;
        document.getElementById('editName').value      = b.dataset.name;
        document.getElementById('editCategory').value  = b.dataset.category;
        document.getElementById('editDesc').value      = b.dataset.description || '';
        document.getElementById('editPrice').value     = b.dataset.price || '';
        document.getElementById('editCurrency').value  = b.dataset.currency;
        document.getElementById('editUnit').value      = b.dataset.unit || '';
        document.getElementById('editDuration').value  = b.dataset.duration || '';
        document.getElementById('editSort').value      = b.dataset.sort || 0;
        document.getElementById('editChargeable').checked = b.dataset.chargeable === '1';
        document.getElementById('editActive').checked     = b.dataset.active === '1';

        document.getElementById('editServiceForm').action =
            '{{ tenant_route('services.store') }}'
                .replace('/services', '/services/' + b.dataset.id);
        document.getElementById('editServiceForm')
            .querySelector('[name="_method"]').value = 'PUT';
    });
</script>
@endpush