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

                Training Session Documents

            </h2>

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

                {{ $training_session->company?->company_name }}

                -

                {{ $training_session->trainingSubject?->subject_name }}

            </p>

        </div>

        <a href="{{ route('training-sessions.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 Document

    </h3>

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

        @csrf

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

            <div>

                <label>

                    Document Type

                </label>

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

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

                    <option value="Attendance Sheet">
                        Attendance Sheet
                    </option>

                    <option value="Training Photos">
                        Training Photos
                    </option>

                    <option value="Quotation">
                       Quotation
                    </option>

                    <option value="Purchase Order">
                        Purchase Order
                    </option>

                    <option value="Client Communication">
                        Client Communication
                    </option>

                    <option value="Invoice">
                        Invoice
                    </option>

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

                </select>

            </div>

            <div>

                <label>

                    Document Name

                </label>

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

            </div>

            <div>

                <label>

                    Select File

                </label>

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

            </div>

            <div>

                <label>

                    Remarks

                </label>

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

            </div>

        </div>

        <div class="mt-4">

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

                Upload

            </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>

            Total Documents :
            {{ $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">
                        Type
                    </th>

                    <th class="border p-2">
                        Document Name
                    </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->document_name }}

                    </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('training-session-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="5"
                        class="border p-4 text-center">

                        No Documents Uploaded

                    </td>

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

</div>

@endsection