@section('title','Sales Report')
@extends('layout.app')
@section('content')
<div class="container-fluid ">
    <div class="row ">
        <div class="col-12 mt-3">
            <div class="card hide-filter-on-print">
                <div class="card-header bg-transparent header-elements-inline">
                    <span class="text-uppercase font-size-sm font-weight-semibold">Filter</span>
                    <div class="header-elements">
                    <div class="list-icons"><a data-action="collapse" class="list-icons-item"></a></div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{route('report.sales')}}" method="GET" id="get_form">
                    <div class="form-group d-flex align-items-center">
                        <input type="hidden" name="start_date" id="start_date" class="form-control" value="">
                        <input type="hidden" name="end_date" id="end_date" class="form-control" value="">
                        <input type="text" name="date_filter" id="reportrange" class="form-control">
                        <button type="submit" class="btn btn-sm btn-primary ml-2">Filter</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-transparent header-elements-inline">
                <span class="text-uppercase font-size-sm font-weight-semibold">Sales Report</span> 
                <div class="header-elements">
                    <div class="list-icons"><a onclick="printSection()" class="btn btn-sm btn-success"><i class="icon-printer2 mr-2"></i>Print</a></div>
                </div>
                </div>
                <div id="print_section"  class="userDatatable global-shadow border-light-0 p-30 bg-white radius-xl w-100 mb-30">
                    <div class="table-responsive">
                        <table class="table mb-0 table-borderless">
                            <thead>
                                <tr class="userDatatable-header">
                                    <th>
                                        <div class="d-flex align-items-center">
                                            <div class="custom-checkbox  check-all">
                                                <label for="check-44">
                                                    <span class="checkbox-text userDatatable-title">Account</span>
                                                </label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <span class="userDatatable-title">Date</span>
                                    </th>
                                    <th>
                                        <span class="userDatatable-title">Account Holder</span>
                                    </th>
                                    <th>
                                        <span class="userDatatable-title">Customer</span>
                                    
                                    <th>
                                        <span class="userDatatable-title">Sold At</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($salesReports) > 0)
                                    @foreach($salesReports as $salesReport)
                                        <tr>
                                            <td>
                                                <div class="d-flex">
                                                    <div class="userDatatable-content">
                                                        {{$salesReport->product?->product_name ?? ''}}
                                                    
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    {{$salesReport->created_at ?? ''}}
                                                
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    {{$salesReport->product?->account_holder ?? ''}}
                                                
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    {{$salesReport->customer ? ($salesReport->customer->channel_name . ': ' . ($salesReport->customer->description ?? '')) : ''}}



                                                </div>
                                            </td>
                                            
                                            <td>
                                                <div class="userDatatable-content">
                                                    {{$salesReport->amount??''}}
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                <tr>
                                    <td colspan="4" style="text-align: center;">No Data Available</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

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

<script>
    function printSection() {
    var printContents = document.getElementById("print_section").innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}
</script>
@endsection