@extends('partials.main')
<!-- page title -->
@section('title')
Add Client
@endsection
​
@section('content')
​
<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('client_list') }}">Client list</a>
            </li>
            <li class="breadcrumb-item active">Add Client</li>
        </ol>
    </nav>
</div>
<!-- breadcrumb -->
​
<!-- Forms -->
<div class="row mx-auto">
    <div class="card card-body pd-20 pd-md-40  shadow-none">
        <div class="main-content-label text-center mg-b-5">
            Register Client
        </div>

        <form id="adduser">
            <div class="form-row">
                <div class="col-lg-6 form-group">
                    <label class="main-content-label tx-11 tx-medium tx-gray-600">First Name : <span
                            class="text-danger">
                            *</span></label>
                    <input class="form-control" name="first_name" required type="text" placeholder="Enter  first name">
                </div>
                ​
                <div class="col-lg-6 form-group">
                    <label class="main-content-label  tx-11 tx-medium tx-gray-600">last Name : *</label>
                    <input class="form-control" name="last_name" required type="text" placeholder="Enter  last name">
                </div>
                ​

                <div class="col-lg-6 form-group">
                    <label class="main-content-label tx-11 tx-medium tx-gray-600">For what position they are running
                        for? : <span class="text-danger">
                            *</span></label>
                    <select name="position_id" id="" required class="form-control">
                        <option value="" disabled selected>-- Please select position --</option>
                        @foreach($positions as $position)
                        <option value="{{$position->id}}">{{$position->position_name}} </option>
                        @endforeach
                    </select>
                </div>

                {{-- value=3 mean 3 is role id of client --}}
                <input type="hidden" name="role" value="3">

                <div class="col-lg-6 form-group">
                    <label class="main-content-label tx-11 tx-medium tx-gray-600">What is the magic number to win the
                        election? : <span class="text-danger">
                            *</span></label>
                    <input class="form-control" type="number" name="magic_number" required
                        placeholder="Enter magic number">
                    ​
                </div>
                <div class="col-lg-6 form-group">
                    <label class="main-content-label tx-11 tx-medium tx-gray-600">Email Address <span
                            class="text-danger">
                            *</span> :</label>
                    <input class="form-control" type="email" name="email" required placeholder="example@campaign.com">
                </div>
                <div class="col-lg-6 form-group">
                    <label class="main-content-label tx-11 tx-medium tx-gray-600">Select State? : <span
                            class="text-danger">
                            *</span></label>
                    <select name="state_id" id="" class="form-control" required>
                        <option value="" required disabled selected>-- Please select State --</option>
                        @foreach($states as $states)
                        <option value="{{$states->id}}">{{$states->name}} </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-6 form-group">
                    <label class="main-content-label tx-11 tx-medium tx-gray-600">Select Package? : <span
                            class="text-danger">
                            *</span></label>
                    <select name="package_name" id="" class="form-control" required>
                        <option value="" required disabled selected>-- Please Select Package --</option>
                        @foreach($stripePlan as $plan)
                            <option value="{{$plan->id."-".$plan->name}}">{{$plan->name}}</option>
                        @endforeach
                    </select>


                        <!-- <option value="diy">DIY</option>
                        <option value="fundraising">fundraising</option>
                        <option value="premium">Premium</option> -->
                </div>



            </div>
            <button class="btn btn-info justify-content-end" id="btnSubmit"> <i class="fa fa-spinner fa-spin"
                    style="display:none;"></i> Submit</button>
        </form>
    </div>
</div>


<script type="text/javascript">

$("#adduser").on('submit', (function(e) {

    e.preventDefault();

    $.ajax({

        url: "/api/register",

        type: "post",

        data: new FormData(this),

        dataType: "JSON",

        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },

        processData: false,

        contentType: false,

        cache: false,

        beforeSend: function() {

            $("#btnSubmit").attr('disabled', true);

            $(".fa-spin").css('display', 'inline-block');

        },

        complete: function() {

            $("#btnSubmit").attr('disabled', false);

            $(".fa-spin").css('display', 'none');

        },

        success: function(response) {

            console.log(response)

            if (response.status == "fail")
            {
                toastr.error('Failed', response.msg)
            }
            else if (response.status == "success")
            {
                toastr.success('Success', response.msg);
                $("#adduser")[0].reset();
                window.location.href = "{{route('client_list')}}";
            }
            else if (response.status == "server")
            {
                toastr.error('Warning', response.msg)
                $("#adduser")[0].reset();
            }
            else if (response.status == "deactive")
            {
                toastr.error('Not Allowed', response.msg)
                $("#adduser")[0].reset();
            }
        },

        error: function(error) {
            console.log(error);
        }

    });

}));

</script>
​
@endsection