@extends('layouts.app')
@include('layouts.navbar')
@include('layouts.doctor_nav')
@section('head')
    @parent
    <style>
        th{
            font-size: 12px;
        }
        tr{
            font-size: 12px;
        }
    </style>
@endsection

@section('content')
    <div class="container"style="width: 60%;">
        <div class="row">
            {{-- Alert success --}}
            @if( session('success'))
                <p class="alert alert-success mt-2">{{ session('success') }}</p>
            @endif
            <div class="d-flex justify-content-between mt-2">
                <a href="{{ route('home') }}" class="btn btn-secondary">Back</a>
                <tr>
                    <th colspan="3">
                        <a class="btn btn-warning float-end" href="{{ route('revenue-vs-dr.export_mapping') }}">Export User Data</a>
                    </th>
                </tr>
            </div>
            <h3 class="form-label" style="font-weight: 200">Doctor vs Revenue</h3>
            <div class="hstack gap-3">
                <!-- Search filter -->
                <!-- month -->
                <input type="datetime" name="" id="sel_month" placeholder="Select Month">
                <a href="{{ route('revenue-vs-dr.create') }}" class="btn btn-primary">New</a>
            </div>
            <div class="col-12 col-md">

                <div class="table-wrapper">
                    <table id='empTable' width='100%' border="1" style='border-collapse: collapse;'>
                        <thead>
                            <tr>       
                                <th>Month</th>
                                <th>Doctors</th>                     
                                <th>Sale</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="container">
        <div class="d-flex justify-content-between mt-3">
            <a href="{{ route('home') }}" class="btn btn-secondary">Back</a>
            <a href="{{ route('patient-exist-against-new.create') }}" class="btn btn-primary">New</a>
        </div>
        <h3 class="form-label mt-3" style="font-weight: 600">Number of Patient: Existing vs New</h3>
        <div class="row">
            <div class="col-12 col-md-6 h-100">
                <div class="table-wrapper mt-3 h-100">
                    <table class="table">
                        <thead>
                            <tr>                            
                                <th rowspan="2">Month</th>
                                @foreach ($doctors as $doctor)
                                    <th>{{ $doctor->name }}</th>
                                @endforeach
                                <th rowspan="2">Total Sales</th>
                                <th rowspan="2">Total Sales <br> Without Covid</th>
                            </tr>
                            <tr>
                                @foreach ($doctors as $doctor)
                                    <th>Sales</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-12 col-md-6 h-100">
                <div class="chart-wrapper h-100">
                    <canvas id="patient-exist-against-new" style="height: 100%"></canvas>
                </div>
            </div>

        </div>
    </div> --}}
@endsection

@section('scripts')
    @parent
    <script type="text/javascript"> 
        $(document).ready(function(){
            $("#sel_month").datepicker( {
                format: "yyyy-mm-01",
                startView: "months", 
                minViewMode: "months"
            });
            let url = "{{ route('getRevenueVsDrs') }}";
            var empTable = $('#empTable').DataTable({
               processing: true,
               serverSide: true,
               "bFilter" : false,
               ajax: {
                  url: url,
                  data: function(data){
                     data.searchMonth = $('#sel_month').val();
                    //  console.log(data)
                  }
               },

                columns: [
                    { data: 'month' },
                    { data: 'doctor' },
                    { data: 'sale' },
                    { data: 'action',
                        render: function(data,type,row){
                            if(data){
                                return '<a href="' +data[0]+'"class="btn edit_btn btn-primary btn-sm" > Edit </a><br><form action="'+data[1]+'" method="POST"><input type="hidden" name="_token" value="{{ csrf_token() }}" /><button type="submit" id="delete" class="delete btn btn-danger btn-sm"> Delete </button></form>'
                            }
                        }
                    },
                    
                ],
            });
            $(document).on('click', '#delete', function(event) {
                return confirm("Do you want to delete this item?");
            });
     
            $('#sel_month').change(function(){
                empTable.draw();
            });

        });
    </script>
@endsection