@section('externalcss')
    <style>
        table, th, td {
            border: 1px solid black !important;
            border-collapse: collapse;
        }
    </style>
@endsection

@if(\Illuminate\Support\Facades\Auth::user()->isAbleTo('reports-read'))

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">

            <!--begin::Card-->
            <div class="card card-flush mt-5" style="box-shadow: 0px 5px 5px #1a1a1a;">

                <!--begin::Card header-->
                <div class="card-header mt-6">

                    <!--begin::Card title-->


                    <div class="col-md-12 fv-row mb-7">
                        <div class="row">


                            <div class="col-md-3">
                                <label class="fs-6 fw-bold form-label mb-2">
                                    <span>From Date</span>

                                </label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="date" class="form-control form-control-solid"
                                       placeholder="Enter a From Date" name="start_date" wire:model.defer="start_date"/>
                                <!--end::Input-->
                                @error('start_date') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="fs-6 fw-bold form-label mb-2">
                                    <span>To Date</span>

                                </label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="date" class="form-control form-control-solid"
                                       placeholder="Enter a To Date" name="end_date" wire:model.defer="end_date"/>
                                <!--end::Input-->
                                @error('end_date') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>


                            <div class="col-md-3 py-6">
                                <a href="javascript:void(0)" wire:click="show"
                                   class="btn btn-info btn-hover-scale me-5">Show</a>
                                @if(sizeof($datatables)>0)
                                <a href="javascript:void(0)" onclick="exportTableToCSV('report_table', 'exported_table.csv')"
                                   class="btn btn-info btn-hover-scale me-5">Export</a>
                                @endif
                            </div>


                        </div>
                        <!--begin::Label-->
                    </div>

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

                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 table-responsive">
                            <table style="width: 2500px;" id="report_table">
                                <thead>
                                    <tr>
                                        <th class="p-1 fs-8 fw-bold text-center bg-primary text-white" style="max-width: 450px;">Visit Date</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-primary text-white" style="max-width: 200px;">UHID</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-primary text-white" style="max-width: 250px;">Patient Name</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-primary text-white" style="width: 80px;">Mobile</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-gray-600 text-white" style="width: 100px;">Diagnosis Name(s)</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-gray-600 text-white" style="width: 80px;">No Of Tests</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Gross</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Cancel</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Discount</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Discount Refer By</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Net Amount</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Balance</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-warning text-dark" style="width: 100px;">Settlement By</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-warning text-dark" style="width: 100px;">Cash</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-warning text-dark" style="width: 100px;">Card</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-warning text-dark" style="width: 100px;">UPI</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-warning text-dark" style="width: 100px;">Paid(User)</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Referal Dr. Name</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Dr. Margin</th>

                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Client Name</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Client Margin</th>

                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Pathology Name</th>
                                        <th class="p-1 fs-8 fw-bold text-center bg-success text-dark" style="width: 100px;">Pathology Margin</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(sizeof($datatables)>0)
                                    @foreach($datatables as $table)
                                    <tr>
                                        <td class="p-1 fs-8" style="width: 400px;">
                                            {{\Carbon\Carbon::parse($table['created_at'])->format('d-M-Y')}}<br/>
                                            {{\Carbon\Carbon::parse($table['created_at'])->format('h:m A')}}
                                        </td>
                                        <td class="p-1 fs-8" style="width: 100px;">NA</td>
                                        <td class="p-1 fs-8" style="width: 300px;">{{$table['patient_name']}}</td>
                                        <td class="p-1 fs-8" style="width: 200px;">{{$table['phone_no']}}</td>
                                        <td class="p-1 fs-8" style="width: 200px;">
                                            @foreach($table['get_lab_dignosys_entry_item_view'] as $item)
                                                {{$item['diagnosis_name']}},
                                            @endforeach
                                        </td>
                                        <td class="p-1 fs-8 text-center" style="width: 200px;">{{sizeof($table['get_lab_dignosys_entry_item_view'])}}</td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">{{$table['sub_total_amount']}}</td>
                                        <td class="p-1 fs-8 text-end " style="width: 200px;">{{0}}</td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">{{$table['disc_amount']}}</td>
                                        <td class="p-1 fs-8 text-center" style="width: 200px;">NA</td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">{{$table['paid_amount']}}</td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">0</td>
                                        <td class="p-1 fs-8 text-center" style="width: 200px;">NA</td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">
                                            @foreach(collect($table['mode_of_payment']) as $payment)
                                                @if(isset($payment['cash']))
                                                    {{ $payment['cash'] }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">
                                            @foreach(collect($table['mode_of_payment']) as $payment)
                                                @if(isset($payment['debit_card']))
                                                    {{ $payment['debit_card'] }}
                                                @elseif(isset($payment['credit_card']))
                                                    {{ $payment['credit_card'] }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">
                                            @foreach(collect($table['mode_of_payment']) as $payment)
                                                @if(isset($payment['upi']))
                                                    {{ $payment['upi'] }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">{{$table['paid_amount']}}</td>
                                        <td class="p-1 fs-8 text-center" style="width: 200px;">
                                            @if($table['doctor_id'] !=null)
                                            {{$table['doctor_name']}}
                                            @else
                                            {{$table['unregistered_dr_name']}}
                                            @endif
                                        </td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">{{$table['doctor_margin']}}</td>

                                        <td class="p-1 fs-8 text-center" style="width: 200px;">{{$table['agent_name']}}</td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">{{$table['agent_margin']}}</td>

                                        <td class="p-1 fs-8 text-center" style="width: 200px;">{{$table['pathology_name']}}</td>
                                        <td class="p-1 fs-8 text-end" style="width: 200px;">{{$table['pathology_margin']}}</td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="10" class="text-center">
                                           <h2 class="fs-2"> No Data Available</h2>
                                        </td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

@endif

@section('externaljs')
    <script>
        function exportTableToCSV(tableId, filename) {
            // Get the table element
            const table = document.getElementById(tableId);

            // Extract table data
            const rows = table.querySelectorAll('tr');
            const csv = [];
            for (const row of rows) {
                const rowData = [];
                const cols = row.querySelectorAll('td, th');
                for (const col of cols) {
                    rowData.push(`"${col.innerText.replace(/"/g, '""')}"`); // Escape double quotes
                }
                csv.push(rowData.join(',')); // Join columns with commas
            }

            // Combine rows into a single CSV string
            const csvString = csv.join('\n');

            // Create a Blob and trigger download
            const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
@endsection