@extends('layouts.app')
@include('layouts.navbar')
@include('layouts.panel_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('patient-against-panel.export_mapping') }}">Export User Data</a>
                    </th>
                </tr>
            </div>
            <h3 class="form-label" style="font-weight: 200">Revenue: Patient vs panel</h3>
            <div class="hstack gap-3">
                <!-- Search filter -->
                <!-- month -->
                <input type="datetime" name="" id="sel_month" placeholder="Select Month">
                <a href="{{ route('patient-against-panel.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>Panel</th>                     
                                <th>Total patient</th>
                                <th>Revenue</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </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('getPatientAgainstPanels') }}";
            var empTable = $('#empTable').DataTable({
               processing: true,
               serverSide: true,
               "bFilter" : false,
               ajax: {
                  url: url,
                  data: function(data){
                     data.searchMonth = $('#sel_month').val();
                    //  data.searchPanel = $('#sel_panel').val();
                  }
               },

                columns: [
                    { data: 'month' },
                    { data: 'panel' },
                    { data: 'total_patient' },
                    { data: 'revenue' },
                    { 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