@extends('layouts.app')

@section('title', 'Search Requests')

@section('nav-actions')
    @php
        $token = request()->query('token');
        $uploadUrl = url('/upload') . ($token ? '?token=' . urlencode($token) : '');
        $photosUrl = url('/photos') . ($token ? '?token=' . urlencode($token) : '');
        $searchRequestsUrl = url('/search-requests') . ($token ? '?token=' . urlencode($token) : '');
    @endphp
    <a href="{{ $uploadUrl }}" class="btn btn-primary">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="17 8 12 3 7 8"></polyline>
            <line x1="12" y1="3" x2="12" y2="15"></line>
        </svg>
        Upload Photos
    </a>
    <a href="{{ $photosUrl }}" class="btn btn-secondary">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <polyline points="21 15 16 10 5 21"></polyline>
        </svg>
        View Photos
    </a>
@endsection

@section('content')
<div class="container mx-auto py-6">
    <!-- Vue.js Search Requests List Component -->
    <div 
        id="search-requests-list"
        data-photographer-id="{{ $photographerId ?? auth()->id() ?? 1 }}"
        data-hotel-id="{{ $hotelId ?? 1 }}"
        data-hotel-name="{{ $hotelName ?? 'Test Hotel' }}"
        data-api-base-url="{{ config('app.url') }}/api"
    ></div>
</div>
@endsection