@extends('master-admin')

@section('content')
<section class="py-8">
    <div class="max-w-5xl mx-auto px-4">
        <h1 class="text-2xl font-bold mb-6 text-gray-800">Manage Logos</h1>
        @if(session('success'))
            <div class="mb-4 p-4 rounded bg-green-100 text-green-800 border border-green-200">{{ session('success') }}</div>
        @elseif(session('error'))
            <div class="mb-4 p-4 rounded bg-red-100 text-red-800 border border-red-200">{{ session('error') }}</div>
        @endif
        <!-- Upload Form -->
        <div class="bg-white rounded-xl shadow mb-8">
            <div class="px-6 py-4 border-b border-gray-100 font-semibold text-gray-700">Upload Logos</div>
            <div class="p-6">
                <form action="{{ route('admin.clients.upload') }}" method="POST" enctype="multipart/form-data" id="uploadForm" class="space-y-4">
                    @csrf
                    <div>
                        <label for="logos" class="block text-gray-700 font-medium mb-1">Upload Logos</label>
                        <input type="file" name="logos[]" id="logos" class="block w-full border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 placeholder-gray-400 transition" multiple required placeholder="Select logo files">
                    </div>
                    <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg font-semibold shadow hover:bg-green-700 transition">Upload</button>
                </form>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow">
            <div class="px-6 py-4 border-b border-gray-100 font-semibold text-gray-700">Logos</div>
            <div class="p-6">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
                    @foreach ($clients as $client)
                        <div class="flex flex-col items-center bg-gray-50 rounded-lg shadow p-4">
                            <a href="{!! url(asset('storage/' . $client->logo_path)) !!}" target="_blank" class="block mb-2">
                                <img src="{{ asset('storage/' . $client->logo_path) }}" alt="Logo" class="h-20 w-auto object-contain mx-auto rounded">
                            </a>
                            <form action="{{ route('admin.clients.delete', $client->id) }}" method="POST" class="mt-2">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="px-4 py-1 bg-red-600 text-white rounded hover:bg-red-700 transition text-sm font-semibold flex items-center gap-1"><svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/></svg> Delete</button>
                            </form>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('post_js')

@endpush