{{-- resources/views/services/requests.blade.php --}}
@extends('layouts.app')
@section('title', 'Service Requests')
@section('page_title', 'Service Requests')
@section('page_subtitle', 'Guest service requests and fulfilment')

@section('content')

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body" style="padding:12px 16px;">
        <form method="GET"
              class="d-flex align-items-center gap-2 flex-wrap">

            <select name="status"
                    class="form-select form-select-sm"
                    style="width:auto;"
                    onchange="this.form.submit()">
                <option value="">All Statuses</option>
                @foreach(['pending','in_progress','completed','cancelled'] as $s)
                    <option value="{{ $s }}"
                            {{ request('status') === $s ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $s)) }}
                    </option>
                @endforeach
            </select>

            <select name="category"
                    class="form-select form-select-sm"
                    style="width:auto;"
                    onchange="this.form.submit()">
                <option value="">All Categories</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat }}"
                            {{ request('category') === $cat ? 'selected' : '' }}>
                        {{ $cat }}
                    </option>
                @endforeach
            </select>

            @if(request()->hasAny(['status','category']))
                <a href="{{ tenant_route('services.requests.index') }}"
                   class="btn btn-sm btn-outline-secondary">Clear</a>
            @endif

            <div class="ms-auto d-flex gap-2">
                <a href="{{ tenant_route('services.index') }}"
                   class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-stars me-1"></i>Services
                </a>
                <button class="btn btn-primary btn-sm"
                        data-bs-toggle="modal"
                        data-bs-target="#newRequestModal">
                    <i class="bi bi-plus-lg me-1"></i>New Request
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <span class="card-title">
            Service Requests
            <span style="font-size:.75rem;font-weight:400;
                         color:var(--muted);margin-left:6px;">
                {{ $requests->total() }} total
            </span>
        </span>
    </div>

    @if($requests->isEmpty())
        <div class="card-body text-center py-5">
            <i class="bi bi-list-check"
               style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No requests found</p>
        </div>
    @else
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Service</th>
                        <th>Guest / Room</th>
                        <th>Qty</th>
                        <th>Amount</th>
                        <th>Assigned</th>
                        <th>Status</th>
                        <th>Time</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($requests as $req)
                        @php
                            $sc = [
                                'pending'     => ['bg'=>'#fef3c7','color'=>'#92400e'],
                                'in_progress' => ['bg'=>'#dbeafe','color'=>'#1e40af'],
                                'completed'   => ['bg'=>'#d1fae5','color'=>'#065f46'],
                                'cancelled'   => ['bg'=>'#fee2e2','color'=>'#991b1b'],
                            ][$req->status] ?? ['bg'=>'#f1f5f9','color'=>'#475569'];
                        @endphp
                        <tr>
                            <td>
                                <div class="fw-semibold"
                                     style="font-size:.83rem;">
                                    {{ $req->service?->name }}
                                </div>
                                <div style="font-size:.7rem;color:var(--muted);">
                                    {{ $req->service?->category }}
                                </div>
                            </td>
                            <td>
                                @if($req->reservation?->guest)
                                    <div style="font-size:.82rem;font-weight:600;">
                                        {{ $req->reservation->guest->first_name }}
                                        {{ $req->reservation->guest->last_name }}
                                    </div>
                                @elseif($req->guest_name)
                                    <div style="font-size:.82rem;">
                                        {{ $req->guest_name }}
                                    </div>
                                @endif
                                @if($req->room_number)
                                    <div style="font-size:.7rem;color:var(--muted);">
                                        Room {{ $req->room_number }}
                                    </div>
                                @endif
                            </td>
                            <td style="font-size:.8rem;">
                                {{ $req->quantity ?? 1 }}
                            </td>
                            <td style="font-size:.82rem;font-weight:600;
                                       color:{{ $req->total_price > 0 ? 'var(--clay)' : 'var(--muted)' }};">
                                @if($req->total_price > 0)
                                    ${{ number_format($req->total_price, 2) }}
                                @else
                                    —
                                @endif
                            </td>
                            <td style="font-size:.78rem;color:var(--muted);">
                                {{ $req->assignedTo?->name ?? '—' }}
                            </td>
                            <td>
                                <span style="font-size:.7rem;font-weight:600;
                                             padding:2px 8px;border-radius:20px;
                                             background:{{ $sc['bg'] }};
                                             color:{{ $sc['color'] }};">
                                    {{ str_replace('_', ' ', $req->status) }}
                                </span>
                            </td>
                            <td style="font-size:.72rem;color:var(--muted);
                                       white-space:nowrap;">
                                {{ $req->created_at->format('d M H:i') }}
                            </td>
                            <td>
                                <button class="btn btn-xs btn-outline-secondary"
                                        data-bs-toggle="modal"
                                        data-bs-target="#updateModal"
                                        data-id="{{ $req->id }}"
                                        data-status="{{ $req->status }}"
                                        data-assigned="{{ $req->assigned_to }}">
                                    Update
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($requests->hasPages())
            <div class="card-body"
                 style="border-top:1px solid var(--border);padding:12px 16px;">
                {{ $requests->links() }}
            </div>
        @endif
    @endif
