@extends('layouts.main')

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">

        <div class="settings-management">

            <x-page-header>
                VIEWING A1 SETTINGS
            </x-page-header>

            {{--
                Upload form — handles:
                  • YouTube link for the ALFAENA instructions video
                  • Day-of-month that unlocks timesheet submissions and triggers user notifications
                  • ALFAENA Excel template file
                  • ALFAENA Odigies (instructions) PDF
            --}}
            <div class="pdf-upload-section">
                <form action="{{ route('management-settings.a1.update') }}" id="upload-a1-form" method="POST" enctype="multipart/form-data">
                    @csrf

{{--                    --}}{{-- YouTube instructions link --}}
{{--                    <div class="mb-4">--}}
{{--                        <x-ui.input-field.index--}}
{{--                            label="ALFAENA odigies youtube link"--}}
{{--                            name="a1link"--}}
{{--                            value="{{ $currentLink }}"--}}
{{--                        />--}}
{{--                    </div>--}}

                    {{--
                        Timesheet unlock day
                        ─────────────────────────────────────────────────────────
                        On this day of every month:
                          1. The Excel template upload will be unlocked for all users.
                          2. All active users will receive a notification reminding
                             them to complete and submit their timesheet.

                        Encoding:
                          null  → not configured
                          0     → last day of the month (LAST_DAY_OF_MONTH sentinel)
                          1–28  → fixed day, valid in every month including February

                        TODO: wire this value into the scheduled job / event listener
                        that performs the actual unlock and notification dispatch.
                    --}}

                    {{-- File uploads --}}
                    <div class="row g-4">

                        {{-- ALFAENA Template (.xlsx) --}}
                        <div class="col-md-6">
                            <div class="card h-100 border rounded p-3">
                                <div class="card-body d-flex flex-column gap-3">
                                    <h6 class="card-title fw-semibold text-uppercase mb-0">ALFAENA Template</h6>

                                    @if (!empty($templateFile))
                                        <div class="current-file">
                                            <p class="current-file__label">Current file:</p>
                                            <div class="current-file__info">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                                                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                                    <polyline points="14 2 14 8 20 8"/>
                                                </svg>
                                                <span class="current-file__name">{{ $templateFile['filename'] }}</span>
                                            </div>
                                            <div class="current-file__actions">
                                                <a href="{{ $templateFile['url'] }}" target="_blank" class="btn btn--secondary">
                                                    Download
                                                </a>
                                                <button type="submit" form="delete-template-form" class="btn btn--danger"
                                                        onclick="return confirm('Are you sure you want to delete this file?')">
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    @endif

                                    <x-ui.input-field.file label="ALFAENA TEMPLATE" name="a1template" accept=".xlsx,.xls" />
                                    <div class="mt-auto">
                                        <x-ui.blue-button form="upload-a1-form">
                                            {{ $templateFile ? 'Replace file' : 'Upload file' }}
                                        </x-ui.blue-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ALFAENA Odigies (instructions PDF) --}}
                        <div class="col-md-6">
                            <div class="card h-100 border rounded p-3">
                                <div class="card-body d-flex flex-column gap-3">
                                    <h6 class="card-title fw-semibold text-uppercase mb-0">ALFAENA Odigies</h6>

                                    @if (!empty($odigiesFile))
                                        <div class="current-file">
                                            <p class="current-file__label">Current file:</p>
                                            <div class="current-file__info">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                                                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                                    <polyline points="14 2 14 8 20 8"/>
                                                </svg>
                                                <span class="current-file__name">{{ $odigiesFile['filename'] }}</span>
                                            </div>
                                            <div class="current-file__actions">
                                                <a href="{{ $odigiesFile['url'] }}" target="_blank" class="btn btn--secondary">
                                                    Download
                                                </a>
                                                <button type="submit" form="delete-odigies-form" class="btn btn--danger"
                                                        onclick="return confirm('Are you sure you want to delete this file?')">
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    @endif

                                    <x-ui.input-field.file label="ALFAENA ODIGIES" name="a1odigies" />
                                    <div class="mt-auto">
                                        <x-ui.blue-button form="upload-a1-form">
                                            {{ $odigiesFile ? 'Replace file' : 'Upload file' }}
                                        </x-ui.blue-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>

                {{--
                    Delete forms are intentionally outside the main upload form
                    to avoid illegal nested <form> elements in HTML.
                --}}
                <form id="delete-template-form" action="{{ route('management-settings.a1.file.delete') }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="type" value="a1template">
                </form>

                <form id="delete-odigies-form" action="{{ route('management-settings.a1.file.delete') }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="type" value="a1odigies">
                </form>

            </div>{{-- end .pdf-upload-section --}}

        </div>{{-- end .settings-management --}}

    </div>

    {{-- Disable the day-number input when "last day of month" is checked --}}
    <script>
        (function () {
            const checkbox = document.getElementById('last_day_of_month');
            const dayInput = document.getElementById('timesheet_unlock_day');

            function syncState() {
                dayInput.disabled = checkbox.checked;
                if (checkbox.checked) {
                    dayInput.value = '';
                }
            }

            checkbox.addEventListener('change', syncState);
            syncState(); // apply on page load for the saved state
        })();
    </script>
@endsection