@extends('layouts.master')

@section('content')

<div class="container mx-auto px-4 py-6">

    <div class="max-w-5xl mx-auto bg-white shadow rounded p-6">

        <h1 class="text-3xl font-bold mb-6">

            Add Training Session

        </h1>

        <form action="{{ route('training-sessions.store') }}"
              method="POST">

            @csrf

            <div class="grid grid-cols-2 gap-6">
                
                <div>
                    <label class="font-semibold"> Company </label>

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

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

                        @foreach($companies as $company)

                            <option value="{{ $company->id }}">

                                {{ $company->company_name }}

                            </option>

                        @endforeach

                    </select>

                </div>

                <div>

                    <label class="font-semibold">

                        Training Subject

                    </label>

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

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

                        @foreach($subjects as $subject)

                            <option value="{{ $subject->id }}">

                                {{ $subject->subject_name }}

                            </option>

                        @endforeach

                    </select>

                </div>

                <div>

                    <label class="font-semibold">

                        Training Date

                    </label>

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

                </div>
                <div>

                        <label class="font-semibold">

                            Certificate Issue Date

                        </label>

                        <input
                            type="date"
                            name="certificate_issue_date"
                            class="w-full border rounded px-3 py-2"
                            value="{{ old('certificate_issue_date', date('Y-m-d')) }}">

                    </div>
                <div>
                    <label class="block font-medium">
                        Certificate Template
                    </label>

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

                            @foreach($templates as $template)

                    <option
                        value="{{ $template->id }}"
                        data-image="{{ asset('storage/' . $template->background_image) }}"
                        {{ old('template_id') == $template->id ? 'selected' : '' }}>
                        {{ $template->template_name }}
                    </option>

                            @endforeach

                                </select>
           
            </div>
                <div>
                <label>
                Certificate Validity
                 (Months)
                 </label>
                 <input type="number"
                 name="validity_months"
                  class="w-full border rounded p-2"
                 value="{{ old('validity_months', 12) }}">
                </div>

                <div>
                <label class="font-semibold">
                Training Location / Company
                </label>

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

                <div>
                <label class="font-semibold">
                City
                </label>
                <input type="text"
                 name="city"
                 class="w-full border rounded px-3 py-2">

                </div>

                <div>
                    <div>
                    <label class="font-semibold">
                    Trainer
                    </label>
                    <select name="trainer_id"
                    class="w-full border rounded px-3 py-2">

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

                    @foreach($trainers as $trainer)

                        <option value="{{ $trainer->id }}">

                        {{ $trainer->trainer_name }}

                    </option>

                @endforeach

            </select>

                </div>

                <div>

                    <label class="font-semibold">

                        Site Name

                    </label>

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

                </div>

                <div class="col-span-2">

                    <label class="font-semibold">

                        Remarks

                    </label>

                    <textarea name="remarks"
                              rows="4"
                              class="w-full border rounded px-3 py-2"></textarea>

                </div>

            </div>
          
            <div class="card-header">Certificate Preview </div>
            <div class="card-body text-center">

            <img
                id="templatePreview"
                src=""
                class="img-fluid border"
                style="width:100%;max-width:900px;border:1px solid #ddd;display:none;">
                
            <div id="previewPlaceholder"> certificate template </div>

            <br>
            <a
                id="previewLink"
                href="#"
                target="_blank"
                class="btn btn-sm btn-primary mt-2 d-none">
                Open Full Preview
            </a>

        </div>
        </div> 

            <div class="mt-6 flex gap-3">

                <button type="submit"
                        style="background:blue;color:white;padding:10px 20px;border-radius:5px;">

                    Save Training Session

                </button>

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

                    Back

                </a>

            </div>

        </form>

    </div>

</div>

@endsection
<script>

document.addEventListener("DOMContentLoaded", function () {

    const select = document.getElementById("template_id");

    const img = document.getElementById("templatePreview");

    const placeholder =
        document.getElementById("previewPlaceholder");

    const link =
        document.getElementById("previewLink");

    function refreshPreview() {

        const option =
            select.options[select.selectedIndex];

        const image =
            option.dataset.image;

        if (image) {

            img.src = image;

            img.style.display = "block";

            placeholder.style.display = "none";

            link.href = image;

            link.classList.remove("d-none");

        } else {

            img.style.display = "none";

            placeholder.style.display = "block";

            link.classList.add("d-none");

        }
    }

    select.addEventListener(
        "change",
        refreshPreview
    );

    refreshPreview();

});

</script>