@extends('layouts.app')

@section('content')

<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>


	<div id="upahtebangtmaView"></div>	
	<div id="upahtebangtmaGrid">
		<div class="card">
			<div class="card-body">
                <div class="toolbar-nav">
                    <div class="row ">
                        <div class="col-md-4 ">
                            <div class="input-group text-left">
                                
                                <input type="text" class="form-control form-control-sm dosearch" data-target="{{ url($pageModule) }}" data-div="{{ $pageModule }}" aria-label="..." placeholder="search">
                                <input type="date" class="form-control form-control-sm" id="tgl_awal" name="tgl_awal" onchange="filterData()">
                                <input type="date" class="form-control form-control-sm" id="tgl_akhir" name="tgl_akhir" onchange="filterData()">

                                <button id="filterBtn" class="btn btn-sm btn-success" onclick="filterData()">Filter</button>
                                <button id="printBtn" class="btn btn-sm btn-primary" onclick="printReport()">Print</button>
                                <button id="downloadBtn" class="btn btn-sm btn-info" onclick="downloadExcel()">Download Excel</button>
                                
                            </div>
                            <div class="col-md-8 text-right">
                        
                            </div>    
                        </div>                   
                    </div>
                </div>        

			<div class="table-responsive" id="rekapkebunTableContainer">			
                
				
			</div>
            <div id="rekapkebunLoading" class="mt-2 text-muted" style="display:none;">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                Memuat data...
            </div>	 
		</div>			
	</div>	
	</div>
	
</div>

<script>
    function setLoadingState(isLoading, buttonId = null) {
        const buttons = $('#filterBtn, #printBtn, #downloadBtn');
        buttons.prop('disabled', isLoading);

        if (buttonId) {
            const $button = $('#' + buttonId);
            const originalText = $button.data('original-text') || $button.text();
            $button.data('original-text', originalText);
            $button.text(isLoading ? 'Loading...' : originalText);
        }

        $('#rekapkebunLoading').toggle(isLoading);
    }

    function downloadExcel() {
        setLoadingState(true, 'downloadBtn');

        try {
            const table = document.getElementById("table-rekapitulasi").outerHTML;
            const filename = "rekapitulasi_upah_tma.xls";
const html = [
                        '<html xmlns:o="urn:schemas-microsoft-com:office:office" ',
                        'xmlns:x="urn:schemas-microsoft-com:office:excel" ',
                        'xmlns="http://www.w3.org/TR/REC-html40">',
                        '<head>',
                        '<!--[if gte mso 9]>',
                        '<xml>',
                        '<' + 'x:ExcelWorkbook>',
                        '<' + 'x:ExcelWorksheets>',
                        '<' + 'x:ExcelWorksheet>',
                        '<' + 'x:Name>Sheet1</' + 'x:Name>',
                        '<' + 'x:WorksheetOptions>',
                        '<' + 'x:DisplayGridlines/>',
                        '</' + 'x:WorksheetOptions>',
                        '</' + 'x:ExcelWorksheet>',
                        '</' + 'x:ExcelWorksheets>',
                        '</' + 'x:ExcelWorkbook>',
                        '</xml>',
                        '<![endif]-->',
                        '</head>',
                        '<body>' + table + '</body>',
                        '</html>'
                    ].join('');

            const blob = new Blob([html], { type: "application/vnd.ms-excel" });
            const url = URL.createObjectURL(blob);

            const a = document.createElement("a");
            a.href = url;
            a.download = filename;
            a.click();

            URL.revokeObjectURL(url);
        } finally {
            setTimeout(() => setLoadingState(false), 800);
        }
    }

    function filterData() {
        setLoadingState(true);

        var tgl_awal = $('#tgl_awal').val();
        var tgl_akhir = $('#tgl_akhir').val();

        $.ajax({
            url: '{{ url("upahtebangtma/rekapitulasiPerKebunKategori") }}',
            type: 'GET',
            data: {
                tgl_awal: tgl_awal,
                tgl_akhir: tgl_akhir
            },
            success: function(data) {
                $('#rekapkebunTableContainer').html(data);
            },
            error: function() {
                alert('Error retrieving data.');
            },
            complete: function() {
                setLoadingState(false);
            }
        });
    }

    function printReport() {
        setLoadingState(true, 'printBtn');

        var tgl_awal = $('#tgl_awal').val();
        var tgl_akhir = $('#tgl_akhir').val();
        var jenis_tebang = $('#jenis_tebang').val();

        var url = '{{ url("upahtebangtma/rekapitulasiPerKebunKategori") }}' + '?tgl_awal=' + tgl_awal + '&tgl_akhir=' + tgl_akhir + '&print=1';
        window.open(url, '_blank');

        setTimeout(() => setLoadingState(false), 800);
    }

    filterData(); // Load data on page load
</script>


@endsection