@extends('layouts.partials.header')

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li>
                        <a onclick="add_m3u_portal()" href="#">
                            <button type="button" class="btn btn-primary waves-effect waves-light btn-sm">
                                Add M3u portal                                           </button>
                        </a>
                        <!--                              <a href="#/user_reseller.php?mag">
                                                      <button type="button" class="btn btn-success waves-effect waves-light btn-sm">
                                                      Change M3U portal                                            </button>
                                                      </a>-->
                    </li>
                </ol>
            </div>
            <h4 class="page-title">M3U Portal management</h4>
        </div>
    </div>
</div>
<!-- end page title --> 
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body" style="overflow-x:auto;">
              
                <div id="datatable-users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-4 col-md-4 col-lg-2" id="show_m3u_portals_records">
                            <span>Show Records</span> 
                            <select id="maxRowsM3uPortal" class="form-control form-control-sm">
                                <option {!! empty(request()->get('limit')) ? "selected='selected'" : "" !!} selected="selected">10</option>
                                <option value="25" {!! request()->get('limit') == '25' ? "selected='selected'" : "" !!}>25</option>
                                <option value="50" {!! request()->get('limit') == '50' ? "selected='selected'" : "" !!}>50</option>
                                <option value="100" {!! request()->get('limit') == '100' ? "selected='selected'" : "" !!}>100</option>
                                <option value="1000" {!! request()->get('limit') == '1000' ? "selected='selected'" : "" !!}>1000</option>
                                <option value="10000" {!! request()->get('limit') == '10000' ? "selected='selected'" : "" !!}>Show All</option>
                            </select>
                        </div>
                        <div class="col-sm-4 col-md-4 col-lg-2" id="show_m3u_portals_search">
                            <span>Search:</span>
                            <input type="text" id="search_m3u_portal" class="form-control form-control-sm" value="{{request()->get('search_m3u_portal')}}" placeholder="Name/Portal/Short Code" aria-controls="datatable-users">
                        </div>
                        <div style="margin-top: 19px;" class="col-sm-4 col-md-4 col-lg-2" id="show_m3u_portals_search">
                            <button style="width: inherit;" type="button" class="btn btn-primary waves-effect waves-light btn-sm" onclick="search_m3u_portals()">Search</button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="row">
                    @include('layouts.partials.messages')
                        <div class="col-sm-12">
                            <table style="font-size: 10px;" id='m3u_portal_table1' class="table table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>

                                    <tr>
                                        <th><input type="checkbox" id="check-all"></th>
                                        <th>ID</th>
                                        <th>Portal</th>   
                                        <th>Shortcode</th> 
                                        <th>Activity</th> 
                                        <th style="width:150px;">Action</th>
                                    </tr>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($portals as $portal)
                                    <tr>
                                        <td><input type="checkbox" id="check-all"></td>
                                        <td>{{ $portal['id'] }}</td>
                                        <td>{{ $portal['current_portal'] }}</td>   
                                        <td>{{ $portal['shortcode'] }}</td>
                                        <td>{{ $portal['activity'] }}</td>
                                        <td style="width:150px;">
                                            <a style="padding:3px !important;" class="btn btn-sm btn-primary" href="javascript:void()" value="{{ $portal['id'] }}" title="Edit" onclick="edit_m3u_portal(this)"><i class="fa fa-pencil"></i></a>
                                            <a style="padding:3px !important;" class="btn btn-sm btn-danger" href="javascript:void()" value="{{ $portal['id'] }}" title="Delete" onclick="delete_m3u_portal(this)"><i class="fa fa-trash"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>

                            {!! $portals->withQueryString()->links('pagination::bootstrap-5') !!}

                            <!-- <div class='pagination-container' >
                                <nav>
                                    <ul class="pagination">
                            
                                        <li data-page="prev" >
                                            <span style="font-size: large; border: 1px solid; padding: 2px 13px; margin-right: 8px;"> < <span class="sr-only">(current)</span></span>
                                        </li>

                                        <li data-page="next" id="prev">
                                            <span style="font-size: large; border: 1px solid; padding: 2px 13px; margin-left: 8px;"> > <span class="sr-only">(current)</span></span>
                                        </li>
                                    </ul>
                                </nav>
                            </div> -->
                            <!-- <div id="datatable-users_processing" class="dataTables_processing card" style="display: none;">Processing...</div> -->
                        </div>
                    </div>

                </div>
            </div>
            <!-- end card body-->
        </div>
        <!-- end card -->
    </div>
    <!-- end col-->
</div>
<!-- end row-->


@endsection

@include('includes.m3u_portal_popup')