@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        {{-- Flash message --}}
        @include('components.alert')
        {{-- End Flash message --}}
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <p class="text-danger text-sm font-weight-bold mb-3">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                <strong>Perhatian!</strong>
                                Mulai saat ini, absensi magang hanya dapat diinput pada hari yang sama dan tidak dapat
                                dilakukan secara backdate, kecuali untuk mengirim ulang absensi yang ditolak.
                                Mohon seluruh peserta magang untuk selalu mengisi absensi tepat waktu dan lebih disiplin.
                            </p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        {{-- Tanggal --}}
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="tanggal">Tanggal</label>
                                                <select name="tanggal" id="tanggal" class="form-control" required>
                                                    <option value="{{ now()->toDateString() }}"
                                                        {{ old('tanggal', now()->toDateString()) === now()->toDateString() ? 'selected' : '' }}>
                                                        {{ now()->format('d-m-Y') }} (Hari ini)
                                                    </option>
                                                    @foreach ($tanggal_ditolak as $tanggalDitolak)
                                                        <option value="{{ $tanggalDitolak }}"
                                                            {{ old('tanggal') === $tanggalDitolak ? 'selected' : '' }}>
                                                            {{ \Carbon\Carbon::parse($tanggalDitolak)->format('d-m-Y') }}
                                                            (Absen ditolak)
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('tanggal')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Aktivitas --}}
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="aktivitas">Aktivitas</label>
                                                <input type="text" name="aktivitas" class="form-control" required>
                                                @error('aktivitas')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Jenis --}}
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="jenis">Jenis</label>
                                                <select name="jenis" id="jenis" class="form-control" required>
                                                    <option value="">-- Pilih Jenis --</option>
                                                    @foreach ($jenis_absen as $jenis)
                                                        <option value="{{ $jenis->value }}">{{ $jenis->name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('jenis')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Upload Screenshot - Hanya muncul untuk WFO dan WFH --}}
                                        <div class="col-md-12" id="divScreenshot" style="display:none;">
                                            <div class="form-group">
                                                <label for="screenshot">Screenshot Kegiatan <span
                                                        class="text-danger">*</span></label>
                                                <input type="file" name="screenshot" id="screenshot" class="form-control"
                                                    accept="image/jpeg,image/jpg,image/png">
                                                <small class="text-muted">Upload screenshot kegiatan untuk WFO/WFH (Format:
                                                    JPG, PNG. Maksimal 2MB)</small>
                                                @error('screenshot')
                                                    <small class="text-danger d-block">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Keterangan untuk Izin/Sakit --}}
                                        <div class="col-md-12" id="divKeterangan" style="display:none;">
                                            <div class="alert alert-success">
                                                <i class="fas fa-info-circle me-1"></i>
                                                <strong>Informasi:</strong> Untuk absen Izin atau Sakit, tidak perlu upload
                                                screenshot.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        jQuery(document).ready(function($) {

            var jenisSelect = document.getElementById('jenis');
            var divScreenshot = document.getElementById('divScreenshot');
            var divKeterangan = document.getElementById('divKeterangan');
            var screenshotInput = document.getElementById('screenshot');

            function toggleScreenshot() {
                var jenis = jenisSelect.value;

                if (jenis === 'O' || jenis === 'H') {
                    divScreenshot.style.display = 'block';
                    divKeterangan.style.display = 'none';
                    screenshotInput.required = true;
                } else if (jenis === 'I' || jenis === 'S') {
                    divScreenshot.style.display = 'none';
                    divKeterangan.style.display = 'block';
                    screenshotInput.required = false;
                    screenshotInput.value = '';
                } else {
                    divScreenshot.style.display = 'none';
                    divKeterangan.style.display = 'none';
                    screenshotInput.required = false;
                    screenshotInput.value = '';
                }
            }

            jenisSelect.addEventListener('change', toggleScreenshot);

            toggleScreenshot();

            screenshotInput.addEventListener('change', function() {
                var file = this.files[0];
                if (file) {
                    var fileSize = file.size / 1024 / 1024;
                    if (fileSize > 2) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Ukuran File Terlalu Besar',
                            text: 'Ukuran screenshot maksimal 2MB. File Anda: ' + fileSize.toFixed(
                                2) + ' MB.',
                            confirmButtonColor: '#d33'
                        });
                        this.value = '';
                        return false;
                    }

                    var allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
                    if (!allowedTypes.includes(file.type)) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Format File Tidak Valid',
                            text: 'Hanya file JPG, JPEG, dan PNG yang diperbolehkan.',
                            confirmButtonColor: '#d33'
                        });
                        this.value = '';
                        return false;
                    }
                }
            });

            document.getElementById('{{ $dmenu }}-form').addEventListener('submit', function(e) {
                var jenis = jenisSelect.value;
                var screenshot = screenshotInput.files[0];

                if ((jenis === 'O' || jenis === 'H') && !screenshot) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'error',
                        title: 'Screenshot Wajib',
                        text: 'Untuk absen WFO/WFH, screenshot kegiatan wajib diupload.',
                        confirmButtonColor: '#FFE4E1'
                    });
                    return false;
                }
            });
        });
    </script>
@endpush