@extends('reseller.layouts.master')

@section('page_title')
    Profile
@endsection

@push('styles')
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
    <link rel="stylesheet" href="{{asset('assets/examples/css/pages/profile.min3f0d.css?v2.2.0')}}">
@endpush

@section('page_content')
    <div class="page-content container-fluid" style="color:#000;">
        <div class="row">
            <div class="col-md-12">
                <div class="panel">
                    <div class="panel-body nav-tabs-animate nav-tabs-horizontal">
                        <form method="post" enctype="multipart/form-data" class="registration lato">
                            @if(count($errors)>0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>
                                                {{$error}}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @if(session('success'))
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{{ session('success') }}</li>
                                    </ul>
                                </div>
                            @endif

                            {{csrf_field()}}
                            <h3>
                                Client Registration
                            </h3>
                            <hr>

                            <div class="form-group col-md-12 text-center">
                                <label for="inputEmail4"><strong>Register As <em class="text-danger">*</em></strong></label>
                                <div class="row">
                                    <div class="col-md-4 col-md-offset-4">
                                        @php $var = old('register_as') @endphp
                                        <select class="form-control" required name="register_as">
                                            <option></option>
                                            <option value="user" {{$var == 'user' ? 'selected' : 'selected'}}>Client</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="inputEmail4">Name Of Company <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control"  value="{{old('name')}}" name="name" placeholder="" required>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="inputEmail4">Date of Incorporation <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control pick-me"  value="{{old('date_of_incorporation')}}" name="date_of_incorporation" placeholder="" required>
                                    </div>


                                    <div class="form-group col-md-6">
                                        <label for="legal_status">Legal Status <em class="text-danger">*</em></label>
                                        @php $var = old('legal_status') @endphp
                                        <select class="form-control" required name="legal_status" id="legal_status">
                                            <option></option>
                                            <option value="LCA/MNO" {{$var == 'LCA/MNO' ? 'selected' : ''}}>LCA/MNO</option>
                                            <option value="SME" {{$var == 'SME' ? 'selected' : ''}}>SME</option>
                                            <option value="PUBLIC" {{$var == 'PUBLIC' ? 'selected' : ''}}>PUBLIC</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="inputAddress">Nature Of Business <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control"  value="{{old('nature_of_business')}}" name="nature_of_business" placeholder="nature_of_business" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-row">


                                    <div class="form-group col-md-6">
                                        <label for="inputAddress2">Postal Address <em class="text-danger"></em></label>
                                        <input type="text" class="form-control" value="{{old('postal_address')}}" name="postal_address" placeholder="postal_address">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="inputCity">Business Address <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control" value="{{old('physical_address')}}" name="physical_address" maxlength="15" placeholder="Business Address" required>
                                    </div>



                                    <div class="form-group col-md-6">
                                        <label for="inputState">Company Phone number <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control company-phone" name="company_phone_number" value="{{old('company_phone_number')}}" placeholder="Company Phone number" required>
                                        <span class="badge badge-danger company-alert"></span>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="inputAddress2">Location In Other Countries <em class="text-danger"></em></label>
                                        <textarea class="form-control" name="location_in_other_countries" rows="2">{{old('location_in_other_countries')}}</textarea>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="mobile_money_number">Mobile Money Number <em class="text-danger">*</em></label>
                                        <input  id="mobile_money_number" type="text" class="form-control " name="mobile_money_number" value="{{old('mobile_money_number')}}" placeholder="Mobile Money Number" required>
                                        <span class="text-danger" id="mm-phone"><i>For credit purchasing</i></span>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="inputState">Website Url <em class="text-danger"></em></label>
                                        <input  id="inputState" type="text" class="form-control " name="website_url" value="{{old('website_url')}}" placeholder="Company Website url">
                                        <span>i.e www.abc.com</span>
                                    </div>
                                </div>
                            </div>



                            <h4>Documents <em class="text-danger"></em></h4>
                            <hr>

                            <div class="row">
                                <div class="form-row">
                                    <div class="form-group">
                                        <div class="form-group col-md-6">
                                            <label for="inputState">Business Registration Document   <em class="text-danger"></em></label>
                                            <input type="file" class="form-control"  name="business_document">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="form-group col-md-6">
                                            <label for="inputState">Sender ID Letter Head   <em class="text-danger"></em></label>
                                            <input type="file" class="form-control"  name="sender_id_document">
                                        </div>
                                    </div>
                                </div>
                            </div>


{{--                            <hr>--}}
{{--                            <h4>Add Sender IDs <em class="text-danger">*</em></h4>--}}
{{--                            <div class="row">--}}
{{--                                <div class="form-row">--}}
{{--                                    <div class="form-group col-md-12">--}}
{{--                                        <div id="sender-ids">--}}
{{--                                        </div>--}}
{{--                                        <input type="hidden" id="sender_ids" name="sender_ids" value="{{ old('sender_ids') }}" />--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}


                            <h4>Contact Person Information <em class="text-danger">*</em></h4>
                            <hr>

                            <div class="row">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="inputState">Name   <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control" value="{{old('contact_person')}}" name="contact_person" placeholder="Contact Person's name">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="inputState">Designation  <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control" value="{{old('contact_person_designation')}}" name="contact_person_designation" placeholder="Designation">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="inputState">Phone Number <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control con-phone" value="{{old('contact_person_phone')}}" name="contact_person_phone" placeholder="Contact Person's phone" required>
                                        <span class="badge badge-danger contact-phone"></span>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="inputState">Email  <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control email" value="{{old('contact_person_email')}}" name="contact_person_email" placeholder="Contact Person's email" required>
                                        <span class="badge badge-danger email-alert"></span>
                                    </div>
                                    <div class="form-group col-md-6">
                                         <label for="inputState">ID  (voters/driver’s license,SSNIT,Passport,NHIS)<em class="text-danger"></em></label>
                                        <input type="file" class="form-control email" value="{{old('contact_person_id')}}" name="contact_person_id" placeholder="Contact Person  Id">
                                    </div>
                                </div>
                            </div>
                            <hr>
{{--                            <h4>Name of Directors <em class="text-danger">*</em></h4>--}}
{{--                            <em class="text-danger">* Minimum of one director</em>--}}
{{--                            <div class="row">--}}
{{--                                <div class="form-row">--}}
{{--                                    <div class="form-group col-md-12">--}}
{{--                                        <div id="directors">--}}
{{--                                        </div>--}}
{{--                                        <input type="hidden" id="items" name="items" value="{{ old('items') }}" />--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}

                            <div class="form-row text-center">
                                <div class="col-md-12">
                                    <button type="submit" id="" class="btn btn-primary" style="background-color: #ffcb05; color: #000;"><i class="fa fa-plus-circle"></i> Register</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
    <script>


        $("#directors").jsGrid({
            width: "100%",
            height: "250px",

            inserting: true,
            editing: true,
            sorting: true,
            paging: true,

            data: [],

            fields: [
                { name: "Name", type: "text", width: 50, validate: "required" },
                { name: "Designation", type: "text", width: 50 },
                { type: "control" }
            ]
        });

        $("#sender-ids").jsGrid({
            width: "100%",
            height: "250px",

            inserting: true,
            editing: true,
            sorting: true,
            paging: true,

            data: [],

            fields: [
                { name: "Name", type: "text", width: 50, validate: "required",  _createTextBox: function() {
                        var $input = jsGrid.fields.text.prototype._createTextBox.call(this);
                        return $input.attr("maxlength", 11);
                    }},
                { type: "control" }
            ]
        });

        $('.registration').on('submit', function() {
            grid = $("#directors").jsGrid("option", "data");
            grid2 = $("#sender-ids").jsGrid("option", "data");
            $('#items').val(JSON.stringify(grid));
            $('#sender_ids').val(JSON.stringify(grid2));
        });



        $(".email").keyup(function() {

            let value = $(this).val();
            let contents =  value.indexOf('@');

            if(contents === -1)
            {
                $('.email-alert').html('Please enter a valid email');
            }
            else {
                $('.email-alert').html("");
            }

        });

        $('.company-phone').keyup(function () {
            let value = $(this).val();
            let count = value.length;
            let contents =  $.isNumeric(value);

            if(contents && count > 9)
            {
                $('.company-alert').html('');
            }
            else {
                $('.company-alert').html('Please enter a valid phone number');
            }




        });

        $('.con-phone').keyup(function () {
            let value = $(this).val();
            let count = value.length;
            let contents =  $.isNumeric(value);
            console.log(count);

            if(contents && count > 9)
            {
                $('.contact-phone').html('');
            }
            else {
                $('.contact-phone').html('Please enter a valid phone number');
            }

        });

        $('#mobile_money_number').keyup(function () {
            let value = $(this).val();
            let count = value.length;
            let contents =  $.isNumeric(value);
            console.log(count);

            if(contents && count > 9)
            {
                $('#mm-phone').html('');
            }
            else {
                $('#mm-phone').html('Please enter a valid phone number');
            }

        });
    </script>
@endpush