@extends('agentportal.layouts.layout')

@section('title', 'User List')

@section('page_style')
    <link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
    <link href="{{ url('css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
            background-color: #00FFFF;
        }
    </style>
@endsection

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Subheader-->
        <!-- <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
            </div> -->
        <!--end::Subheader-->
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">
                <!--begin::Card-->
                <div class="card card-custom">
                    <div class="card-header">
                        <div class="card-title">
                            <span class="card-icon">
                                <i class="flaticon2-user text-primary"></i>
                            </span>
                            <h3 class="card-label">{{ __('message_lang.LBL_REFERRAL_CODE') }}</h3>
                        </div>
                        <div class="card-toolbar">
                            <!--begin::Button-->
                            <a href="{{ url('agentportal/referral_codes/create') }}"
                                class="btn btn-primary font-weight-bolder">
                                <span class="svg-icon svg-icon-md">
                                    <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24" />
                                            <path
                                                d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z"
                                                fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                            <path
                                                d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z"
                                                fill="#000000" fill-rule="nonzero" />
                                        </g>
                                    </svg>
                                    <!--end::Svg Icon-->
                                </span>{{ __('message_lang.BTN_ADD_REFERRAL_CODE') }}
                            </a>
                            <!--end::Button-->
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ url('agentportal/referral_codes/search') }}" id="filterForm">
                            @csrf
                            <input type="hidden" name="page" id="page" value="1">
                            <div class="row">
                                <div class="form-group col-md-3">
                                    <label class="" for="country_code">{!! trans('message_lang.LBL_COUNTRY') !!} <span
                                            style="color:red;"></span></label><br />
                                    <select name="country_code" id="country_code" class="form-control custom-field">
                                        <option value="">{!! trans('message_lang.PLACEHOLDER_SELECT_COUNTRY') !!}</option>
                                        @foreach ($countries as $key => $country)
                                            <option value="{{ $key }}" {!! $request->country_code == $key ? 'selected' : '' !!}>{{ $country }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3"></div>
                                <div class="col-md-3"></div>
                                <div class="form-group col-md-3">
                                    <button type="submit" name="export"
                                        class="btn btn-primary font-weight-bolder float-right">{!! trans('message_lang.LBL_EXPORT_TO_CSV') !!}</button>
                                </div>

                            </div>
                            <div class="form-group row justify-content-md-center">
                                <button type="submit" class="btn btn-primary" id="apply-filter-paid"
                                    data-count="0">{!! trans('message_lang.BTN_SEARCH') !!}</button>

                                <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>

                                <a href="{{ url('agentportal/referral_codes') }}" class="btn btn-secondary"
                                    id="apply-filter-clear-paid">{!! trans('message_lang.BTN_CLEAR_SEARCH') !!}</a>
                            </div>
                            @if ($referral_codes)
                                <div class="perPage">
                                    <label>
                                        <div class="show">{!! trans('message_lang.DATATABLE_LBL_SHOW') !!}</div>
                                        <select name="per_page" id="perPage"
                                            class="custom-select custom-select-sm form-control form-control-sm">
                                            <option value="10" {!! $request->has('per_page') && $request->per_page == '10' ? 'selected' : '' !!} {!! !$request->has('per_page') ? 'selected' : '' !!}>10
                                            </option>
                                            <option value="50" {!! $request->has('per_page') && $request->per_page == '50' ? 'selected' : '' !!}>50</option>
                                            <option value="100" {!! $request->has('per_page') && $request->per_page == '100' ? 'selected' : '' !!}>100</option>
                                            <option value="{!! $referral_codes->total() !!}" {!! $request->has('per_page') && $request->per_page == $referral_codes->total() ? 'selected' : '' !!}>All</option>
                                        </select>
                                        <div class="entries">{!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}</div>
                                    </label>
                                </div>
                            @endif

                        </form>
                        <!--begin: Datatable-->
                        <table id="example" class="table table-bordered grid-table nowrap">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('message_lang.LBL_CODE') }}</th>
                                    <th>{{ __('message_lang.LBL_COUNTRY') }}</th>
                                    <th>{{ __('message_lang.LBL_NAME') }}</th>
                                    <th>{{ __('message_lang.LBL_EMAIL') }}</th>
                                    <th>{{ __('message_lang.LBL_PHONE_NUMBER') }}</th>
                                    <th>{{ __('message_lang.LBL_STATUS') }}</th>
                                    <th>{{ __('message_lang.LBL_ACTIONS') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($referral_codes as $key => $referral_code)
                                    <tr>
                                        <td>{!! $key + 1 !!}</td>
                                        <td>{!! $referral_code->code !!}</td>
                                        <td>{!! $referral_code->country_code !!}</td>
                                        <td>{!! $referral_code->name !!}</td>
                                        <td>{!! $referral_code->email !!}</td>
                                        <td>{!! $referral_code->phone !!}</td>
                                        <td>{!! $referral_code->status ? 'Active' : 'InActive' !!}</td>
                                        <td><a href="{!! url('agentportal/referral_codes/' . $referral_code->id . '/edit') !!}" class="btn btn-info">Edit</a></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td valign="top" colspan="10" style="text-align: center">
                                            {!! trans('message_lang.DATATABLE_LBL_NO_DATA_AVAILABLE') !!}</td>
                                    </tr>
                                @endforelse
                        </table>
                        <!--end: Datatable-->
                    </div>
                    <div class="card-footer">
                        @if ($referral_codes)
                            <div class="pagination">
                                <div class="left-info">
                                    <span>
                                        {!! trans('message_lang.DATATABLE_LBL_SHOWING_INFO') !!} {!! $referral_codes->firstItem() !!} {!! trans('message_lang.DATATABLE_LBL_TO') !!}
                                        {!! $referral_codes->lastItem() !!} {!! trans('message_lang.DATATABLE_LBL_OF') !!} {!! $referral_codes->total() !!}
                                        {!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}
                                    </span>
                                </div>
                                <div class="right-info">
                                    {!! $referral_codes->appends(request()->query())->links() !!}
                                </div>
                            </div>
                        @endif
                    </div>

                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Entry-->
    </div>
@endsection

@section('page_script')
    <script type="text/javascript">
        jQuery(document).on("click", ".page-link", function(e) {
            e.preventDefault();
            const params = new URL(jQuery(this).attr('href')).searchParams;
            jQuery("#page").val(params.get('page'));
            jQuery("#filterForm").submit();
        });

        jQuery("#perPage").on("change", function() {
            jQuery("#filterForm").submit();
        });
    </script>
@endsection