@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Report Analisa'])

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-6">

            <div class="card shadow-lg">
                <form id="filter-form" method="POST" action="{{ url($url_menu) }}">
                    @csrf

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="text-uppercase text-sm mb-0">Filter Report Analisa</h5>

                            <button type="submit" class="btn btn-primary btn-sm mb-0">
                                <i class="fas fa-bolt me-1"></i> Execute
                            </button>
                        </div>

                        <hr>

                        @php
                        $currentYear = date('Y');
                        $years = range($currentYear - 5, $currentYear);
                        @endphp

                        <div class="row">

                            {{-- Jenis Audit --}}
                            <div class="col-md-12">
                                <label>Jenis NCR</label>
                                <span style="color:red;">*</span>
                                <select name="audit_type" class="form-control" required>
                                    <option value="">-- Pilih --</option>
                                    <option value="internal">Internal</option>
                                    <option value="external">External</option>
                                </select>
                            </div>

                            {{-- Tahun Lalu --}}
                            <div class="col-md-6 mt-3">

                                <label>Tahun Lalu</label>
                                <span style="color:red;">*</span>

                                <input
                                    type="number"
                                    id="year_lalu"
                                    name="year_lalu"
                                    class="form-control"
                                    value="{{ old('year_lalu', $currentYear - 1) }}"
                                    max="{{ $currentYear }}"
                                    required>

                            </div>
                            {{-- Tahun Ini --}}
                            <div class="col-md-6 mt-3">

                                <label>Tahun Ini</label>
                                <span style="color:red;">*</span>

                                <input
                                    type="number"
                                    id="year_ini"
                                    name="year_ini"
                                    class="form-control"
                                    value="{{ old('year_ini', $currentYear) }}"
                                    max="{{ $currentYear }}"
                                    required>

                                <div
                                    id="year-error"
                                    class="invalid-feedback">
                                </div>

                            </div>
                        </div>

                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<style>
 select.form-control{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;
    padding-right:38px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const form = document.getElementById('filter-form');

    const yearIni = document.getElementById('year_ini');
    const yearLalu = document.getElementById('year_lalu');

    const errorBox = document.getElementById('year-error');

    function clearError() {

        yearIni.classList.remove('is-invalid');
        yearLalu.classList.remove('is-invalid');

        errorBox.style.display = 'none';
        errorBox.innerHTML = '';

    }

    function validateYear() {

        clearError();

        const tahunIni = parseInt(yearIni.value);
        const tahunLalu = parseInt(yearLalu.value);

        if (
            !isNaN(tahunIni) &&
            !isNaN(tahunLalu) &&
            tahunIni <= tahunLalu
        ) {

            yearIni.classList.add('is-invalid');
            yearLalu.classList.add('is-invalid');

            errorBox.style.display = 'block';

            errorBox.innerHTML =
                '<i class="fas fa-exclamation-triangle me-1"></i> Tahun Ini harus lebih besar daripada Tahun Lalu.';

            return false;
        }

        return true;
    }

    yearIni.addEventListener('input', validateYear);
    yearLalu.addEventListener('input', validateYear);

    form.addEventListener('submit', function (e) {

        if (!validateYear()) {

            e.preventDefault();

            yearIni.focus();

            return false;

        }

    });

});
</script>
@endsection