@extends('layouts.admin')

@section('title', 'Project Site Requirements')

@section('content')
    <x-page-header
        title="Site Requirements — {{ $project->code }}"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Projects', 'href' => route('admin.projects.index')],
            ['label' => $project->code, 'href' => route('admin.projects.show', $project)],
            ['label' => 'Site Requirements'],
        ]"
        subtitle="Site requirements only for this project."
    />

    @include('projects._tabs', ['project' => $project, 'active' => 'requirements'])

    <x-table-wrapper>
        <table class="min-w-full text-sm">
            <thead class="text-xs font-semibold uppercase tracking-wider text-zinc-500 bg-zinc-50">
                <tr>
                    <th class="text-left px-4 py-3">Requirement</th>
                    <th class="text-left px-4 py-3">Title</th>
                    <th class="text-left px-4 py-3">Description</th>
                    <th class="text-left px-4 py-3">Photo</th>
                    <th class="text-left px-4 py-3">Status</th>
                    <th class="text-right px-4 py-3">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($requirements as $r)
                    @php($state = $r->status?->value ?? (string) $r->status)
                    <tr class="hover:bg-zinc-50/60" x-data="{ editModal: false }">
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="font-medium text-zinc-900">#{{ $r->id }}</div>
                            <div class="text-xs text-zinc-500">{{ optional($r->created_at)->format('d M Y, H:i') }}</div>
                        </td>
                        <td class="px-4 py-3 text-zinc-900">{{ $r->title }}</td>
                        <td class="px-4 py-3 text-zinc-900 max-w-xl">
                            <div class="truncate" title="{{ $r->description ?? '' }}">{{ $r->description ?? '-' }}</div>
                        </td>
                        <td class="px-4 py-3">
                            @if ($r->photo)
                                <a href="{{ asset('storage/'.$r->photo) }}" target="_blank" class="inline-flex items-center gap-2">
                                    <img src="{{ asset('storage/'.$r->photo) }}" alt="Requirement photo" class="h-10 w-10 rounded object-cover border" />
                                    <span class="text-xs text-blue-700 hover:underline">Open</span>
                                </a>
                            @else
                                <span class="text-xs text-zinc-500">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <x-status-badge :value="$state" :label="ucfirst($state)" />
                        </td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            <div class="flex items-center justify-end gap-2">
                                @if($r->status === \App\Enums\SiteRequirementStatus::Pending)
                                    <button type="button" @click="editModal = true" class="action-btn action-edit">Edit</button>
                                    <form method="POST" action="{{ route('admin.approvals.site-requirements.approve', $r) }}" style="margin: 0; padding: 0;">
                                        @csrf @method('PUT')
                                        <button type="submit" class="action-btn action-approve" onclick="return confirm('Approve this requirement?')">Approve</button>
                                    </form>
                                    <form method="POST" action="{{ route('admin.approvals.site-requirements.reject', $r) }}" style="margin: 0; padding: 0;">
                                        @csrf @method('PUT')
                                        <button type="submit" class="action-btn action-reject" onclick="return confirm('Reject this requirement?')">Reject</button>
                                    </form>
                                @endif
                            </div>

                            <!-- Edit Modal -->
                            <div x-show="editModal" style="display: none;" class="custom-edit-overlay" @click="editModal = false" @keydown.escape.window="editModal = false">
                                <div class="custom-edit-modal" @click.stop>
                                    <div class="custom-edit-header">
                                        <h3>Edit Site Requirement #{{ $r->id }}</h3>
                                        <button type="button" @click="editModal = false" class="custom-edit-close">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                        </button>
                                    </div>
                                    <form method="POST" action="{{ route('admin.approvals.site-requirements.update', $r) }}" class="custom-edit-body">
                                        @csrf @method('PUT')
                                        <div class="custom-form-group">
                                            <label>Title</label>
                                            <input type="text" name="title" value="{{ $r->title }}" required />
                                        </div>
                                        <div class="custom-form-group">
                                            <label>Description</label>
                                            <textarea name="description" rows="4">{{ $r->description }}</textarea>
                                        </div>
                                        <div class="custom-edit-footer">
                                            <button type="button" @click="editModal = false" class="custom-btn-cancel">Cancel</button>
                                            <button type="submit" class="custom-btn-save">Save Changes</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-10 text-center text-zinc-500">No site requirements found for this project.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

    <div class="mt-4">
        {{ $requirements->links() }}
    </div>

    <style>
        .action-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 6px 12px !important;
            border-radius: 6px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
            border: none !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
            line-height: 1 !important;
        }
        .action-edit {
            background-color: #e0e7ff !important;
            color: #4f46e5 !important;
        }
        .action-edit:hover {
            background-color: #c7d2fe !important;
        }
        .action-approve {
            background-color: #d1fae5 !important;
            color: #059669 !important;
        }
        .action-approve:hover {
            background-color: #a7f3d0 !important;
        }
        .action-reject {
            background-color: #ffe4e6 !important;
            color: #e11d48 !important;
        }
        .action-reject:hover {
            background-color: #fecdd3 !important;
        }
        .custom-edit-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background-color: rgba(0, 0, 0, 0.7) !important;
            z-index: 999999 !important;
            display: flex;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px !important;
        }
        .custom-edit-modal {
            background: #fff !important;
            border-radius: 16px !important;
            width: 100% !important;
            max-width: 500px !important;
            max-height: 90vh !important;
            overflow-y: auto !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
            display: flex !important;
            flex-direction: column !important;
        }
        .custom-edit-header {
            padding: 16px 24px !important;
            border-bottom: 1px solid #e2e8f0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            background: #f8fafc !important;
            border-top-left-radius: 16px !important;
            border-top-right-radius: 16px !important;
        }
        .custom-edit-header h3 {
            margin: 0 !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            color: #0f172a !important;
        }
        .custom-edit-close {
            background: transparent !important;
            border: none !important;
            color: #64748b !important;
            cursor: pointer !important;
            padding: 4px !important;
        }
        .custom-edit-close:hover {
            color: #0f172a !important;
        }
        .custom-edit-close svg {
            width: 20px !important;
            height: 20px !important;
        }
        .custom-edit-body {
            padding: 24px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
            background: #fff !important;
        }
        .custom-form-group {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            text-align: left !important;
        }
        .custom-form-group label {
            font-size: 12px !important;
            font-weight: 700 !important;
            color: #64748b !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
        }
        .custom-form-group input, .custom-form-group textarea {
            width: 100% !important;
            padding: 10px 14px !important;
            border-radius: 8px !important;
            border: 1px solid #cbd5e1 !important;
            font-size: 14px !important;
            color: #0f172a !important;
            outline: none !important;
            background: #fff !important;
            box-sizing: border-box !important;
        }
        .custom-form-group input:focus, .custom-form-group textarea:focus {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }
        .custom-edit-footer {
            padding-top: 16px !important;
            border-top: 1px solid #e2e8f0 !important;
            display: flex !important;
            justify-content: flex-end !important;
            gap: 12px !important;
        }
        .custom-btn-cancel {
            padding: 8px 16px !important;
            border-radius: 8px !important;
            border: 1px solid #cbd5e1 !important;
            background: #fff !important;
            color: #334155 !important;
            font-weight: 500 !important;
            font-size: 14px !important;
            cursor: pointer !important;
        }
        .custom-btn-save {
            padding: 8px 24px !important;
            border-radius: 8px !important;
            border: none !important;
            background: #4f46e5 !important;
            color: #fff !important;
            font-weight: 500 !important;
            font-size: 14px !important;
            cursor: pointer !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
        }
        .custom-btn-save:hover {
            background: #4338ca !important;
        }
    </style>
@endsection