@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">

                    TRAINING SESSIONS

                </h1>

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

                    Safe Skill Services ERP

                </p>

            </div>

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

                + Add Training Session

            </a>
            <a href="{{ route('training-sessions.export', request()->query()) }}"
                class="btn btn-success"
                 style="background:blue;color:white;padding:10px 20px;border-radius:5px;">
                    <i class="fas fa-file-excel"></i>
                    Export Excel
                </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
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
                <form method="GET"
                    action="{{ route('training-sessions.index') }}"
                    class="m-4">

                    <div class="flex gap-3">

                        <input type="text"name="search"
                        value="{{ request('search') }}"
                        placeholder="Search Company, Subject, Trainer, Location"
                        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('training-sessions.index') }}"
                    class="bg-gray-500 text-white px-6 rounded flex items-center">

                        Reset

                    </a>

                </div>

            </form>

                    <div class="overflow-x-auto">

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

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

                    <tr>

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

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

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

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

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

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

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

                    </tr>

                </thead>

                <tbody>

                    @forelse($sessions as $session)

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

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

                                {{ $session->id }}

                            </td>

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

                                {{ $session->company->company_name ?? '' }}

                            </td>

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

                                {{ $session->trainingSubject->subject_name ?? '' }}

                            </td>

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

                                {{ $session->training_date }}

                            </td>

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

                                {{ $session->venue }}

                            </td>

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

                                {{ $session->trainer?->trainer_name ?? $session->trainer_name }}

                            </td>

                            <td class="px-4 py-3">
                                <div class="flex justify-center gap-2">

                                   <a href="{{ route('training-sessions.show',$session->id) }}"
                                    style="background:indigo;color:white;padding:5px 15px;border-radius:5px;">

                                        Manage

                                    </a>

                                    <a href="{{ route('training-sessions.edit', $session->id) }}"
                                       style="background:orange;color:black;padding:5px 15px;border-radius:5px;">

                                        Edit

                                    </a>

                                    <form action="{{ route('training-sessions.destroy', $session->id) }}"
                                          method="POST"
                                          onsubmit="return confirm('Delete Training Session?\n\nThis will permanently remove:\n• Participants\n• Documents\n• Certificates')">

                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                                style="background:red;color:white;padding:5px 15px;border-radius:5px;">

                                            Delete

                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

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

                                No Training Sessions Found

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        <div class="p-5">

            {{ $sessions->links() }}

        </div>

    </div>

</div>

@endsection