@extends('admin._layouts.index')

@push('APPS')
    here show
@endpush

@push($title)
    active
@endpush

@section('content')
    <!--begin::Toolbar-->
    @component('admin._card.breadcrumb')
        @slot('header')
            {{ $title }}
        @endslot
        @slot('page')
            Data
        @endslot
    @endcomponent
    <!--end::Toolbar-->

    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxl">
            <!--begin::Products-->
            <div class="card card-flush">

                <!--begin::Card header-->
                <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                    <!--begin::Card title-->
                    <div class="card-title">
                        Laporan Pemeliharaan
                        <div class="mw-100px me-3">

                        </div>
                    </div>
                    <!--end::Card title-->

                    <!--begin::Card toolbar-->
                    <div class="card-toolbar flex-row-fluid justify-content-end gap-5">

                        <div class="position-relative align-items-center">
                            <select class="form-select" data-control="select2" data-hide-search="true"
                                data-placeholder="Pilih lokasi" name="lokasi" id="lokasi">
                                <option value="All">Pilih Semua</option>
                                @foreach (Helper::getData('lokasi') as $v)
                                    <option {{ isset($data->id_lokasi) && $data->id_lokasi == $v->id ? 'selected' : '' }}
                                        value="{{ $v->id }}">{{ $v->nama_lokasi }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="md-col-3">
                            <select class="form-select" data-control="select2" data-hide-search="true"
                                data-placeholder="Pilih Jenis Laporan" name="pilihan" id="pilihan">
                                <option value="">Pilih Jenis Laporan</option>
                                <option value="1">Per Bulan</option>
                                <option value="2">Per Tanggal</option>
                            </select>
                        </div>


                        <div class="position-relative align-items-center" id="perTanggal" style="display: none;">

                            <!--begin::Icon-->
                            <i class="ki-duotone ki-calendar-8 fs-2 position-absolute mx-4 mt-3">
                                <span class="path1"></span><span class="path2"></span>
                                <span class="path3"></span><span class="path4"></span>
                                <span class="path5"></span><span class="path6"></span>
                            </i>
                            <!--end::Icon-->
                            <!--begin::Datepicker-->
                            <input class="form-control ps-12 flatpickr-input active" placeholder="Select a date"
                                name="tanggal" id="tanggal" type="text" value="">
                            <!--end::Datepicker-->
                        </div>

                        <div class="position-relative align-items-center" id="perBulan" style="display: none;">
                            <select class="form-select" data-control="select2" data-hide-search="true"
                                data-placeholder="Pilih Bulan" name="bulan" id="bulan">
                                <option value="">Pilih Bulan</option>
                                <option value="1">Januari</option>
                                <option value="2">Februari</option>
                                <option value="3">Maret</option>
                                <option value="4">April</option>
                                <option value="5">Mei</option>
                                <option value="6">Juni</option>
                                <option value="7">Juli</option>
                                <option value="8">Agustus</option>
                                <option value="9">September</option>
                                <option value="10">Oktober</option>
                                <option value="11">November</option>
                                <option value="12">Desember</option>
                            </select>
                        </div>

                        <button id="button_search" class="btn btn-secondary">
                            <span class="btn-label">
                                <i class="fa fa-search"></i>
                            </span>
                        </button>

                        <button id="button_refresh" class="btn btn-secondary">
                            <span class="btn-label">
                                <i class="fa fa-sync"></i>
                            </span>
                        </button>

                        <button id="button_export" class="btn btn-info">
                            <span class="btn-label">
                                <i class="fa fa-file-pdf"></i>
                            </span>
                        </button>
                    </div>
                    {{-- </div> --}}
                    <!--end::Card toolbar-->
                </div>


                <!--end::Card header-->

                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_ecommerce_products_table">
                        <thead>
                            <tr class="text-start text-gray-600 fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-20px pe-2"> No </th>
                                @if (auth()->user()->id_role != 3)
                                    <th width="*"> Nama Petugas </th>
                                @endif
                                <th width="*"> Item Mutasi </th>
                                <th width="8%"> Jumlah </th>
                                <th width="12%"> Tanggal </th>
                                <th width="12%"> Lokasi </th>
                                <th width="8%"> Status</th>
                            </tr>
                        </thead>

                        <tbody class="fw-semibold text-gray-600 datatables">
                        </tbody>

                    </table>
                    <!--end::Table-->

                    <!--begin::Pagination-->
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div class="d-flex flex-wrap py-2 mr-3">
                            <div class="text-center pagination">
                                <div id="contentPage"></div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center py-3">
                            <ul class="pagination twbs-pagination">
                            </ul>
                        </div>
                    </div>
                    <!--end::Pagination-->

                </div>

                <!--end::Card body-->
            </div>
            <!--end::Products-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->
@endsection

@push('jsScript')
    <script type="text/javascript">
        $(document).ready(function() {

            // Initially hide both input sections
            $('#perTanggal').hide();
            $('#perBulan').hide();

            // Listen for changes on the "Pilih Jenis Laporan" dropdown
            $('#pilihan').on('change', function() {
                var selectedValue = $(this).val();
                // Hide both first
                $('#perTanggal').hide();
                $('#perBulan').hide();

                // Show the appropriate input based on the selection
                if (selectedValue === '1') { // Per Bulan
                    $('#perBulan').show();
                } else if (selectedValue === '2') { // Per Tanggal
                    $('#perTanggal').show();
                }
            })


            loadpage(100, '', '');
            var $pagination = $('.twbs-pagination');
            var defaultOpts = {
                totalPages: 1,
                prev: '&#8672;',
                next: '&#8674;',
                first: '&#8676;',
                last: '&#8677;',
            };
            $pagination.twbsPagination(defaultOpts);

            function loaddata(page, per_page, search, lokasi) {
                $.ajax({
                    url: '{{ route($title . '.data') }}',
                    data: {
                        "page": page,
                        "per_page": per_page,
                        "search": search,
                        "lokasi": lokasi,
                    },
                    type: "GET",
                    datatype: "json",
                    success: function(data) {
                        $(".datatables").html(data.html);
                    }
                });
            }

            function loadpage(per_page, search, lokasi) {
                $.ajax({
                    url: '{{ route($title . '.data') }}',
                    data: {
                        "per_page": per_page,
                        "search": search,
                        "lokasi": lokasi,
                    },
                    type: "GET",
                    datatype: "json",
                    success: function(response) {
                        if ($pagination.data("twbs-pagination")) {
                            $pagination.twbsPagination('destroy');
                            $(".datatables").html('<tr><td colspan="4">Data not found</td></tr>');
                        }
                        $pagination.twbsPagination($.extend({}, defaultOpts, {
                            startPage: 1,
                            totalPages: response.total_page,
                            visiblePages: 8,
                            prev: '&#8672;',
                            next: '&#8674;',
                            first: '&#8676;',
                            last: '&#8677;',
                            onPageClick: function(event, page) {
                                if (page == 1) {
                                    var to = 1;
                                } else {
                                    var to = page * per_page - (per_page - 1);
                                }
                                if (page == response.total_page) {
                                    var end = response.total_data;
                                } else {
                                    var end = page * per_page;
                                }
                                $('#contentPage').text('Showing ' + to + ' to ' + end +
                                    ' of ' +
                                    response.total_data + ' entries');
                                loaddata(page, per_page, search, lokasi);
                            }
                        }));
                    }
                });
            }

            $("#button_search, #perPage").on('click change', function(event) {
                let pilihan = $('#pilihan').val();
                let lokasi = $('#lokasi').val();
                let search = '';

                if (lokasi == 'All') {
                    lokasi = '';
                }

                if (pilihan == '1') {
                    search = $('#bulan').val();
                } else {
                    search = $('#tanggal').val();
                }
                let per_page = $('#perPage').val() ?? 100;
                loadpage(per_page, search, lokasi);
            });

            $("#button_refresh").on('click', function(event) {
                $('#input_search').val('');
                loadpage(100, '', '');
            });


            $("#button_export").on('click', function(event) {
                let pilihan = $('#pilihan').val();
                let lokasi = $('#lokasi').val();
                let search = '';

                if (lokasi == 'All') {
                    lokasi = '';
                }

                if (pilihan == '1') {
                    search = $('#bulan').val();
                } else {
                    search = $('#tanggal').val();
                }
                exportPDF(pilihan, search, lokasi);
            });

            function exportPDF(pilihan, search, lokasi) { // Added jenisLaporan and bulan as parameters
                console.log('pdf--->');

                let url = '{{ route($title . '.export') }}';
                let params = new URLSearchParams();

                // Add search parameter if it exists
                if (search) {
                    params.append('search', search);
                }

                // Add jenis_laporan and bulan if they exist (based on your previous HTML)
                if (pilihan) {
                    params.append('pilihan', pilihan);
                }

                // Add jenis_laporan and bulan if they exist (based on your previous HTML)
                if (lokasi) {
                    params.append('lokasi', lokasi);
                }

                // Build the full URL with parameters
                const fullUrl = url + '?' + params.toString();

                // Directly navigate to the URL to trigger download
                window.location.href = fullUrl;

            }

            $("#tanggal").flatpickr();


        });
    </script>
@endpush