@extends('layouts.app')

@section('title', 'Search Request Details')

@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="{{ $searchRequestsUrl }}" 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">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
        Back to List
    </a>
    <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>
@endsection

@section('content')
<div class="container mx-auto py-6">
    <!-- Vue.js Search Request Detail Component -->
    <div 
        id="search-request-detail"
        data-demande-id="{{ $demandeId }}"
        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"
        data-list-url="{{ url('/search-requests') . ($token ? '?token=' . urlencode($token) : '') }}"
    ></div>
</div>
@endsection