<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" href="/images/logo.svg" type="image/png">
    <title>Manajemen Ayam</title>
    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/charts/barChart.js'])
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

</head>

<body class="font-sans antialiased">
    <div class="flex min-h-screen">
        @include('components.sidebar')
        <div class="flex-1 flex flex-col ml-16 sm:ml-64 py-6 md:py-0">
            <livewire:layout.navigation />
            <main class="lg:p-6 mt-16">
                <div class="flex flex-col space-y-6 px-4 sm:px-6 lg:px-0">
                    @if (session('status'))
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                let status = "{{ session('status') }}";
                                let message = "{{ session('message') }}";

                                switch (status) {
                                    case 'success':
                                        toastr.success(message, "Success");
                                        break;
                                    case 'error':
                                        toastr.error(message, "Error");
                                        break;
                                    default:
                                        toastr.info(message, "Notification");
                                }
                            });
                        </script>
                    @endif

                    <div x-data="harianHandler()" class="flex flex-col">

                        <div class="flex gap-6 mb-6">
                            <div class="bg-white p-6 rounded-md shadow-sm w-3/4 ring-2 ring-gray-700">
                                <h2 class="text-base md:text-lg font-semibold mb-2">Manajemen Ayam Bulanan</h2>
                                <canvas id="myBarChart" class="w-full h-64"></canvas>
                            </div>
                            <div class="flex flex-col justify-between gap-6">
                                <div class="flex flex-col p-6 ring-2 ring-gray-700 rounded-lg bg-white hover:bg-orangeCrayola/10 hover:shadow-lg transition duration-300 w-full cursor-pointer h-full"
                                    @click="openModal = 'jumlahAyam'; console.log('Opened jumlahAyam modal')">
                                    <div class="mb-4 text-orangeCrayola text-2xl">
                                        <div
                                            class="w-12 h-12 text-orangeCrayola flex items-center justify-center border-2 border-orangeCrayola rounded-lg bg-orangeCrayola/10">
                                            <i class="fa-solid fa-pen-to-square text-2xl"></i>
                                        </div>
                                    </div>
                                    <h3 class="font-semibold text-xl md:text-2xl text-orangeCrayola">Form Input Data
                                        Populasi Ayam</h3>
                                    <div class="mt-4">
                                        <span
                                            class="py-1 md:py-2 px-2 md:px-4 rounded-lg bg-orangeCrayola/25 text-orangeCrayola font-medium md:font-semibold border-2 border-orangeCrayola">
                                            Ayam di kandang
                                            {{ $populasi->sum('jumlah_ayam_masuk') }} ekor
                                        </span>
                                    </div>
                                </div>

                                <div class="flex flex-col p-6 ring-2 ring-gray-700 rounded-lg bg-white hover:bg-orangeCrayola/10 hover:shadow-lg transition duration-300 w-full cursor-pointer h-full"
                                    @click="openModal = 'harianAyam'; console.log('Opened harianAyam modal')">
                                    <div class="mb-4 text-orangeCrayola text-2xl">
                                        <div
                                            class="w-12 h-12 text-orangeCrayola flex items-center justify-center border-2 border-orangeCrayola rounded-lg bg-orangeCrayola/10">
                                            <i class="fa-solid fa-pen-to-square text-2xl"></i>
                                        </div>
                                    </div>
                                    <h3 class="font-semibold text-xl md:text-2xl text-orangeCrayola">Form Input Data
                                        Harian Ayam</h3>
                                    <div class="mt-4">
                                        <span
                                            class="py-1 md:py-2 px-2 md:px-4 rounded-lg bg-orangeCrayola/25 text-orangeCrayola font-medium md:font-semibold border-2 border-orangeCrayola">
                                            {{ $harian->sum('jumlah_ayam_sakit') }} Ayam Sakit,
                                            {{ $harian->sum('jumlah_ayam_mati') }} Ayam Mati
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white p-6 rounded-lg shadow-md w-full mb-6 ring-2 ring-gray-700">
                            <!-- Heading Data Populasi Ayam -->
                            <h2 class="text-lg md:text-xl font-bold mb-2 text-orangeCrayola">Data Populasi Ayam</h2>
                            <div class="overflow-x-auto min-h-[220px]">
                                <table class="w-full text-center border-collapse">
                                    <thead class="text-gray-600 uppercase text-sm tracking-wide">
                                        <tr class="border-b-2 border-gray-700">
                                            <th class="px-4 py-3">No</th>
                                            <th class="px-4 py-3">Nama Kandang</th>
                                            <th class="px-4 py-3">Kode Populasi</th>
                                            <th class="px-4 py-3">Nama Populasi</th>
                                            <th class="px-4 py-3">Tanggal DOC</th>
                                            <th class="px-4 py-3">Jumlah Ayam</th>
                                            <th class="px-4 py-3">Status Ayam</th>
                                            <th class="px-4 py-3">Aksi</th>
                                            <th class="px-4 py-3">Cetak</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-gray-700 text-sm">
                                        @foreach ($populasi as $key => $item)
                                            <tr class="hover:bg-gray-50 border-b border-gray-200">
                                                <td class="px-4 py-3">{{ $populasi->firstItem() + $key }}</td>
                                                <td class="px-4 py-3">{{ $item->kandang->nama_kandang ?? 'N/A' }}</td>
                                                <td class="px-4 py-3">{{ $item->kode_batch }}</td>
                                                <td class="px-4 py-3">{{ $item->nama_batch }}</td>
                                                <td class="px-4 py-3">
                                                    {{ \Carbon\Carbon::parse($item->tanggal_doc)->translatedFormat('d F Y') }}
                                                </td>
                                                <td class="px-4 py-3">{{ $item->jumlah_ayam_masuk }}</td>
                                                <td class="px-4 py-3">
                                                    <span
                                                        class="px-3 py-1 rounded text-xs font-semibold
                                                        {{ $item->status_ayam === 'Proses' ? 'bg-yellow-100 text-yellow-700' : '' }}
                                                        {{ $item->status_ayam === 'Siap Panen' ? 'bg-orange-100 text-orange-700' : '' }}
                                                        {{ $item->status_ayam === 'Sudah Panen' ? 'bg-green-100 text-green-700' : '' }}">
                                                        {{ $item->status_ayam }}
                                                    </span>
                                                </td>
                                                <td class="px-4 py-3 flex gap-3 justify-center items-center">
                                                    <button
                                                        class="edit-btn-populasi px-3 py-3 rounded text-xs font-semibold bg-blue-100 text-blue-700 flex justify-center items-center w-12 h-12 cursor-pointer"
                                                        @click="$dispatch('open-edit-populasi', { 
                                                        id: {{ $item->id }},
                                                        batchCodeSuffix: '{{ substr($item->kode_batch, 9) }}',
                                                        nama_batch: '{{ addslashes($item->nama_batch) }}',
                                                        tanggal_doc: '{{ \Carbon\Carbon::parse($item->tanggal_doc)->format('Y-m-d') }}',
                                                        jumlah_ayam_masuk: {{ $item->jumlah_ayam_masuk }},
                                                        status_ayam: '{{ $item->status_ayam }}',
                                                        kandang_id: {{ $item->kandang_id }}
                                                    })">
                                                        <i class="fa-solid fa-pen-to-square text-lg"></i>
                                                    </button>

                                                    <button type="button"
                                                        class="swal-delete-btn px-3 py-3 rounded bg-red-100 text-red-700 flex justify-center items-center w-12 h-12 cursor-pointer"
                                                        data-id="{{ $item->id }}"
                                                        data-url="{{ route('populasi.destroy', $item->id) }}">
                                                        <i class="fa-solid fa-trash text-lg"></i>
                                                    </button>
                                                </td>
                                                <td class="px-4 py-3">
                                                    <a href="{{ route('populasi.cetak', $item->id) }}"
                                                        class="px-3 py-3 rounded font-semibold bg-gray-300 text-white-700 flex justify-center items-center gap-2 cursor-pointer">
                                                        <i class="fa-solid fa-print text-base"></i>
                                                        <p>Cetak</p>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="mt-4">
                                {{ $populasi->links('pagination::tailwind') }}
                            </div>
                        </div>

                        <div class="bg-white p-6 rounded-lg shadow-md w-full mb-6 ring-2 ring-gray-700">
                            <!-- Heading Data Harian Ayam -->
                            <h2 class="text-lg md:text-xl font-bold mb-2 text-orangeCrayola">Data Harian Ayam</h2>
                            <div class="overflow-x-auto min-h-[220px]">
                                <table class="w-full text-center border-collapse">
                                    <thead class="text-gray-600 uppercase text-sm tracking-wide">
                                        <tr class="border-b-2 border-gray-700">
                                            <th class="px-4 py-3">No</th>
                                            <th class="px-4 py-3">Nama Populasi</th>
                                            <th class="px-4 py-3">Tanggal Input</th>
                                            <th class="px-4 py-3">Jumlah Ayam Sakit</th>
                                            <th class="px-4 py-3">Jumlah Ayam Mati</th>
                                            <th class="px-4 py-3">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-gray-700 text-sm">
                                        @foreach ($harian as $key => $item)
                                            <tr class="hover:bg-gray-50 border-b border-gray-200">
                                                <td class="px-4 py-3">{{ $loop->iteration }}</td>
                                                <td class="px-4 py-3">{{ $item->nama_batch }}</td>
                                                <td class="px-4 py-3">
                                                    {{ \Carbon\Carbon::parse($item->tanggal_input)->translatedFormat('d F Y') }}
                                                </td>
                                                <td class="px-4 py-3">{{ $item->jumlah_ayam_sakit }}</td>
                                                <td class="px-4 py-3">{{ $item->jumlah_ayam_mati }}</td>
                                                <td class="px-4 py-3 flex gap-3 justify-center items-center">
                                                    <button
                                                        class="edit-btn-harian px-3 py-3 rounded text-xs font-semibold bg-blue-100 text-blue-700 flex justify-center items-center w-12 h-12 cursor-pointer"
                                                        @click="$dispatch('open-edit-harian', { 
                                                        id: {{ $item->id }},
                                                        id_populasi: {{ $item->id_populasi }},
                                                        nama_batch: '{{ $item->nama_batch }}',
                                                        tanggal_input: '{{ \Carbon\Carbon::parse($item->tanggal_input)->format('Y-m-d') }}',
                                                        jumlah_ayam_sakit: {{ $item->jumlah_ayam_sakit }},
                                                        jumlah_ayam_mati: {{ $item->jumlah_ayam_mati }}
                                                    })">
                                                        <i class="fa-solid fa-pen-to-square text-lg"></i>
                                                    </button>

                                                    <button type="button"
                                                        class="swal-delete-harian px-3 py-3 rounded bg-red-100 text-red-700 flex justify-center items-center w-12 h-12 cursor-pointer"
                                                        data-id="{{ $item->id }}"
                                                        data-url="{{ route('harian.destroy', $item->id) }}">
                                                        <i class="fa-solid fa-trash text-lg"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="mt-4">
                                {{ $harian->links('pagination::tailwind') }}
                            </div>
                        </div>

                        <x-popup-form-jumlah-ayam :kandang="$kandang" />
                        <x-popup-form-harian-ayam :batches="$batches" />
                        <x-popup-form-edit-jumlah-ayam :kandang="$kandang" :batches="$batches" />
                        <x-popup-form-edit-harian-ayam :batches="$batches" />
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('harianHandler', () => ({
                openModal: null,
                editData: {},

                init() {
                    this.$watch('editData.batchCodeSuffix', value => {
                        this.editData.batchCodeSuffix = value.replace(/[^a-zA-Z0-9]/g, '')
                            .slice(0, 3);
                    });
                },

            }));
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function handleDelete(buttonClass, entityName) {
                document.querySelectorAll(buttonClass).forEach(button => {
                    button.addEventListener('click', function() {
                        let itemId = this.dataset.id;
                        let deleteUrl = this.dataset.url;

                        Swal.fire({
                            title: 'Apakah Anda yakin?',
                            text: `Data ${entityName} ini akan dihapus secara permanen!`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Ya, hapus!',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                fetch(deleteUrl, {
                                        method: 'DELETE',
                                        headers: {
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        }
                                    }).then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            Swal.fire('Terhapus!', data.message,
                                                    'success')
                                                .then(() => location.reload());
                                        } else {
                                            Swal.fire('Gagal!', data.message, 'error');
                                        }
                                    }).catch(error => {
                                        Swal.fire('Gagal!', 'Terjadi kesalahan server.',
                                            'error');
                                    });
                            }
                        });
                    });
                });
            }

            handleDelete('.swal-delete-btn', 'Populasi Ayam');
            handleDelete('.swal-delete-harian', 'Harian Ayam');

        });
    </script>
    <script>
        window.monthlyData = @json($monthlyData);
        window.todayData = @json($todayData);
    </script>

</body>

</html>
