@extends('layouts.cdb')

@section('content')
    <div class="nk-block-head nk-block-head-sm">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h3 class="nk-block-title page-title">Create Parent Customer</h3>
            </div><!-- .nk-block-head-content -->
        </div>
    </div>
    <form action="{{ url('cdbcompany/store') }}" method="POST">
        @csrf
            <div class="nk-block">
                <div class="card card-bordered sp-plan">
                    <div class="card-body">

                    <div class="row g-4">
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label class="form-label" for="workshopName">Source</label>
                                <span class="form-note">Select source</span>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="g-3 align-center">
                                <div class="g">
                                    <div class="custom-control custom-control-sm custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="usob" name="usob">
                                        <label class="custom-control-label" for="usob">USOB</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4">
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label class="form-label" for="companyName">Parent Customer Name<span class="text-danger">*</span></label>
                                <span class="form-note">Enter the parent customer name</span>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="form-group"> 
                                <div class="form-control-wrap">
                                    <input type="text" class="form-control" id="companyName" name="company_name" placeholder="Enter Parent Customer Name" 
                                     pattern="^(?! )(?!.*  )(?!.* $).+$" title="Only letters and spaces are allowed" maxlength="50" autocomplete="off"
                                    required/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4">
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label class="form-label" for="companyAddress">Parent Customer Address<span class="text-danger">*</span></label>
                                <span class="form-note">Enter the parent customer address </span>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="form-group"> 
                                <div class="form-control-wrap">
                                    <input type="text" class="form-control" id="companyAddress" maxlength="150" pattern="^(?! )(?!.*  )(?!.* $).+$" name="company_address" placeholder="Enter Parent Customer Address" required/>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="nk-block mb-3 submit_div">
            <div class="row">
                <div class="col-md-12">
                    <div class="sp-plan-info pt-0 pb-0 card-inner">  
                        <div class="row">
                            <div class="col-lg-7 text-right offset-lg-5">
                                <div class="form-group">
                                    <a href="javascript:history.back()" class="btn btn-outline-light">Cancel</a>
                                    <input type="submit" name="submit" value="Add" class="btn btn-primary" />
                                </div>
                            </div>
                        </div>
                    </div><!-- .sp-plan-info -->
                </div><!-- .col -->
            </div><!-- .row -->
        </div>

</form>
@endsection
@push('footerScripts')
    <script type="text/javascript">
        document.getElementById('companyName').addEventListener('input', function (e) {
            let value = e.target.value;
            value = value.replace(/^\s+/, '');
            value = value.replace(/\s{2,}/g, ' ');
            e.target.value = value;
        });
        document.getElementById('companyAddress').addEventListener('input', function (e) {
            let value = e.target.value;
            value = value.replace(/^\s+/, '');
            value = value.replace(/\s{2,}/g, ' ');
            e.target.value = value;
        });
    </script>
@endpush