@extends('user.layout.main')

@section('title', 'Riwayat Prediksi')

@section('content')
<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800">Riwayat Hasil Prediksi Bulanan</h1>

    <div class="row">
        <div class="col-12">
            <div class="alert alert-primary border-left-primary shadow-sm py-3" role="alert">
                <div class="row no-gutters align-items-center">
                    <div class="col-auto mr-3">
                        <i class="fas fa- calendar-check fa-2x text-primary"></i>
                    </div>
                    <div class="col">
                        <h6 class="m-0 font-weight-bold text-primary">Informasi Cakupan Prediksi</h6>
                        <p class="mb-0 text-dark" style="font-size: 0.9rem;">
                            Sistem melakukan peramalan jumlah stok untuk total durasi <strong>180 Hari (6 Bulan)</strong> ke depan. 
                            Data di bawah ini dikelompokkan per bulan untuk memudahkan manajemen laporan pangkalan.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3 bg-white">
            <h6 class="m-0 font-weight-bold text-primary">Daftar Laporan Per Bulan</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="dataTable-Riwayat" width="100%" cellspacing="0">
                    <thead class="bg-gray-100 text-primary">
                        <tr>
                            <th width="50">No</th>
                            <th>Bulan & Tahun</th>
                            <th>Jumlah Hari Terdata</th>
                            <th width="150">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($riwayat as $index => $r)
                        @php
                            $namaBulan = \Carbon\Carbon::create()->month($r->month)->locale('id')->monthName;
                        @endphp
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td><strong>{{ $namaBulan }} {{ $r->year }}</strong></td>
                            <td>{{ $r->total_hari }} Hari</td>
                            <td>
                                <a href="{{ route('user.riwayat.export', ['year' => $r->year, 'month' => $r->month]) }}" 
                                   class="btn btn-success btn-sm shadow-sm">
                                    <i class="fas fa-file-excel mr-1"></i> Excel
                                </a>
                                <button onclick="deleteRiwayat('{{ $r->year }}', '{{ $r->month }}', '{{ $namaBulan }}')" 
                                        class="btn btn-danger btn-sm shadow-sm">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        $('#dataTable-Riwayat').DataTable({
            "order": [], 
            "pageLength": 10,
            "language": {
                "search": "Cari Bulan/Tahun:",
                "lengthMenu": "Tampilkan _MENU_ data",
                "paginate": { "next": "Next", "previous": "Prev" }
            }
        });
    });

    function deleteRiwayat(year, month, name) {
        Swal.fire({
            title: 'Hapus Riwayat?',
            text: "Data prediksi bulan " + name + " " + year + " akan dihapus permanen.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e74a3b',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/user/riwayat/delete/${year}/${month}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({ icon: 'success', title: 'Berhasil', text: data.success, timer: 1500 });
                        setTimeout(() => location.reload(), 1500);
                    }
                });
            }
        });
    }
</script>
@endpush
@endsection