</div>

{{-- Update Modal --}}
<div class="modal fade" id="updateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="updateForm">
                @csrf @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title"
                        style="font-size:.9rem;font-weight:700;">
                        Update Request
                    </h5>
                    <button type="button" class="btn-close"
                            data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Status</label>
                        <select name="status" id="updateStatus"
                                class="form-select">
                            <option value="pending">Pending</option>
                            <option value="in_progress">In Progress</option>
                            <option value="completed">Completed</option>
                            <option value="cancelled">Cancelled</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Assign To</label>
                        <select name="assigned_to" id="updateAssigned"
                                class="form-select">
                            <option value="">Unassigned</option>
                            @foreach($staff as $member)
                                <option value="{{ $member->id }}">
                                    {{ $member->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Notes</label>
                        <textarea name="notes" rows="2"
                                  class="form-control"
                                  placeholder="Optional notes"></textarea>
                    </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">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- New Request Modal --}}
<div class="modal fade" id="newRequestModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST"
                  action="{{ tenant_route('services.requests.store') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"
                        style="font-size:.9rem;font-weight:700;">
                        Log Service Request
                    </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-12">
                            <label class="form-label fw-semibold">
                                Service <span class="text-danger">*</span>
                            </label>
                            <select name="service_id"
                                    class="form-select" required>
                                <option value="">Select service</option>
                                @foreach(\App\Models\PropertyService::where('property_id', tenant_id())->where('is_active', true)->orderBy('category')->orderBy('name')->get()->groupBy('category') as $cat => $svcs)
                                    <optgroup label="{{ $cat }}">
                                        @foreach($svcs as $svc)
                                            <option value="{{ $svc->id }}">
                                                {{ $svc->name }}
                                                @if($svc->price) — ${{ number_format($svc->price, 2) }} @endif
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">
                                Guest Name
                            </label>
                            <input type="text" name="guest_name"
                                   class="form-control"
                                   placeholder="Optional">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">
                                Room Number
                            </label>
                            <input type="text" name="room_number"
                                   class="form-control"
                                   placeholder="e.g. 101">
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold">Quantity</label>
                            <input type="number" name="quantity"
                                   class="form-control"
                                   value="1" min="1">
                        </div>
                        <div class="col-8">
                            <label class="form-label fw-semibold">
                                Scheduled At
                            </label>
                            <input type="datetime-local"
                                   name="scheduled_at"
                                   class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Notes</label>
                            <textarea name="notes" rows="2"
                                      class="form-control"
                                      placeholder="Special instructions..."></textarea>
                        </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">Log Request</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.getElementById('updateModal')
    .addEventListener('show.bs.modal', function(e) {
        const b = e.relatedTarget;
        document.getElementById('updateStatus').value   = b.dataset.status;
        document.getElementById('updateAssigned').value = b.dataset.assigned || '';
        document.getElementById('updateForm').action =
            '{{ tenant_route('services.requests.store') }}'
                .replace('/requests', '/requests/' + b.dataset.id);
        document.getElementById('updateForm')
            .querySelector('[name="_method"]').value = 'PUT';
    });
</script>
@endpush