@extends('layouts.master')
@section('title',trans('gateways'))
@section('header')

@endsection
@section('main')
    <section id="dashboard-analytics">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">{{trans('gateways')}}</h4>
                        <a href="javascript:void(0)" data-toggle="modal" data-target="#createGatewayModal"
                           class="btn btn-flat-success">
                            {{trans('create gateway')}}
                            <i class="fa fa-plus-circle"></i>
                        </a>
                    </div>
                    <div class="card-content">
                        <div class="table-responsive mt-1">
                            <table class="table table-hover-animation mb-0">
                                <thead>
                                <tr>
                                    <th>{{trans('id')}}</th>
                                    <th>{{trans('title')}}</th>
                                    <th>{{trans('api token')}}</th>
                                    <th>{{trans('website')}}</th>
                                    <th>{{trans('ip')}}</th>
                                    <th>{{trans('active')}}</th>
                                    <th>{{trans('created at')}}</th>
                                    <th>{{trans('currencies')}}</th>
                                    <th>{{trans('action')}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($gateways as $gateway)
                                    <tr>
                                        <td>#{{$gateway->id}}</td>
                                        <td>
                                        <span class="badge badge-dark round">
                                            <i class="fa fa-circle font-small-3 text-success"></i>
                                            {{$gateway->title}}
                                        </span>
                                        </td>
                                        <td class="p-1">
                                            {{str_pad(Str::limit($gateway->api_token,10,""),20,'****',STR_PAD_RIGHT)}}
                                            <i class="fa fa-copy font-small-3 text-success cursor-pointer"
                                               onclick="copyToClipboard(`{{$gateway->api_token}}`)"></i>
                                        </td>
                                        <td>{{$gateway->site}}</td>
                                        <td>{{$gateway->ip}}</td>
                                        <td>{{$gateway->active}}</td>
                                        <td>{{$gateway->created_at}}</td>
                                        <td>
                                            @foreach($currencies as $currency)
                                                <div class="clearfix">
                                                    <input type="checkbox" id="{{$currency->symbol}}"
                                                           value="{{$currency->id}}" name="currencies[]"
                                                        {{$gateway->currencies->contains($currency->id) ? 'checked' : ''}}>
                                                    <label
                                                        for="{{$currency->symbol}}">{{$currency->symbol}}</label>
                                                </div>
                                            @endforeach
                                        </td>
                                        <td>
                                            <div class="btn-group-sm">
                                                <a id="editBtn" href="javascript:void(0)"
                                                   class="btn btn-info"
                                                   data-toggle="modal"
                                                   data-target="#editGatewayModal"
                                                   data-target="#editGatewayModal"
                                                   data-id="{{$gateway->id}}"
                                                   data-title="{{$gateway->title}}"
                                                   data-site="{{$gateway->site}}"
                                                   data-ip="{{$gateway->ip}}"
                                                   data-percent="{{$gateway->percent}}"
                                                   data-bonus="{{$gateway->bonus}}"
                                                >{{trans('edit')}}</a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal" id="createGatewayModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form action="{{route('panel.gateway.store')}}" method="post">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{trans('create gateway')}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">{{trans('title')}}</label>
                            <input type="text" name="title" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="site">{{trans('website')}}</label>
                            <input type="text" name="site" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="ip">{{trans('ip')}}</label>
                            <input type="text" name="ip" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="percent">{{trans('percent')}}</label>
                            <input type="text" name="percent" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="bonus">{{trans('bonus')}}</label>
                            <input type="text" name="bonus" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="{{trans('save')}}">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('close')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal" id="editGatewayModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form id="editForm" action="" method="post">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{trans('edit')}} <span id="title"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">{{trans('title')}}</label>
                            <input type="text" name="title" id="titleInput" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="site">{{trans('website')}}</label>
                            <input type="text" name="site" id="siteInput" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="ip">{{trans('ip')}}</label>
                            <input type="text" name="ip" id="ipInput" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="percent">{{trans('percent')}}</label>
                            <input type="text" name="percent" id="percentInput" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="bonus">{{trans('bonus')}}</label>
                            <input type="text" name="bonus" id="bonusInput" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="{{trans('save')}}">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('close')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('footer')
    <script>
        $(document).on("click", "#editBtn", function () {
            var id = $(this).data('id');
            var title = $(this).data('title');
            var site = $(this).data('site');
            var ip = $(this).data('ip');
            var percent = $(this).data('percent');
            var bonus = $(this).data('bonus');

            $("#titleInput").val(title);
            $("#siteInput").val(site);
            $("#ipInput").val(ip);
            $("#percentInput").val(percent);
            $("#bonusInput").val(bonus);

            var url = `/panel/gateways/update/${id}`
            $('#editForm').attr('action', url)
        });
    </script>
@endsection