@extends('layouts.master')

@section('content')

<div class="max-w-7xl mx-auto p-6">

    <div class="bg-white shadow rounded-lg">

        <div class="flex justify-between items-center p-5 border-b">

            <div>

                <h1 class="text-2xl font-bold text-gray-800">

                    PARTICIPANTS

                </h1>

                <p class="text-gray-500 text-sm">

                    Safe Skill ERP

                </p>


            </div>

            <a href="{{ route('participants.create') }}"
               style="background:blue;color:white;padding:10px 20px;border-radius:5px;">

                + Add Participant
            </a>
            <a
    href="{{ route('participants.export', request()->query()) }}"
    class="btn btn-success">

    <i class="fas fa-download"></i>

    Download Participants

</a>

        </div>
        

        @if(session('success'))

            <div class="m-4 p-4 bg-green-100 border border-green-300 text-green-700 rounded">

                {{ session('success') }}

            </div>

        @endif
    <form method="GET"
        action="{{ route('participants.index') }}"
        class="mb-6">

        <div class="flex gap-3">

            <input type="text"

                name="search"

                value="{{ request('search') }}"

                placeholder="Search by participant, certificate no, company or training"

                class="border rounded px-4 py-2 w-full">

            <button type="submit"

                    class="bg-blue-600 text-white px-6 rounded">

                Search

            </button>
            <a href="{{ route('participants.index') }}"
            class="bg-gray-500 text-white px-6 rounded flex items-center">

                Reset

            </a>

        </div>

    </form>
    
    <div class="text-sm text-gray-500 mb-3">
        Total Records: {{ $participants->total() }}
    </div>
            <div class="overflow-x-auto">

            <table class="min-w-full">

                <thead class="bg-gray-100">

                    <tr>

                            <tr>

                                <th class="px-4 py-3">ID</th>

                                <th class="px-4 py-3">Participant Name</th>

                                <th class="px-4 py-3">Company</th>

                                <th class="px-4 py-3">Training Subject</th>

                                <th class="px-4 py-3">Training Date</th>

                                <th class="px-2 py-3 w-32">Designation</th> 

                                <th class="px-4 py-3">Certificate No</th>

                                <th class="px-4 py-3 text-center">


                            Actions

                        </th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($participants as $participant)

                        <tr class="border-b hover:bg-gray-50">

    <td class="px-4 py-3">

        {{ $participant->id }}

    </td>

    <td class="px-4 py-3 font-semibold">

        {{ $participant->participant_name }}

    </td>

    <td class="px-4 py-3">

        {{ $participant->trainingSession->company->company_name ?? '' }}

    </td>

    <td class="px-4 py-3">

        {{ $participant->trainingSession->trainingSubject->subject_name ?? '' }}

    </td>

    <td class="px-4 py-3">

        {{ $participant->trainingSession->training_date ?? '' }}

    </td>

    <td class="px-2 py-3 text-sm">

        {{ $participant->designation }}
      
    </td>

    <td class="px-4 py-3">

    @if($participant->certificate_no)
    {{ $participant->certificate_no }}
    @else

        <span class="badge bg-warning text-dark">
            Draft
        </span>
        
    @endif

    </td>

    <td class="px-2 py-3">

    <div class="flex flex-col gap-1">

        <div class="flex gap-1">

            <a href="{{ route('participants.certificate-preview',$participant->id) }}"
               target="_blank"
               class="bg-blue-600 text-white px-3 py-1 rounded text-center flex-1">

                Preview

            </a>

            <a href="{{ route('participants.certificate',$participant->id) }}"
               class="bg-green-600 text-white px-3 py-1 rounded text-center flex-1">

                Certificate

            </a>

        </div>

        <div class="flex gap-1">

            <a href="{{ route('participants.edit',$participant->id) }}"
               class="bg-orange-500 text-black px-3 py-1 rounded text-center flex-1">

                Edit

            </a>

            <form action="{{ route('participants.destroy',$participant->id) }}"
                  method="POST"
                  class="flex-1">

                @csrf
                @method('DELETE')

                <button type="submit"
                        class="bg-red-600 text-white px-3 py-1 rounded w-full"
                        onclick="return confirm('Delete this participant?')">

                    Delete

                </button>

            </form>

        </div>

    </div>

</td>
</tr>

                    @empty

                        <tr>

                            <td colspan="6"
                                class="text-center py-10 text-gray-500">

                                No Participants Found

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        <div class="p-5">

            {{ $participants->links() }}

        </div>

    </div>

</div>

@endsection