@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('styles')
    <style>
        .summary-card {
            border-left: 4px solid;
        }
        .summary-card.documents { border-left-color: #5e72e4; }
        .summary-card.bags { border-left-color: #fb6340; }
        .summary-card.weight { border-left-color: #11cdef; }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .container-fluid {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            .card-header h6 {
                font-size: 0.9rem;
            }

            .btn {
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
            }

            .form-control, .form-select {
                font-size: 16px !important;
            }

            .table th, .table td {
                padding: 0.5rem 0.35rem;
                font-size: 0.75rem;
            }

            .badge {
                font-size: 0.65rem;
                padding: 0.3em 0.45em;
            }
        }

        @media (max-width: 576px) {
            .card-body {
                padding: 0.75rem;
            }

            .summary-card .card-body {
                padding: 1rem;
            }

            .summary-card h5 {
                font-size: 1.25rem;
            }
        }
        .summary-card .icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 !important;
            line-height: 1 !important;
        }
        .summary-card .icon i {
            font-size: 16px;
            display: block;
            line-height: 1;
            margin: 0;
            position: static !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
        }
        .export-buttons {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .filter-actions {
            display: flex;
            gap: .35rem;
            justify-content: flex-end;
            flex-wrap: nowrap;
        }
        @media (max-width: 768px) {
            .filter-actions {
                flex-wrap: wrap;
            }
        }
        .filter-actions .btn {
            padding: .25rem .5rem;
            font-size: .75rem;
            line-height: 1.2;
            border-radius: .5rem;
            height: 32px;
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
        }
        .filter-actions .btn i {
            font-size: .75rem;
        }
        .filter-actions {
            margin-left: .75rem;
            padding-left: .25rem;
        }
        .filter-actions .btn:first-child {
            min-width: 104px;
            padding: .2rem .5rem;
            font-size: .7rem;
            height: 30px;
        }
        .filter-actions .btn:first-child i {
            font-size: .7rem;
        }
        @media (max-width: 768px) {
            .filter-actions .btn {
                flex: 1 1 100%;
            }
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Report Pengeluaran'])

    <div class="container-fluid py-4">
        {{-- Summary Cards --}}
        <div class="row mb-4">
            <div class="col-xl-4 col-md-6 mb-3">
                <div class="card summary-card documents shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="text-sm text-muted mb-0">Total Dokumen</p>
                                <h5 class="font-weight-bolder mb-0">{{ number_format($summary['total_documents']) }}</h5>
                            </div>
                            <div class="icon icon-shape bg-primary shadow text-center rounded-circle">
                                <i class="fas fa-file-alt text-white opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-6 mb-3">
                <div class="card summary-card bags shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="text-sm text-muted mb-0">Total Bag Keluar</p>
                                <h5 class="font-weight-bolder mb-0">{{ number_format($summary['total_bags']) }}</h5>
                            </div>
                            <div class="icon icon-shape bg-warning shadow text-center rounded-circle">
                                <i class="fas fa-boxes text-white opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-6 mb-3">
                <div class="card summary-card weight shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="text-sm text-muted mb-0">Total Berat Keluar</p>
                                <h5 class="font-weight-bolder mb-0">{{ number_format($summary['total_weight'], 2) }} kg</h5>
                            </div>
                            <div class="icon icon-shape bg-info shadow text-center rounded-circle">
                                <i class="fas fa-weight text-white opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filter Card --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">
                            <i class="fas fa-filter me-2"></i>
                            Filter Report
                        </h6>
                    </div>
                    <div class="card-body">
                        <form method="GET" action="{{ route('rptout.index') }}">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-2 col-6">
                                    <label class="form-label text-xs text-uppercase text-muted">Tanggal Dari</label>
                                    <input type="date" name="date_from" class="form-control form-control-sm"
                                        value="{{ $filters['date_from'] }}">
                                </div>
                                <div class="col-md-2 col-6">
                                    <label class="form-label text-xs text-uppercase text-muted">Tanggal Sampai</label>
                                    <input type="date" name="date_to" class="form-control form-control-sm"
                                        value="{{ $filters['date_to'] }}">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label text-xs text-uppercase text-muted">Tipe Pengeluaran</label>
                                    <select name="out_type_id" class="form-select form-select-sm">
                                        <option value="">Semua</option>
                                        @foreach ($out_types as $type)
                                            <option value="{{ $type->out_type_id }}"
                                                {{ $filters['out_type_id'] == $type->out_type_id ? 'selected' : '' }}>
                                                {{ $type->out_type_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label text-xs text-uppercase text-muted">Vendor</label>
                                    <select name="vendor_id" class="form-select form-select-sm">
                                        <option value="">Semua</option>
                                        @foreach ($vendors as $vendor)
                                            <option value="{{ $vendor->vendor_id }}"
                                                {{ $filters['vendor_id'] == $vendor->vendor_id ? 'selected' : '' }}>
                                                {{ $vendor->vendor_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label text-xs text-uppercase text-muted">Pencarian</label>
                                    <input type="text" name="search" class="form-control form-control-sm"
                                        placeholder="No Dokumen..." value="{{ $filters['search'] }}">
                                </div>
                                <div class="col-md-2 col-12 text-end">
                                    <div class="filter-actions">
                                        <button type="submit" class="btn btn-info btn-sm mb-0">
                                            <i class="fas fa-search me-1"></i> Filter
                                        </button>
                                        <a href="{{ route('rptout.index') }}" class="btn btn-outline-secondary btn-sm mb-0">
                                            <i class="fas fa-redo"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Data Table --}}
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fas fa-list me-2"></i>
                                Data Pengeluaran
                            </h6>
                        </div>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="export-buttons px-3 py-2">
                            @if($authorize->excel == '1')
                            <button class="btn btn-secondary btn-sm mb-0" onclick="exportTableToExcel()">
                                <i class="fas fa-file-excel me-1 text-success"></i>
                                <span class="font-weight-bold">Excel</span>
                            </button>
                            @endif
                            @if($authorize->pdf == '1')
                            <button class="btn btn-secondary btn-sm mb-0" onclick="exportTableToPDF()">
                                <i class="fas fa-file-pdf me-1 text-danger"></i>
                                <span class="font-weight-bold">PDF</span>
                            </button>
                            @endif
                        </div>
                        <div class="table-responsive px-4 py-2">
                            <table class="table display" id="list_rptout">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th width="110">Action</th>
                                        <th>No</th>
                                        <th>Tanggal</th>
                                        <th>No. Dokumen</th>
                                        <th>Tipe Pengeluaran</th>
                                        <th>Vendor</th>
                                        <th>Total Bag</th>
                                        <th>Total Berat (kg)</th>
                                        <th>Catatan</th>
                                        <th>User</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($data as $index => $item)
                                        <tr>
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                        title="View Data"
                                                        onclick="window.location='{{ route('trsout.show', $item->out_doc_id) }}'">
                                                        <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li>
                                                            <a class="dropdown-item" href="{{ route('trsout.print', $item->out_doc_id) }}" target="_blank">
                                                                <i class="fas fa-print me-2"></i> Cetak
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ \Carbon\Carbon::parse($item->out_date)->format('d/m/Y') }}</td>
                                            <td>{{ $item->out_doc_no }}</td>
                                            <td>{{ $item->out_type_name ?? $item->out_type_id }}</td>
                                            <td>{{ $item->vendor_name ?? '-' }}</td>
                                            <td>{{ number_format($item->total_bags) }}</td>
                                            <td>{{ number_format($item->total_berat ?? 0, 2) }}</td>
                                            <td>{{ Str::limit($item->remarks, 30) ?? '-' }}</td>
                                            <td>{{ $item->user_create }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if($data->isEmpty())
                            <div class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-3x mb-3"></i>
                                <p class="mb-0">Tidak ada data pengeluaran</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            @if($data->isNotEmpty())
            if ($.fn.DataTable.isDataTable('#list_rptout')) {
                $('#list_rptout').DataTable().destroy();
            }

            $('#list_rptout').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                order: [[2, 'desc']]
            });
            @endif
        });

        // Export to Excel function
        function exportTableToExcel() {
            var table = document.getElementById('list_rptout');
            var wb = XLSX.utils.table_to_book(table, {sheet: "Report Pengeluaran"});
            XLSX.writeFile(wb, 'Report_Pengeluaran_{{ $filters["date_from"] }}_{{ $filters["date_to"] }}.xlsx');
        }

        // Export to PDF function
        function exportTableToPDF() {
            var { jsPDF } = window.jspdf;
            var doc = new jsPDF('l', 'pt', 'a4');

            doc.autoTable({
                html: '#list_rptout',
                startY: 60,
                theme: 'grid',
                headStyles: { fillColor: [0, 183, 189] },
                styles: { fontSize: 8 },
                didDrawPage: function(data) {
                    doc.setFontSize(14);
                    doc.text('Report Pengeluaran - {{ $filters["date_from"] }} s/d {{ $filters["date_to"] }}', 40, 40);
                }
            });

            doc.save('Report_Pengeluaran_{{ $filters["date_from"] }}_{{ $filters["date_to"] }}.pdf');
        }
    </script>
@endpush