@extends('layouts.app_new')
@section('title', 'Policies')
@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') }}</h5>
                        <small class="text-muted">{{ __('Search by') }} : {{ __('Issued Date') }}</small>
                    </div>

                    {{-- <div class="col col-md-2 text-end">{{ __('Search by') }} : {{ __('Issued Date') }}</div> --}}
                    <div class="col-md-1 col-sm-6 text-end">
                        <label for="" class="form-label">{{ __('From') }}</label>
                    </div>
                    <div class="col-md-2 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-1 col-sm-6 text-end">
                        <label for="" class="form-label">{{ __('To') }}</label>
                    </div>
                    <div class="col-md-2 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">
                        <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>
                        {{-- <button type="button" name="export" id="export" class="btn btn-secondary btn-sm">{{
                            __('Export') }}</button> --}}
                        <button type="button" name="exportTrav" id="exportTrav" class="btn btn-secondary btn-sm">{{
                            __('Export with Travelers') }}</button>
                    </div>
                    @can('createPolicy')
                    <div class="col text-end">
                        <a href="{{ route('policies.create') }}" class="btn btn-sm btn-primary float-end add">
                            <li class="zmdi zmdi-plus"></li>
                        </a>
                    </div>
                    @endcan
                </div>

                <hr>
                <div class="success"></div>
                <div class="table-responsive text-center">
                    <table id="policies_table" class="table table-bordered data-table text-center" style="width: 100%">
                        <tbody></tbody>
                    </table>
                </div>
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <input type="hidden" name="id" id="row_id">
                                    <input type="hidden" name="code" id="row_code">
                                    <div class="mb-3">
                                        <label for="" class="form-label">Date</label>
                                        <input type="date" class="form-control" name="deleted_at" id="row_date"  value="{{date('Y-m-d')}}">
                                        <small id="helpId" class="form-text text-muted">Help text</small>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button id="btn-md-close" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary btn-submit">Delete Policy</button>
                            </div>
                        </div>
                    </div>
                </div>


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

@section('script')
{{-- <script src="{{asset('datatable/jquery-1.10.2.min.js')}}"></script> --}}
<script src="{{ asset('datatable/datatables.min.js') }}"></script>

<script type="text/javascript">
    $(function() {
            @if (app()->getLocale() == 'ar')
                var lanClassName = "text-start";
            @else
                var lanClassName = "text-end";
            @endif

            var f_date = "{{ date('Y-m-d') }}",
                t_date = "{{ date('Y-m-d') }}";

            var url = "{{ asset('policy/dateSearch') }}/" + 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>
                            </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()}`);
                        },
                        text: "{{ __('Print') }}"
                    },
                    {
                        extend: 'colvis',
                        text: "{{ __('Column visibility') }}",
                    }
                ],
                ajax: url,

                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        title: "#",
                        orderable: false,
                        searchable: false,
                        responsivePriority: 1
                    },
                    {
                        data: 'deleted',
                        name: 'deleted',
                        title: "{{__('State')}}",
                        responsivePriority: 1
                    },
                    {
                        data: 'code',
                        name: 'code',
                        title: '{{ __('Policy No') }}',
                        responsivePriority: 1
                    },
                    {
                        data: 'plan',
                        name: 'plan',
                        title: '{{ __('Plan') }}',
                        responsivePriority: 1,
                        defaultContent: ""
                    }, {
                        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: 'pGroup_no',
                        name: 'pGroup_no',
                        title: '{{ __('Group Number') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'pGroup_name',
                        name: 'pGroup_name',
                        title: '{{ __('Group Name') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'email',
                        name: 'email',
                        title: '{{ __('Email') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'effective_date',
                        name: 'effective_date',
                        title: '{{ __('Effective Date') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'issued_date',
                        name: 'issued_date',
                        title: '{{ __('Issued Date') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'expiry_date',
                        name: 'expiry_date',
                        title: '{{ __('Expiry Date') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'policy_duration',
                        name: 'policy_duration',
                        title: '{{ __('Policy Duration') }}',
                        defaultContent: ""
                    },
                    {
                        data: 'residence',
                        name: 'residence',
                        title: '{{ __('Residence') }}',
                        responsivePriority: 3,
                        defaultContent: ""
                    },
                    {
                        data: 'destination',
                        name: 'destination',
                        title: '{{ __('Destination') }}',
                        responsivePriority: 3,
                        defaultContent: ""
                    },
                    {
                        data: 'action',
                        name: 'action',
                        title: '{{ __('Control') }}',
                        orderable: false,
                        searchable: false,
                        responsivePriority: 1
                    },
                ],
            });

            // fetch_data(f_date,t_date);
            @can('admin')
            // $.noConflict();
            // var modal = $('#exampleModal');


            $(document).on('click','.btn-delete',function(){
                console.log('clicked');
                var rowData = table.row($(this).parents('tr')).data();

                        $('#row_id').val(rowData.id)
                        // $('#row_date').val({{date('Y-m-d')}})
                        $('#row_code').val(rowData.code)
                        // modal.modal()
                        console.log($('#row_code').val());

                });

               $(document).on('click', '.btn-submit', function() {
                    // var rowData = table.row($(this).parents('tr')).data();
                    // console.log(rowData);
                    if (!confirm("Are you sure to delete the policy with the code : " + $('#row_code').val()+" ?")) return;
                    var rowid = $('#row_id').val();
                    if (!rowid) return;
                    console.log($('#row_date').val());
                    $.ajax({
                        type: "POST",
                        dataType: 'JSON',
                        url: "{{ route('policies.index') }}/" + rowid,
                        data: {
                            'deleted_at':  $('#row_date').val(),
                            _method: 'delete',
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response) {
                                alert(response.message)
                                $('.success').text(response.message);
                                table.draw();
                               $('#exampleModal').modal('hide');
                            }
                        },
                        error: function(error) {

                            console.log(error);
                        }
                    });
                });
            @endcan
            fetch_data(f_date, t_date);

            function fetch_data(from_date = '', to_date = '') {
                console.log('feach data');
                $url = "{{ asset('policy/dateSearch') }}/" + from_date + '/' + to_date;
                $('#policies_table').DataTable().ajax.url($url).load();
                $('#policies_table').DataTable().columns.adjust();
                // $('#policies_table').DataTable().fixedHeader.adjust();
                // table.fixedHeader.adjust();
                // new $.fn.dataTable.FixedHeader( $('#policies_table') );
            }

            $('#filter').click(function() {
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();
                if (from_date != '' && to_date != '' && from_date <= to_date) {
                    fetch_data(from_date, to_date);
                } 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('');
                fetch_data();
            });

            // $("#export").click(function() {

            //     var query = {
            //         from_date: $('#from_date').val(),
            //         to_date: $('#to_date').val(),
            //         type: "ByDate"
            //     }


            //     // var url = "{{ URL::to('downloadExcel_location_details') }}?" + $.param(query)
            //     var url = "{{ route('policies.export') }}?" + $.param(query)

            //     window.location = url;
            // });
            $("#exportTrav").click(function() {

                var query = {
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    type: "ByDate"
                }


                // var url = "{{ URL::to('downloadExcel_location_details') }}?" + $.param(query)
                var url = "{{ route('policies.exportTravs') }}?" + $.param(query)

                window.location = url;
            })
        });
</script>
@endsection