@extends('layouts.app_new')
@section('title', 'PoliciesByAgent')
@section('style')
<link rel="stylesheet" href="{{ asset('datatable/datatables.min.css') }}">
@endsection
@section('content')
<div class="row gutters justify-content-center flex-fill">
    <div class="col-md-12 col-sm-12 col-12">
        <div class="card shadow">
            <div class="card-body">
                <div class="row g-4 align-items-center mb-3">
                    <div class="col-md-2">
                        <h5 class="text-primary card-title">{{ __('Policies By Agent') }}</h5>
                    </div>
                    <div class="col-md-auto col-sm-6 text-center text-lg-end ">
                        <label for="" class="form-label">{{ __('From') }}</label>
                    </div>
                    <div class="col-md-auto col-sm-6">
                        <input type="date" name="from_date" id="from_date" class="form-control"
                            value="{{ $from_date ?? date('Y-m-d') }}" required />
                    </div>
                    <div class="col-md-auto col-sm-6 text-center text-lg-end ">
                        <label for="" class="form-label">{{ __('To') }}</label>
                    </div>
                    <div class="col-md-auto col-sm-6">
                        <input type="date" name="to_date" id="to_date" class="form-control"
                            value="{{ $to_date ?? date('Y-m-d') }}" required />
                    </div>
                    <div class="col-md-auto col-sm-6 text-center text-lg-end ">
                        <label for="" class="form-label">{{ __('User Name') }}</label>
                    </div>

                    <div class="col-md-2 col-sm-6">
                        <select class="form-select" name="lookfor" id="lookfor" required style="width: 100%">
                            @foreach ($param as $p)
                            <option value="{{ $p->id }}">
                                @if (app()->getLocale() == 'ar')
                                {{ $p->user_FullName_ar }}
                                @else
                                {{ $p->user_FullName_en }}
                                @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-auto">
                        <button type="button" name="filter" id="filter" class="btn btn-primary btn-sm">{{ __('Filter')
                            }}</button>
                        <button type="button" name="refresh" id="refresh" class="btn btn-outline-secondary btn-sm">{{
                            __('Refresh') }}</button>
                    </div>
                    <div class="col-md-auto">
                        <label for="" class="form-label fs-6">{{ __('Total For search') }}</label> :<strong> <span
                                class="searchTotal">0</span></strong>
                    <br> <label for="" class="form-label fs-6">{{
                            __('Total In Page')
                            }}</label> : <strong class="text-start pagTotal">0</strong>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="policies_table" class="table table-bordered data-table text-center" style="width: 100%">
                        <tbody></tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{asset('js/currency.js')}}"></script>
<script src="{{ asset('datatable/datatables.min.js') }}"></script>
<script type="text/javascript">
    $("#lookfor").select2();
</script>

