@extends('layouts.main') 
@section('title', 'Payment Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }
            #overlay {
                background: #ffffff;
                color: #666666;
                position: fixed;
                height: 100%;
                width: 100%;
                z-index: 5000;
                top: 0;
                left: 0;
                float: left;
                text-align: center;
                padding-top: 25%;
                opacity: .80;
            }
            button {
                cursor: pointer;
            }

            .spinner {
                margin: 0 auto;
                height: 64px;
                width: 64px;
                animation: rotate 0.8s infinite linear;
                border: 5px solid firebrick;
                border-right-color: transparent;
                border-radius: 50%;
            }

            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
         <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
         
    @endpush
      <div id="overlay">
        <div class="spinner"></div>
    </div>

    
    <div class="container-fluid  mt-5">
    	<div class="page-header ">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{__('Remittance Due') }} </h5>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">{{ __('Dashboard')}}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
     
      
       
    </div>
    
    <!-- push external js -->
        <div class="col-md-12">
        <div class="card p-3">
            <div class="card-body">
                 <div id="firstTableDiv">
                    <table id="mda_table" class="table datatableu" style="width:100%;">
                        <thead>
                            <tr>
                                <th>{{ __('S/N')}}</th>
                                <th>{{ __('Month')}}</th>
                                <th>{{ __('Amount')}}</th>
                                <th>{{ __('Action')}}</th>   
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($data as $key=> $item)
                            <tr>
                                <td>{{$key+1}}</td>
                                <td> {{$item->month_name}} {{$item->year}}</td>
                                <td>{{$item->amount}}</td>
                                <td>
                                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
                                     Pay
                                 </button>
                                 <!-- Button trigger modal -->
                                 <!-- Modal -->
                                <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">Modal title</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <form action="{{route('mobileStoreInv')}}" method="post">
                                        @csrf
                                        <div class="modal-body">
                                            <input type="hidden" name="invoice_type" value="remittance"/>
                                            <input type="hidden" name="user_id" value="{{auth()->user()->userId}}"/>
                                            <input type="hidden" name="rev_point_id" value="{{auth()->user()->rev_point_id}}"/>
                                            <input type="hidden" name="ids" value="{{$item->ids}}"/>
                                            <input type="hidden" name="month" value="{{$item->year}}-{{$item->month}}-{{$item->day}}"/>
                                            <input type="hidden" name="mda_id" value="{{$item->mda_id}}"/>
                                            <input type="hidden" name="service" value="{{$item->service_id}}"/>
                                            <input type="hidden" name="agent_type" value="web"/>
                                            <input type="hidden" name="year" value="{{$item->year}}"/>
                                            <input type="hidden" name="month" value="{{$item->month}}"/>
                                            <input type="hidden" name="day" value="{{$item->day}}"/>
                                            <label>Amount
                                                <input type="text" name="amount" class="form-control" value="{{$item->amount}}" readonly/>
                                            </label>
                                    
                                            <label>Payment Channel
                                                <select name="channel" class="form-control">
                                                    <option value="card">Card</option>
                                                    <option value="bank"> Bank</option>
                                                </select>
                                            </label>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </form>
                                    </div>
                                </div>
                                </div>
                                </td>
                                <!-- Button trigger modal -->
                                
                            </tr>

                                
                            @empty
                                
                            @endforelse

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


    {{--  --}}
    @push('script')
     <script>
        document.body.classList.add("sidebar-mini");
     </script> 
    <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
    {{-- <script src="{{ asset('js/form-picker.js') }}"></script> --}}
    {{-- <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script> --}}
    {{-- <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script> --}}
    {{-- <script src="{{ asset('js/reconcilation.js') }}"></script> --}}
    <script src="{{ asset('js/custom.js') }}"></script>
    <script>
        var resultData = []
        $('#overlay').hide()
        $('.resetFilters').hide();
        //
        $(document).ready(function() {
            initDataTable('datatableu')
            // initializeSelect2();
            // initializeDatepicker();
        })
        // 
        function initDataTable(id) {
            let Table = $(`.${id}`).DataTable({
                "ordering": true,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    footer: true,
                    exportOptions: {
                        columns: [0,1]
                    }
                }],
                processing: true,
            });
        }
    //

    // function create
  

    //
   
   
</script>
     
    @endpush
@endsection