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

            Edit Training Session

        </h1>

        @if($errors->any())

            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">

                <ul class="list-disc pl-5">

                    @foreach($errors->all() as $error)

                        <li>{{ $error }}</li>

                    @endforeach

                </ul>

            </div>

        @endif

        <form action="{{ route('training-sessions.update', $training_session->id) }}"
              method="POST">

            @csrf
            @method('PUT')

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

                <!-- COMPANY -->
                <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 }}"
                                {{ $training_session->company_id == $company->id ? 'selected' : '' }}>

                                {{ $company->company_name }}

                            </option>

                        @endforeach

                    </select>

                </div>

                <!-- SUBJECT -->
                <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 }}"
                                {{ $training_session->training_subject_id == $subject->id ? 'selected' : '' }}>

                                {{ $subject->subject_name }}

                            </option>

                        @endforeach

                    </select>

                </div>

                <!-- DATE -->
                <div>

                    <label class="font-semibold">

                        Training Date

                    </label>

                    <input type="date"
                           name="training_date"
                           class="w-full border rounded px-3 py-2"
                           value="{{ old('training_date', $training_session->training_date) }}">

                </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', $training_session->certificate_issue_date) }}">

</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', $training_session->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',
                                $training_session->validity_months
                            ) }}">

                    </div>

                <!-- Training Location / Company -->
                <div>

                    <label class="font-semibold">

                        Training Location / Company

                    </label>

                    <input type="text"
                           name="venue"
                           class="w-full border rounded px-3 py-2"
                           value="{{ old('venue', $training_session->venue) }}">

                </div>

                <!-- CITY -->
                <div>

                    <label class="font-semibold">

                        City

                    </label>

                    <input type="text"
                           name="city"
                           class="w-full border rounded px-3 py-2"
                           value="{{ old('city', $training_session->city) }}">

                </div>

                <!-- TRAINER -->
                <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 }}"
                                {{ $training_session->trainer_id == $trainer->id ? 'selected' : '' }}>

                                {{ $trainer->trainer_name }}

                        </option>
                        @endforeach

                    </select>

                </div>

                <!-- SITE -->
                <div>

                    <label class="font-semibold">

                        Site Name

                    </label>

                    <input type="text"
                           name="site_name"
                           class="w-full border rounded px-3 py-2"
                           value="{{ old('site_name', $training_session->site_name) }}">

                </div>

                <!-- REMARKS -->
                <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">{{ old('remarks', $training_session->remarks) }}</textarea>

                </div>

            </div>

            <div class="mt-6 border rounded shadow-sm p-4">

                <h3 class="font-semibold mb-3">
                    Certificate Preview
                </h3>
                </div>
</div>

    <div class="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 class="mt-6 flex gap-3">

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

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