<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <?php $__env->startSection('title', 'Laporan Transaksi Sparepart'); ?>
     <?php $__env->slot('header', null, []); ?> 
        <h2 class="font-semibold text-xl text-gray-800 leading-tight d-print-none">
            <?php echo e(__('Laporan Transaksi Sparepart')); ?>

        </h2>
     <?php $__env->endSlot(); ?>

    <!-- Custom Print Styles -->
    <style>
        /* DataTables Custom Styling for Tailwind */
        .dataTables_wrapper .dataTables_length select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
            border-radius: 0.5rem;
            border-color: #d1d5db;
        }
        .dataTables_wrapper .dataTables_filter input {
            border-radius: 0.5rem;
            border-color: #d1d5db;
            padding-left: 0.75rem;
            margin-left: 0.5rem;
        }

        @media print {
            body * {
                visibility: hidden;
            }
            #printableArea, #printableArea * {
                visibility: visible;
            }
            #printableArea {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter,
            .dataTables_wrapper .dataTables_info,
            .dataTables_wrapper .dataTables_paginate,
            .d-print-none,
            .no-print {
                display: none !important;
            }
            table.dataTable {
                width: 100% !important;
                border-collapse: collapse !important;
            }
            table.dataTable thead th {
                 background-color: #f3f4f6 !important;
                 border-bottom: 2px solid #000 !important;
                 color: #000 !important;
            }
            table.dataTable td {
                border-bottom: 1px solid #ddd !important;
            }
            /* Colors for badges in print */
            .text-green-800 { color: #166534 !important; }
            .bg-green-100 { background-color: #dcfce7 !important; }
            .text-red-800 { color: #991b1b !important; }
            .bg-red-100 { background-color: #fee2e2 !important; }
        }
    </style>

    <!-- DataTables CSS -->
    <link href="<?php echo e(asset('assets/css/jquery.dataTables.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/responsive.dataTables.min.css')); ?>" rel="stylesheet">

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <!-- Filters -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6 no-print">
                <div class="p-6 text-gray-900">
                    <div class="flex items-center justify-between mb-4 cursor-pointer" id="toggleFilterHeader">
                        <h3 class="text-lg font-semibold text-gray-800 flex items-center gap-2">
                            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path></svg>
                            Filter Laporan
                        </h3>
                        <button type="button" class="text-gray-500 hover:text-gray-700 transition">
                            <svg id="filterChevron" class="w-5 h-5 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                    <form action="<?php echo e(route('reports.sparepart_transactions')); ?>" method="GET" id="filterForm" class="hidden">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
                            <!-- Start Date -->
                            <div class="w-full">
                                <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Mulai</label>
                                <input type="date" name="start_date" id="start_date" value="<?php echo e($startDate); ?>" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                            </div>

                            <!-- End Date -->
                            <div class="w-full">
                                <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Akhir</label>
                                <input type="date" name="end_date" id="end_date" value="<?php echo e($endDate); ?>" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                            </div>

                            <!-- Type -->
                            <div class="w-full">
                                <label for="type" class="block text-sm font-medium text-gray-700 mb-1">Jenis</label>
                                <select name="type" id="type" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                    <option value="all" <?php echo e($type == 'all' ? 'selected' : ''); ?>>Semua</option>
                                    <option value="in" <?php echo e($type == 'in' ? 'selected' : ''); ?>>Masuk</option>
                                    <option value="out" <?php echo e($type == 'out' ? 'selected' : ''); ?>>Keluar</option>
                                </select>
                            </div>

                            <!-- Filter Button -->
                            <div class="w-full">
                                <button type="submit" class="w-full mt-2 bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-lg shadow transition duration-150 ease-in-out">
                                    Terapkan Filter
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Report Table -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg" id="printableArea">
                <div class="p-6 text-gray-900">

                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4 border-b pb-6">
                        <div>
                            <h3 class="text-3xl font-bold text-gray-800">Laporan Transaksi Sparepart</h3>
                            <p class="text-gray-500 mt-1 flex items-center gap-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                <?php if($startDate && $endDate): ?>
                                    Periode: <span class="font-semibold text-gray-800"><?php echo e(\Carbon\Carbon::parse($startDate)->format('d M Y')); ?></span> - <span class="font-semibold text-gray-800"><?php echo e(\Carbon\Carbon::parse($endDate)->format('d M Y')); ?></span>
                                <?php else: ?>
                                    Menampilkan <span class="font-semibold text-gray-800">Semua Data</span>
                                <?php endif; ?>
                            </p>
                        </div>
                        <button onclick="window.print()" style="background-color: #1f2937; color: white; border-radius: 8px;" class="no-print inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                            Cetak Laporan
                        </button>
                    </div>

                    <div class="rounded-lg border border-gray-100 p-2">
                        <table class="display nowrap" id="reportTable" width="100%">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider border-b">No</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider border-b">Tanggal</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider border-b">Sparepart</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase tracking-wider border-b">Jenis</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-gray-500 uppercase tracking-wider border-b">Jumlah</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider border-b">Penerima (Karyawan)</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider border-b">User</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider border-b">Catatan</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <?php $__empty_1 = true; $__currentLoopData = $transactions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $trx): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr class="hover:bg-gray-50 transition duration-150">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b text-center"><?php echo e($index + 1); ?></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b">
                                        <?php echo e(\Carbon\Carbon::parse($trx->date)->format('d/m/Y')); ?>

                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b">
                                        <?php if($trx->sparepart): ?>
                                            <div class="font-medium text-gray-900"><?php echo e($trx->sparepart->name); ?></div>
                                            <div class="text-xs text-gray-500"><?php echo e($trx->sparepart->code); ?></div>
                                        <?php else: ?>
                                            <span class="text-red-500 italic">Terhapus</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center border-b">
                                        <?php if($trx->type == 'in'): ?>
                                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded" style="background-color: #22c55e; color: white;">
                                                Masuk
                                            </span>
                                        <?php else: ?>
                                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded" style="background-color: #ef4444; color: white;">
                                                Keluar
                                            </span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b text-right font-mono">
                                        <?php echo e($trx->quantity); ?>

                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b">
                                        <?php echo e($trx->employee ? $trx->employee->name : '-'); ?>

                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b">
                                        <?php echo e($trx->user ? $trx->user->name : '-'); ?>

                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500 border-b max-w-xs truncate">
                                        <?php echo e($trx->note); ?>

                                    </td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <!-- Empty state handled by DataTable usually, but if client side rendering empty table -->
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="<?php echo e(asset('assets/js/jquery.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/jquery.dataTables.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/dataTables.responsive.min.js')); ?>"></script>

    <script>
        $(document).ready(function() {
            $('#reportTable').DataTable({
                responsive: true,
                paging: true,
                searching: true,
                info: true,
                ordering: true,
                language: {
                    "sEmptyTable":   "Tidak ada data yang tersedia pada tabel ini",
                    "sProcessing":   "Sedang memproses...",
                    "sLengthMenu":   "Tampilkan _MENU_ entri",
                    "sZeroRecords":  "Tidak ditemukan data yang sesuai",
                    "sInfo":         "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                    "sInfoEmpty":    "Menampilkan 0 sampai 0 dari 0 entri",
                    "sInfoFiltered": "(disaring dari _MAX_ entri keseluruhan)",
                    "sInfoPostFix":  "",
                    "sSearch":       "Cari:",
                    "sUrl":          "",
                    "oPaginate": {
                        "sFirst":    "Pertama",
                        "sPrevious": "Sebelumnya",
                        "sNext":     "Selanjutnya",
                        "sLast":     "Terakhir"
                    }
                }
            });

             // Customize DataTables Search Input
            $('.dataTables_filter input').addClass('border-gray-300 rounded-lg focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-4 py-2 text-sm shadow-sm');
            $('.dataTables_length select').addClass('border-gray-300 rounded-lg focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 text-sm shadow-sm');

            // Toggle Filter Section
            $('#toggleFilterHeader').click(function() {
                $('#filterForm').toggleClass('hidden');
                $('#filterChevron').toggleClass('rotate-180');
            });
        });
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\laragon\www\lending\resources\views/reports/sparepart_transactions.blade.php ENDPATH**/ ?>