@extends('layouts.master')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>List of Submitted Forms</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Submitted Forms</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Submitted Forms</h3>
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <input type="text" name="search" id="search" class="form-control" placeholder="Search...">
                    </div>
                    <div class="col-md-3">
                        <input type="datetime-local" id="minDate" name="min" class="form-control" placeholder="Minimum Date">
                    </div>
                    <div class="col-md-3">
                        <input type="datetime-local" id="maxDate" name="max" class="form-control" placeholder="Maximum Date">
                    </div>
                    <div class="col-md-3 d-flex justify-content-end">
                        <button id="downloadBtn" onclick="handleDownload()" class="btn btn-secondary mx-1">Download PDF</button>
                        <button id="ExcelBtn" onclick="handleExportExcel()" class="btn btn-secondary mx-1">Export Excel</button>
                    </div>
                </div>

                <table id="dataDatatable" class="table table-bordered table-hover w-100" data-url="{{ route('admin.report-get-data') }}">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>ID Farm Section</th>
                            <th>Created By</th>
                            <th>Masalah Tanah Substrat</th>
                            <th>Kaedah Pemulihan Rawatan</th>
                            <th>Nama Bahan Peralatan</th>
                            <th>Kuantiti Bahan Rawatan</th>
                            <th>Tempoh Dilarang Menanam</th>
                            <th>Blok Lokasi</th>
                            <th>Nama Operator</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        datatableData();
    });

    function datatableData() {
        $('#dataDatatable').DataTable({
            searching: false,
            paging: true,
            info: true,
            ordering: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: $('#dataDatatable').data('url'),
                type: 'GET',
                data: function(d) {
                    d.search = $('#search').val();
                    d.min = $('#minDate').val();
                    d.max = $('#maxDate').val();
                },
            },
            columns: [
                { data: 'no', orderable: false },
                { data: 'id_farm_section' },
                { data: 'created_by' },
                { data: 'masalah_tanah_substrat' },
                { data: 'kaedah_pemulihan_rawatan' },
                { data: 'nama_bahan_peralatan' },
                { data: 'kuantiti_bahan_rawatan' },
                { data: 'tempoh_dilarang_menanam' },
                { data: 'blok_lokasi' },
                { data: 'nama_operator' },
                { data: 'action', orderable: false, searchable: false }
            ]
        });

        $(document).on('change', '#search, #minDate, #maxDate', function() {
            $('#dataDatatable').DataTable().ajax.reload(null, false);
        });
    }

    function handleRedirect() {
        window.location.href = "{{ route('form.daily.create') }}";
    }

    // function handleDownload() {
    //     let minDate = $('#minDate').val();
    //     let maxDate = $('#maxDate').val();
    //     let search = $('#search').val();

    //     // Redirect to your PDF generation route
    //     window.location.href = "?min=" + minDate + "&max=" + maxDate + "&search=" + search;
    // }

    // function handleExportExcel() {
    //     let minDate = $('#minDate').val();
    //     let maxDate = $('#maxDate').val();
    //     let search = $('#search').val();

    //     // Redirect to your Excel export route
    //     window.location.href = "?min=" + minDate + "&max=" + maxDate + "&search=" + search;
    // }
</script>
@endpush