@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
@if(
    isset($user_idroles) &&
    count(array_intersect($user_idroles, ["admhm1", "admind", "admins"])) > 0
)
<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 type="submit" form="rptsap-form" class="btn btn-primary mb-0" id="btn-sync" onclick="return showLoading();">
                        <i class="fas fa-play me-1"></i><span class="font-weight-bold">Execute</span>
                    </button>
                    <a href="{{ route('rptsap.status') }}" class="btn btn-outline-secondary mb-0 ms-2">
                        <i class="fas fa-history me-1"></i><span class="font-weight-bold">History</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<div class="container-fluid py-4">
    @if(
        isset($user_idroles) &&
        count(array_intersect($user_idroles, ["admhm1", "admind", "admins"])) > 0
    )
    <div class="row gx-4">
        <div class="col-lg">
            <div class="card">
                <form role="form" method="POST" action="{{ request()->url() }}" id="rptsap-form">
                    @csrf
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-control-label">Pilih Endpoint SAP <span class="text-danger">*</span></label>
                                    
                                    <!-- Checkbox Pilih Semua -->
                                    <div class="form-check mt-1 mb-2">
                                        <input class="form-check-input" type="checkbox" id="select-all-endpoints" {{ (!old() || (is_array(old('report_types')) && count(old('report_types')) == count($report_types))) ? 'checked' : '' }}>
                                        <label class="form-check-label text-sm font-weight-bold" for="select-all-endpoints">
                                            Pilih Semua Endpoint
                                        </label>
                                    </div>

                                    <div class="row mt-2">
                                        @foreach($report_types as $type => $config)
                                        <div class="col-md-6 col-lg-4 mb-2">
                                            <div class="form-check">
                                                <input class="form-check-input report-type-checkbox" type="checkbox" name="report_types[]" id="report_type_{{ $type }}" value="{{ $type }}" {{ (!old() || (is_array(old('report_types')) && in_array($type, old('report_types')))) ? 'checked' : '' }}>
                                                <label class="form-check-label text-sm" for="report_type_{{ $type }}">
                                                    {{ $config['label'] }}
                                                </label>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    @error('report_types')
                                        <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="year" class="form-control-label">
                                        Tahun <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" name="year" id="year" required>
                                        <option value="">-- Pilih Tahun --</option>
                                        @foreach ($year_options as $year)
                                            <option value="{{ $year }}" {{ old('year', date('Y')) == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <p class="text-secondary text-xs pt-1 px-1">
                                        *) Tahun adalah filter yang kompatibel untuk semua endpoint SAP. Endpoint bulanan (Sales On Hand, DO by SO & Customer Master) otomatis mengambil data Januari s.d. bulan berjalan.
                                    </p>
                                    @error('year')
                                        <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3" id="data-status-row" style="display: none;">
                            <div class="col-md-12">
                                <div class="alert alert-info mb-0">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <span id="data-status-text">Data sudah tersedia untuk tahun ini. Klik <strong>"View"</strong> pada tabel Available Data untuk melihat data atau <strong>"Execute"</strong> untuk fetch ulang dari SAP.</span>
                                </div>
                            </div>
                        </div>

                        <hr class="horizontal dark">
                    </div>
                    <div class="card-footer align-items-center pt-0 pb-2"></div>
                </form>
            </div>
        </div>
    </div>
    @endif

    <div class="row gx-4 py-2">
        <div class="col-lg">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-database me-2"></i>Available Data by Year</h6>
                </div>
                <div class="card-body">
                    @if(isset($year_list) && $year_list->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead>
                                    <tr class="table-cyan">
                                        <th class="text-center">Tahun</th>
                                        <th class="text-center">Last Updated</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($year_list as $yearData)
                                        <tr>
                                            <td class="text-center"><strong>{{ $yearData->year }}</strong></td>
                                            <td class="text-center"><small>{{ $yearData->last_updated ? date('d-m-Y H:i', strtotime($yearData->last_updated)) : '-' }}</small></td>
                                            <td class="text-center">
                                                <a href="{{ route('rptsap.status', ['year' => $yearData->year]) }}" class="btn btn-xs btn-info"><i class="fas fa-eye me-1"></i> View</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="text-muted">Belum ada data tersedia</p>
                            <p class="text-muted small">Pilih tahun dan endpoint, lalu klik "Execute" untuk mengambil data dari SAP</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@if ($jsmenu == '1')
    @if (view()->exists("js.{$dmenu}"))
        @push('addjs')
            @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('css')
<style>
    .table-cyan { background-color: #00b7bd !important; color: white !important; }
    .table-cyan th { color: white !important; font-weight: 600; border: 1px solid #009fa3 !important; }
</style>
@endpush

@push('js')
<script>
    const existingYears = @json($existing_years ?? []);

    $(document).ready(function() {
        $('#year').on('change', function() { updateButtonVisibility(); });
        updateButtonVisibility();

        // Logika Tombol "Pilih Semua"
        $('#select-all-endpoints').on('change', function() {
            $('.report-type-checkbox').prop('checked', this.checked);
        });

        // Menyesuaikan status "Pilih Semua" saat checkbox individual di-klik secara manual
        $('.report-type-checkbox').on('change', function() {
            const totalCheckboxes = $('.report-type-checkbox').length;
            const checkedCheckboxes = $('.report-type-checkbox:checked').length;
            $('#select-all-endpoints').prop('checked', totalCheckboxes === checkedCheckboxes);
        });

        // Cek status "Pilih Semua" saat pertama kali halaman di-load
        const totalCheckboxesInit = $('.report-type-checkbox').length;
        const checkedCheckboxesInit = $('.report-type-checkbox:checked').length;
        if (totalCheckboxesInit > 0 && totalCheckboxesInit === checkedCheckboxesInit) {
            $('#select-all-endpoints').prop('checked', true);
        } else {
            $('#select-all-endpoints').prop('checked', false);
        }
    });

    function updateButtonVisibility() {
        const selectedYear = $('#year').val();
        const dataStatusRow = $('#data-status-row');
        if (selectedYear && existingYears.includes(selectedYear)) {
            dataStatusRow.show();
        } else {
            dataStatusRow.hide();
        }
    }

    function showLoading() {
        const selectedYear = $('#year').val();
        if (!selectedYear) {
            Swal.fire({ title: 'Peringatan', text: 'Silakan pilih tahun terlebih dahulu', icon: 'warning', confirmButtonColor: '#028284' });
            return false;
        }

        const checked = $('.report-type-checkbox:checked').length;
        if (checked === 0) {
            Swal.fire({ title: 'Peringatan', text: 'Pilih minimal satu endpoint SAP', icon: 'warning', confirmButtonColor: '#028284' });
            return false;
        }

        Swal.fire({
            title: 'Mengambil Data',
            html: 'Sync dimulai!<br>Data sedang diproses di background...<br><small>Anda akan diarahkan ke halaman status</small>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => { Swal.showLoading(); },
            timer: 2000,
            timerProgressBar: true
        });
        return true;
    }
</script>
@endpush