@extends('layout.app')

@section('content')
<div class="card">
    <div class="card-body">
        <div class="row">

            <div class="col-md-6">
                <div class="form-group">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="from_date">
                        From Date
                    </label>
                    <div class="input-group date" id="searchFrom" data-target-input="nearest">
                        <input type="text" name="from_date" value="{{$from->format('m/d/Y')}}"
                            class="form-control datetimepicker-input input-group-append"
                            data-toggle="datetimepicker" data-target="#searchFrom"
                            autocomplete="off">

                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="to_date">
                        To Date
                    </label>
                    <div class="input-group date" id="searchTo" data-target-input="nearest">
                        <input type="text" name="to_date" value="{{$to->format('m/d/Y')}}"
                            class="form-control datetimepicker-input input-group-append"
                            data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group float-right mt-2">

                    <button class="btn btn-primary" type="button"
                            id="searchBtn"><i class="fa fa-search"></i> Search</button>

                </div>
            </div>


        </div>
        @if(checkSettings('enforce-download-permission') != 'enable' || auth()->user()->can('report-marketing-new-customer-download'))
        <div class="d-flex justify-content-end mb-3">
            <button class="btn btn-success mr-2" id="downloadExcel">Download Excel</button>
            <button class="btn btn-danger" id="downloadPDF">Download PDF</button>
        </div>
        @endif

        <div id="search-loader" style="display:none; text-align:center; padding: 40px 0;">
            <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
            <p class="mt-2 text-muted">Loading...</p>
        </div>

        <div class="table-responsive">
            @include('report.marketingNewClient.result')
        </div>
    </div>
</div>

@endsection

@section('ajax')
<script src="{{ asset('/') }}js/xlsx/xlsx.full.min.js"></script>
<script src="{{ asset('/') }}js/html2pdf/html2pdf.bundle.min.js"></script>

<script>
    $(document).ready(function() {

        // Initialise datetimepickers
        $('#searchFrom').datetimepicker({ format: 'MM/DD/YYYY' });
        $('#searchTo').datetimepicker({ format: 'MM/DD/YYYY', useCurrent: false });
        $('#searchFrom').on('change.datetimepicker', function (e) {
            $('#searchTo').datetimepicker('minDate', e.date);
        });

        // Excel Export — guarded: button may be hidden by permission check
        var excelBtn = document.getElementById('downloadExcel');
        if (excelBtn) {
            excelBtn.addEventListener('click', function () {
                let table = document.getElementById('tableId');
                let ws    = XLSX.utils.table_to_sheet(table);
                let wscols = [];
                for (let i = 0; i < table.rows[0].cells.length; i++) {
                    wscols.push({ wch: table.rows[0].cells[i].innerText.length + 5 });
                }
                ws['!cols'] = wscols;
                let wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, 'Report');
                XLSX.writeFile(wb, 'Report.xlsx');
            });
        }

        // PDF Export — guarded: button may be hidden by permission check
        var pdfBtn = document.getElementById('downloadPDF');
        if (pdfBtn) {
            pdfBtn.addEventListener('click', function () {
                let element = document.getElementById('result');
                let opt = {
                    margin:      10,
                    filename:    'Report.pdf',
                    image:       { type: 'jpeg', quality: 0.98 },
                    html2canvas: { scale: 3 },
                    jsPDF:       { unit: 'mm', format: 'a4', orientation: 'landscape' }
                };
                html2pdf().set(opt).from(element).save();
            });
        }

        $('#searchBtn').on('click', function (e) {
            e.preventDefault();
            let from = $('#searchFrom input').val();
            let to   = $('#searchTo input').val();

            $('#search-loader').show();
            $('#result').hide();
            $('#searchBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Searching...');

            $.ajax({
                type: 'get',
                url: '{{ route('kam-report-search') }}',
                data: { from: from, to: to },
                success: function (result) {
                    $('#result').html(result).show();
                },
                error: function () {
                    alert('Something went wrong. Please try again.');
                },
                complete: function () {
                    $('#search-loader').hide();
                    $('#searchBtn').prop('disabled', false).html('<i class="fa fa-search"></i> Search');
                }
            });
        });

    });
</script>
@endsection