@extends('layouts.master') 

@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">{{ trans('breadcrumbs.Register Player') }}</h1>
        </div>
        <!-- /.col -->
        <div class="col-sm-3"></div>
        <div class="col-sm-3">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item">{{ Breadcrumbs::render('Register Player') }}</li>
          </ol>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <section class="content">
    <div class="card" id="filterDiv">
      <div class="card-header">
        <h3 class="card-title">{{ trans('tournament.Register player into tournament') }}</h3>           
        <div class="col-md-6 card-primary card-form-1">
          <div class="card-body">
            <div class="form-col-1">
                {{ Form::label('tournament',  trans('tournament.Tournament'), ['class' => 'required'])}}
                {{ Form::select('tournament[]', $tournamentList, '', ['class' => 'form-control select2', 'id' => 'tournament', 'multiple' => 'multiple']) }}
                <span id="tournament-error" class="error-help-block"></span>
            </div>
            <div class="form-col-1">
                {{ Form::label('username', trans('tournament.Username'), ['class' => 'required']) }}
                {{ Form::textarea('username', '', ['id' => 'username', 'class' => 'form-control', 'rows' => 3, 'cols' => 40, 'onblur' => 'checkUser()']) }}
                <span id="username-error" class="error-help-block"></span>
            </div>
            <div class="form-col-1">
                <p style="color: #fd6e08;font-size: 14px;">{{ trans('tournament.Note') }}</p>
            </div>
            <div class="button_sec" id="form-buttons">
                <button class="btn btn-primary" id="form-submit">{{ trans('tournament.Give Promotional Ticket') }}</button>
                <button class="btn btn-default" id="form-clear">{{ trans('layout.Clear') }}</button>
            </div>
            <div class="button_sec" id="form-loader" style="display:none">
                <img style="height: 65px;width: 65px;" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
            </div>
            <br>
            <div class="button_sec" id="responseDetailDiv" style="font-size:14px">
            </div>
          </div>
        </div> 
      </div>
      <!-- /.card-body -->
    </div>

  </section>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
    $(document).on('change', '.form-control', function(){
        $(this).closest('div').find('.error-help-block').html('');
    });

    function checkUser(){
        var username = $("#username").val();
        if (username.length < 3) {
            $("#username-error").html('Enter valid username');
            return;
        }else{
            $("#username-error").html('');
        }

        var data = new FormData();
        data.append('username', username);
        data.append('_token', '{{ csrf_token() }}');

        $.ajax({
            type: 'POST',
            url: "{{ route('tournament.checkUserExist') }}",
            data: data,
            dataType: 'JSON',
            contentType: false,
            processData: false,
            beforeSend: function() {
                $("#form-submit").attr("disabled", true);
            },
            success: function(response) {
                var data = response.msg;
                var status = response.status;
                if (status == 200) {
                    $('#username').val(data);
                } else {
                    $('#username').val('');
                    $("#username-error").html(data);
                }
            },
            error: function() {
                swal("{{ trans('layout.Something went wrong') }}", {
                icon: "warning",
                });
            },
            complete: function() {
                $("#form-submit").attr("disabled", false);
            }
        });
    }

    function showErrorMessage(message){
        $('.error-help-block').html('');
        $.each(message, function(k, v) {
            $("#"+k+"-error").html(v);
        });
        return;
    }

    $(document).on('click', '#form-submit', function() {
        $('#responseDetailDiv').html('');

        var data = new FormData();
        data.append('tournament', $("#tournament").val());
        data.append('username', $("#username").val());
        data.append('_token', '{{ csrf_token() }}');

        $.ajax({
            type: 'POST',
            url: "{{ route('tournament.addUser') }}",
            data: data,
            dataType: 'JSON',
            contentType: false,
            processData: false,
            beforeSend: function() {
                $("#form-buttons").hide();
                $("#form-loader").show();
            },
            success: function(response) {
                var message = response.msg;
                var status = response.status;

                if (status == 422) {
                    showErrorMessage(message);
                    return;
                }
                if (status == 200) {
                    $('#responseDetailDiv').html(message);
                    // swal(message, {
                    //     icon: "success",
                    // });
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                }

                $('.error-help-block').html('');
                $('#form-clear').trigger('click');
            },
            error: function() {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#form-loader").hide();
                $("#form-buttons").show();
            }
        });
    });

    $(document).on('click', '#form-clear', function(e) {
        e.preventDefault();
        $('.error-help-block').html('');
        $('.select2').select2('destroy');
        
        $("#tournament").val('');
        $("#username").val('');

        $('.select2').select2({
            placeholder: "Select",
            allowClear: true
        });
    });
</script>
@stop