<script type="text/javascript">
    @if (app()->getLocale() == 'ar')
            var lanClassName ="text-start";
        @else
            var lanClassName="text-end";
        @endif
        $(function() {
            var f_date = "{{ date('Y-m-d') }}",
                t_date = "{{ date('Y-m-d') }}",
                t_lookfor = $('#lookfor').val();
            var Myurl = "{{ route('reports.policyesByAgent') }}/" + f_date + '/' + t_date + '/' + t_lookfor;
            console.log(Myurl, f_date, t_date);
            var table = $('.data-table').DataTable({
                @include('layouts.dataTableOptions'),
                 buttons: [{
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: [0, ':visible']
                        },text:"{{__('Copy')}}"
                    },
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':visible'
                        },text:"{{__('Excel')}}"
                    },
                    {
                    extend: 'print',
                    title : `Policies`,
                   messageTop:`<table style="width:100%">
                        <tbody style="width:100%">
                            <tr>
                                <th id="from-date">from : ${$('#from_date').val()}</th>
                                <th id="to-date"> to : ${$('#to_date').val()}</th>
                                <th id="to-date"> Country : ${$('#lookfor').find(":selected").text()}</th>
                            </tr>
                        </tbody>
                    </table>`,
                    customize: function ( win ) {
                    console.log(win.document);
                    $(win.document.getElementById('from-date')).html(`from : ${$('#from_date').val()}`);
                    $(win.document.getElementById('to-date')).html(`to : ${$('#to_date').val()}`);
                    $(win.document.getElementById('lookfor')).html(`Country : ${$('#lookfor').find(":selected").text()}`);
                    console.log($('#lookfor'));
                    $(win.document.body)
                    .append(
                    `<table style="width:100%">
                        <tbody>
                            <tr>
                                <th id="searchTotal">Total For search :${$('.searchTotal').html()}</th>
                                <th id="pagTotal">Total In this doc :${$('.pagTotal').html()}</th>
                            </tr>
                        </tbody>
                    </table>`
                    );
                    },text:"{{__('Print')}}"
                    },
                    {
                    extend: 'colvis',
                    text:"{{__('Column visibility')}}",
                    }
                ],
                footerCallback: function(row, data, start, end, display) {
                    var api = this.api(),
                        data;
                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    var monTotal7 = api.column(5).data().reduce(function(a, b) {
                        console.log(a, b, intVal(a) + intVal(b));
                        return intVal(a) + intVal(b);

                    }, 0);
                    total7 = currencyValue(monTotal7);
                    // $(api.column(1).footer()).html('Total in this page:')
                    $('.pagTotal').html(total7);
                },
                ajax: Myurl,

                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        title: "#",
                        orderable: false,
                        searchable: false,
                        responsivePriority: 1
                    },
                    {
                        data: 'code',
                        name: 'code',
                        title: '{{ __('Policy No') }}',
                        responsivePriority: 1
                    },
                    @if (app()->getLocale() == 'ar')
                        { data: 'up_ar_title' , name: 'up_ar_title', title: '{{ __('Group') }}',responsivePriority:
                        1,defaultContent:""},
                    @else
                        { data:'up_en_title' , name: 'up_en_title', title: '{{ __('Group') }}',responsivePriority:
                        1,defaultContent:""},
                    @endif {
                        data: 'policy_holder',
                        name: 'policy_holder',
                        title: '{{ __('Policy Holder') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'producer',
                        name: 'producer',
                        title: '{{ __('Producer') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'total_premium',
                        name: 'total_premium',
                        title: '{{ __('Total Premium') }}',
                        defaultContent: "",render: $.fn.dataTable.render.number( ',', '.',0 ),className:lanClassName
                    },
                    {
                        data: 'issued_date',
                        name: 'issued_date',
                        title: '{{ __('Issued Date') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'pGroup_no',
                        name: 'pGroup_no',
                        title: '{{ __('Group Number') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'destination',
                        name: 'destination',
                        title: '{{ __('Destination') }}',
                        defaultContent: ""
                    },
                    {
                    data: 'residence',
                    name: 'residence',
                    title: '{{ __('Residence') }}',
                    defaultContent: ""
                    },
                ],
            });




            fetch_data(f_date,t_date,t_lookfor);
            function fetch_data(from_date = '', to_date = '', lookfor = '') {
                console.log('feach data');
                $.ajax({
                url: "{{route('policies.search.total')}}", //PHP file to execute
                type: 'POST', //method used POST or GET
                data: {
                _token:$('meta[name="csrf-token"]').attr('content'),
                from_date: from_date,
                to_date:to_date,
                lookfor:lookfor,
                type:"ByAgent"
                },
                success: function(result) { // Has to be there !
                console.log(result);
                $('.searchTotal').html(currencyValue(result));
                },
                error: function(result, statut, error) { // Handle errors
                console.log(result,statut, error);
                }
                });
                $url = "{{ route('reports.policyesByAgent') }}/" + from_date + '/' + to_date + '/' + lookfor;
                $('#policies_table').DataTable().ajax.url($url).load();
            }

            $('#filter').click(function() {
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();
                var lookfor = $('#lookfor').val();
                if (from_date != '' && to_date != '' && from_date <= to_date && lookfor != '') {
                    fetch_data(from_date, to_date, lookfor);
                } else {
                    alert(
                        `{{ __('Both Dates are required and {from date} must be (less than or equal to)  {to date}') }}`);
                }
            });

            $('#refresh').click(function() {
                $('#from_date').val('');
                $('#to_date').val('');
                $('#lookfor').val('');
                fetch_data();
            });
        });
</script>
@endsection