@extends('layouts.app')
@section('content')
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>
<style>
    .multiselect-dropdown {
        height: fit-content;
    }
    [type=checkbox]+label:before, [type=checkbox]:not(.filled-in)+label:after{
        left: -4px;
    }
    </style>

	<div id="petaktebangView"></div>	
	<div id="petaktebangGrid">
		<div class="card">
			<div class="card-body">
                
            <div class="toolbar-nav">
			<div class="row ">
				<div class="col-md-6">
					<div class="input-group text-left">
                            <select id="filter-tahun" class="form-control form-control-sm">
                                    <option value="{{ date('Y') }}">{{ date('Y') }}</option>
                                    <option value="{{ date('Y') - 1 }}">{{ date('Y') - 1 }}</option>                                
                            </select>
                            <select id="filter-kebun" class="form-control form-control-sm"></select>
                            <select id="filter-pembuat" class="form-control form-control-sm">
                                <option value="">Pilih Pembuat</option>
                                @foreach($pembuat as $p)
                                    <option value="{{ $p->name }}">{{ $p->name }}</option>
                                @endforeach
                            </select>
                            <select id="filter-subbagian" class="form-control form-control-sm">
                                <option value="">Pilih Subbagian</option>
                                <option value="TMA & Mekanisasi">TMA & Mekanisasi</option>
                                <option value="Sarana Produksi & Pemetaan">Sarana Produksi & Pemetaan</option>
                                <option value="Budidaya & Pembenihan">Budidaya & Pembenihan</option>
                            </select>
                            <input type="text" class="form-control form-control-sm" id="filter-nopr" name="filter-nopr" placeholder="Cari No PR">
                            <input type="text" class="form-control form-control-sm" id="filter-nopk" name="filter-nopk" placeholder="Cari No PK">
                            <input type="text" class="form-control form-control-sm" id="filter-PP" name="filter-PP" placeholder="Cari PP">
                          
                            
                            
						</div>  
					    
				</div>
				<div class="col-md-6 "> 
                    <div class="input-group ">	
                        
                        <label class="mr-2 mt-2">PK:</label>
                        <select id="filter-status-pk" multiple  multiselect-select-all="true" class="form-control form-control-sm" title="Pilih Status PK">                            
                            <option value="assign">Assign</option>
                            <option value="canceled">Canceled</option>
                            <option value="draft">Draft</option>
                            <option value="harga">Harga</option>
                            <option value="pengadaan">Pengadaan</option>
                            <option value="reject">Reject</option>
                            <option value="submit">Submit</option>
                        </select>
                            <label class="mr-2 mt-2">PP:</label>
                        <select id="filter-status-pp" multiple  multiselect-select-all="true" class="form-control form-control-sm" title="Pilih Status PP">
                            <option value="canceled">Canceled</option>
                            <option value="canceled_hps">Canceled HPS</option>
                            <option value="canceled_teknis">Canceled Teknis</option>
                            <option value="draft">Draft</option>
                            <option value="finish">Finish</option>
                            <option value="laksanakan">Laksanakan</option>
                            <option value="retender">Retender</option>
                        </select>
                        
                            <label class="mr-2 mt-2">SPPBJ:</label>
                        <select id="filter-status-sppbj" multiple  multiselect-select-all="true" class="form-control form-control-sm" title="Pilih Status SPPBJ">
                            <option value="approved">Approved</option>
                            <option value="cancel">Cancel</option>
                            <option value="proposed">Proposed</option>
                            <option value="rejected">Rejected</option>
                        </select>
                          <button type="button" id="btn-search" class="btn btn-sm btn-primary"><i class="fa fa-search"></i></button>
                        <button type="button" id="exportexcel" class="btn btn-sm btn-success"><i class="fa fa-file-excel"></i> Download Excel</button>
                        </div>
						
				</div>
				    
			</div>					
			<!-- End Toolbar Top -->
		</div>	
		
			<div class="table-responsive" id="pjax-container">			
                <div class="text-center py-5">
                    <i class="fa fa-inbox fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Data Masih Kosong</h5>
                </div>
			</div>	 
		</div>			
	</div>	
	</div>
	
</div>

<script src="{{ asset('assets/js/multiselect-dropdown.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script type="text/javascript">
    $("#filter-kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=data_kebun:plant:nama') !!}",
            {  initial_text : 'Pilih Unit'});

    $('#exportexcel').on('click', function () {
        var table = document.getElementById('rekap-table');

        if (!table) {
            alert('Table tidak ditemukan!');
            return;
        }

        // Clone table agar tampilan asli tidak berubah
        var clone = table.cloneNode(true);

        // Ubah input/select/textarea/checkbox jadi teks agar terbaca saat export
        $(clone).find('td, th').each(function () {
            var $cell = $(this);
            console.log('Processing cell:', $cell.text());

            // Checkbox / radio
            $cell.find('input[type="checkbox"], input[type="radio"]').each(function () {
                var val = this.checked ? '✔' : '';
                $(this).replaceWith(document.createTextNode(val));
            });

            // Input text/number/date, dll
            $cell.find('input:not([type="checkbox"]):not([type="radio"])').each(function () {
                $(this).replaceWith(document.createTextNode($(this).val() || ''));
            });


            // Select
            $cell.find('select').each(function () {
                var txt = $(this).find('option:selected').text() || '';
                $(this).replaceWith(document.createTextNode(txt));
            });

            // Textarea
            $cell.find('textarea').each(function () {
                $(this).replaceWith(document.createTextNode($(this).val() || ''));
            });
        });

        var wb = XLSX.utils.table_to_book(clone, { sheet: "Rekap Pengadaan" });
        XLSX.writeFile(wb, 'Rekap_Pengadaan.xlsx');
    });
</script>
<script type="text/javascript">
 
        loadData();

        function loadData() {

            if ($('#filter-status-pk').val() && $('#filter-status-pk').val()[0] !== null) {
                $.ajax({
                    url: "{{ url('ipspengadaan/getDataPengadaan') }}",
                    type: "GET",
                    data: {
                        tahun: $('#filter-tahun').val(),
                        kebun: $('#filter-kebun').val(),
                        pembuat: $('#filter-pembuat').val(),
                        subbagian: $('#filter-subbagian').val(),
                        nopr: $('#filter-nopr').val(),
                        nopk: $('#filter-nopk').val(),
                        pp: $('#filter-PP').val(),
                        status_pp: $('#filter-status-pp').val(),
                        status_pk: $('#filter-status-pk').val(),
                        status_sppbj: $('#filter-status-sppbj').val(),
                    },
                    beforeSend: function() {
                        $('#pjax-container').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
                    },
                    success: function(response) {
                        $('#pjax-container').html(response);
                    },
                    error: function(xhr, status, error) {
                        $('#pjax-container').html('<div class="alert alert-danger">Error loading data: ' + error + '</div>');
                    }
                });
            }
        }

        $('#btn-search').on('click', function() {
            loadData();
        });

        // loadData();
</script>


@endsection