@extends('layouts.master')

@section('title', 'Referral Payout')

@section('content')

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Referrals</h1>
                    </div><!-- /.col -->

                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                <!-- /.row -->
                
                <div class="card">
                    
                    <div class="card-header">
                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="pill" href="#payout-requests" role="tab" aria-controls="payout-requests" aria-selected="true">Payout Requests</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link"  data-toggle="pill" href="#payouts" role="tab" aria-controls="payouts" aria-selected="false">Payouts</a>
                                    </li>
                                </ul>
                    </div>
                    
                    <div class="card-content">
                        <div class="tab-content pt-2 pl-1" id="pills-tabContent">
                            <div class="tab-pane fade active show" id="payout-requests" role="tabpanel" aria-labelledby="pills-home-tab">
                                Consequat
            occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit
            proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
            veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim
            aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
                            </div>
                            <div class="tab-pane fade" id="payouts" role="tabpanel" aria-labelledby="pills-profile-tab">Ad pariatur
            nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo
            est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit
            sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore
            elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
                            </div>
                        </div>
                    </div>

            </div>
                <!-- /.row -->
        </div><!--/. container-fluid -->
    </section>
        <!-- /.content -->
    </div>

    <div id="DeleteFaqModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Faq</h4>
                </div>
                <form id="DeleteForm" method="post" role="form" action="{{route('deleteFaq')}}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <input name="id" type="hidden" placeholder="Enter Channel Name" class="form-control" required>
                        <p>Are you sure you want to delete this Faq?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">Yes!</button>
                    </div>
                </form>

            </div>

        </div>
    </div>

    <!-- /.content-wrapper -->
@endsection

@section('javascript')
    <!-- jQuery -->
    <script src="/public/dist/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/public/dist/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Sparkline -->
    <script src="/public/dist/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!-- jvectormap -->
    <script src="/public/dist/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/public/dist/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- Slimscroll -->
    <script src="/public/dist/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- ChartJS 1.0.2 -->
    <script src="/public/dist/plugins/chartjs-old/Chart.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/public/dist/js/adminlte.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="/dist/js/pages/dashboard2.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/public/dist/js/demo.js"></script>



    <script>

        $('#DeleteFaqModal').on('show.bs.modal', function (e) {
            // get information to update quickly to modal view as loading begins
            var opener=e.relatedTarget;//this holds the element who called the modal

            //we get details from attributes
            var channelid=$(opener).attr('faq-id');

            $('#DeleteForm').find('[name="id"]').val(channelid);
        });


    </script>

@stop