@extends('layouts.master')

@section('content')

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

<div class="p-6 border-b">

    <div class="flex justify-between items-center">

        <div>

            <h2 class="text-2xl font-bold">
                Trainer Documents
            </h2>

            <p class="text-gray-600 mt-1">

                {{ $trainer->trainer_code }}
                -
                {{ $trainer->trainer_name }}

            </p>

        </div>

        <a href="{{ route('trainers.index') }}"
           class="bg-gray-500 text-white px-4 py-2 rounded">

            Back

        </a>

    </div>

</div>

@if(session('success'))

    <div class="m-4 p-3 bg-green-100 text-green-800 rounded">

        {{ session('success') }}

    </div>

@endif

<div class="p-6 border-b">

    <h3 class="font-bold text-lg mb-4">

        Upload New Document

    </h3>

    <form method="POST"
          action="{{ route('trainer-documents.store',$trainer) }}"
          enctype="multipart/form-data">

        @csrf

        <div class="grid grid-cols-2 gap-4">

            <div>

    <label class="block mb-1">

        Document Type

    </label>

    <select
        name="document_type"
        class="w-full border rounded px-3 py-2"
        required>

        <option value="">
            Select Document Type
        </option>

        <option value="PROFILE">
            Profile
        </option>

        <option value="SIGNATURE">
            Signature
        </option>

        <option value="CV">
            CV
        </option>

        <option value="CERTIFICATE">
            Certificate
        </option>

        <option value="PAN">
            PAN
        </option>

        <option value="AADHAR">
            Aadhar
        </option>

        <option value="OTHER">
            Other
        </option>

    </select>

        </div>

        <div>

            <label class="block mb-1">

                Document Name

            </label>

            <input type="text"
                name="document_name"
                class="w-full border rounded px-3 py-2"
                placeholder="Optional Description">

        </div>

            <div>

                <label class="block mb-1">

                    Select File

                </label>

                <input type="file"
                       name="file"
                       class="w-full border rounded px-3 py-2"
                       required>

            </div>

        </div>

        <div class="mt-4">

            <button type="submit"
                    class="bg-blue-600 text-white px-5 py-2 rounded">

                Upload Document

            </button>

        </div>

    </form>

</div>

<div class="p-6">

    <div class="flex justify-between mb-4">

        <h3 class="font-bold text-lg">

            Uploaded Documents

        </h3>

        <span class="text-gray-600">

            Total :
            {{ $documents->count() }}

        </span>

    </div>

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

        <table class="w-full border-collapse">

            <thead>

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

                    <th class="border p-2">
                        Sr No
                    </th>

                    <th class="border p-2">
                        Document Type
                    </th>

                    <th class="border p-2">
                        Uploaded On
                    </th>

                    <th class="border p-2">
                        Action
                    </th>

                </tr>

            </thead>

            <tbody>

                @forelse($documents as $document)

                <tr>

                    <td class="border p-2">

                        {{ $loop->iteration }}

                    </td>

                    <td class="border p-2">

                        {{ $document->document_type }}

                    </td>

                    <td class="border p-2">

                        {{ $document->created_at->format('d-m-Y') }}

                    </td>

                    <td class="border p-2">

                        <div class="flex gap-2">

                            <a href="{{ asset('storage/'.$document->file_path) }}"
                               target="_blank"
                               class="bg-green-600 text-white px-3 py-1 rounded">

                                View

                            </a>

                            <form method="POST"
                                  action="{{ route('trainer-documents.destroy',$document) }}">

                                @csrf
                                @method('DELETE')

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

                                    Delete

                                </button>

                            </form>

                        </div>

                    </td>

                </tr>

                @empty

                <tr>

                    <td colspan="4"
                        class="border p-4 text-center">

                        No Documents Uploaded

                    </td>

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

</div>

@endsection