@extends('layouts.app')

@section('content')
    <div class="max-w-3xl mx-auto mt-10 p-8 bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg">

        {{-- Breadcrumb --}}
        <nav class="text-gray-600 text-sm mb-4" aria-label="Breadcrumb">
            <ol class="flex">
                <li><a href="{{ route('dashboard') }}" class="text-indigo-600 hover:underline">Home</a></li>
                <span class="mx-2">/</span>
                <li class="text-gray-900 font-semibold">Certifications</li>
            </ol>
        </nav>

        {{-- Header --}}
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-semibold text-gray-800">Your Certificates</h2>
            <a href="{{ route('dashboard') }}"
                class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg border">
                ← Go Back
            </a>
        </div>

        {{-- Add More Button --}}
        <div class="text-center mb-4">
            <a href="{{ route('certifications.create') }}">
                <button type="button" id="add-cert"
                    class="bg-indigo-500 text-white px-6 py-2 rounded-lg hover:bg-indigo-600">
                    Add More Certificates
                </button>
            </a>
        </div>

        {{-- Success Message --}}
        @if (session('success') || session('error'))
            <div
                class=" {{ session('error') ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' }}  p-3 rounded mb-6 text-center font-medium relative mt-2">
                {{ session('success') ?? session('error') }}
                <span onclick="this.parentElement.remove()" class="absolute right-3 top-2 cursor-pointer font-bold">
                    ✕
                </span>
            </div>
        @endif

        @foreach ($certificates as $index => $cert)
            <form action="{{ route('certifications.update') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div id="cert-container">
                    @php
                        $certificates = $certifications ?? collect();
                        if ($certificates->isEmpty()) {
                            $certificates = [null];
                        }
                    @endphp

                    <div class="cert-item mb-8 p-6 border rounded-xl bg-white shadow-sm">

                        {{-- Hidden Certificate ID  --}}
                        <input type="hidden" name="id" value="{{ $cert->id }}">

                        {{-- Certificate Name --}}
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Certificate Name</label>
                            <input type="text" name="name" class="w-full border p-3 rounded-lg"
                                value="{{ old('name', $cert->certificate_name ?? '') }}" required>
                        </div>

                        {{-- Issued By --}}
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Issued By</label>
                            <input type="text" name="issued_by" class="w-full border p-3 rounded-lg"
                                value="{{ old('issued_by', $cert->issued_by ?? '') }}" required>
                        </div>

                        {{-- Issue Date --}}
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Issue Date</label>
                            <input type="date" name="issue_date" class="w-full border p-3 rounded-lg"
                                value="{{ old('issue_date', $cert->issue_date ?? '') }}">
                        </div>

                        {{-- Certificate Link (Optional) --}}
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Certificate Link (Optional)</label>
                            <input type="url" name="link" class="w-full border p-3 rounded-lg"
                                value="{{ old('link', $cert->certificate_link ?? '') }}">
                        </div>

                        {{-- Old Certificate Path Hidden --}}
                        <input type="hidden" name="oldcertificate" value="{{ $cert->certificate_file }}">

                        {{-- Upload Certificate --}}
                        <div class="mb-3">
                            <label class="block text-gray-700 font-medium">Upload Certificate (Optional)</label><br>
                            <input type="file" name="file" id="cert_file" class="hidden"
                                accept="image/*,application/pdf">
                            <label for="cert_file"
                                class="cursor-pointer bg-indigo-500 text-white px-5 py-2 rounded-lg">Choose File</label>
                            <span id="cert-file-name" class="ml-3 text-gray-600">
                                {{ isset($cert->certificate_file) ? basename($cert->certificate_file) : 'No File Chosen' }}
                            </span>

                            @if (isset($cert->certificate_file))
                                <img id="cert-preview" src="{{ asset('storage/' . $cert->certificate_file) }}"
                                    class="mt-3 h-24 rounded-lg border">
                            @else
                                <img id="cert-preview" class="hidden mt-3 h-24 rounded-lg border">
                            @endif
                        </div>

                        {{-- Action Buttons --}}
                        <div class="text-right">

                            {{-- Update Button --}}
                            <button type="submit"
                                class="remove-cert bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Update
                            </button>

                            {{-- Delete Button  --}}
                            <a href="{{ route('certifications.delete', ['id' => $cert->id]) }}">
                                <button type="button" onclick="confirm"
                                    class="remove-cert bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">Remove
                                </button>
                            </a>
                        </div>

                    </div>
                </div>

            </form>
        @endforeach
    </div>
@endsection