@extends('admin.adminpanel')

@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">
                </div><!-- /.col -->
                <div class="col-sm-6 float-right">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Register Clients</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->



    {{-- Displaying popup messages saying if the client was registered successfully or not --}}
    <div class="container mt-4">
        @if(session('success'))
          <div class="alert alert-success">
            {{ session('success') }}
          </div>
        @elseif (session('failure'))
          <div class="alert alert-danger">
            {{ session('failure') }}
          </div>
        @endif
    </div>


    {{-- Fetching validation errors, if any and create a popup container specifying the errors --}}
    <div class="row justify-content-center">
        @if ($errors->any())
            <div class="col-8 mb-5 card card-danger">
                <div class="card-header text-center bg-danger">
                    OOPS!<br>WE RAN INTO SOME VALIDATION ERRORS<br>
                </div>
                <div class="card-body bg-light">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>
                                {{ $error }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
    </div>
    <style type="text/css">
        .card-header .title {
            font-size: 17px;
            color: #000;
            font-weight: bold;
        }
        .card-header .accicon {
          float: right;
          font-size: 20px;  
          width: 1.2em;
        }
        .card-header{
          cursor: pointer;
          border-bottom: none;
        }
        .card{
          border: 1px solid #ddd;
        }
        .card-body{
          border-top: 1px solid #ddd;
        }
        .card-header:not(.collapsed) .rotate-icon {
          transform: rotate(180deg);
        }
        }
    </style>
    
    <div class="row justify-content-center">
        <div class="col-10 register-box mb-5">
            <div class="card card-primary">
                <div class="card-header text-center bg-purple">
                    <p class="login-box-msg"><h4><b>Register a new client</b></h4></p>
                </div>
                <div class="card-body">
                    <form class="frm-submit" action="{{ url('store_client_details') }}" method="POST">
                    @csrf
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">     
                                <span class="title">1. Basic Details </span>
                                <span class="accicon"><i class="fas fa-angle-down rotate-icon"></i></span>
                            </div>
                            <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group mb-3 col-6">
                                            <label for="client_name" class="control-label">Client Name</label>
                                            <input type="text" name="client_name" value="{{ old('client_name') }}" class="form-control frm-inp" placeholder="Client name" required>
                                            <span class="help-block text-danger" style="display: none;">Please enter valid client name</span>
                                        </div>

                                        <div class="form-group mb-3 col-6">
                                            <label for="" class="control-label">Type of Organization</label>
                                            <select class="form-control select2 mb-3" name="type_of_org" style="width: 100%;">
                                                <option selected value="{{ old('type_of_org') }}">Select type of organisation</option>
                                                <option value="AOP">AOP</option>
                                                <option value="BOI">BOI</option>
                                                <option value="BR. OFF FOREIGN ENTITY">BR. OFF FOREIGN ENTITY</option>
                                                <option value="HUF">HUF</option>
                                                <option value="INDIVIDUAL">INDIVIDUAL</option>
                                                <option value="Proprietership">Proprietership</option>
                                                <option value="Partnership">Partnership Firm</option>
                                                <option value="LLP">LLP</option>
                                                <option value="Private Ltd">Private Ltd</option>
                                                <option value="Public Ltd">Public Ltd</option>
                                                <option value="Society">Society</option>
                                                <option value="Banks">Banks</option>
                                                <option value="Trusts">Trusts</option>
                                                <option value="Others">Others</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="" class="control-label">Registered address</label>
                                        <input type="text" class="form-control frm-inp" id="registered_address_input" name="registered_address" value="{{ old('registered_address') }}" placeholder="Registered address" required>                            
                                    </div>
                                    <div>
                                        <span>
                                            <p style="color: indigo;">
                                                **Check mark if billing address is same as registered address**
                                            </p>
                                        </span>
                                    </div>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control frm-inp" id="billing_address_input" name="billing_address" value="{{ old('billing_address') }}" placeholder="Billing address" required>
                                        <div class="input-group-append">
                                            <div class="input-group-text">
                                                <input type="checkbox" id="billing_address_check">
                                            </div>                                
                                        </div>
                                        <span class="help-block text-danger" style="display: none; width: 100%;">Please enter billing address</span> 
                                    </div>
                                    <div class="row">
                                    <div class="input-group mb-3">
                                                <select class="form-control frm-inp" id="client_state_code" name="client_state_code" required>
                                                    <option value="">Select state</option>
                                                </select>
                                    </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter State Code</span>

                                      <!--  <div class="form-group mb-3 col-6">
                                            <label for="" class="control-label">State</label>
                                            <input type="text" class="form-control" name="state" value="{{ old('state') }}" placeholder="state">                            
                                        </div>
    -->
                                        <div class="form-group mb-3">
                                            <label for="" class="control-label">Country</label>
                                            <input type="text" class="form-control" name="country" value="{{ old('country') }}" placeholder="country">                            
                                        </div>
                                    </div>                                   
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false">     
                                    <span class="title">2. Statutory Details</span>
                                    <span class="accicon"><i class="fas fa-angle-down rotate-icon"></i></span>
                            </div>
                            <div id="collapseTwo" class="collapse" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group mb-3 col-4">
                                            <label for="" class="control-label">PAN</label>
                                            <input type="text" class="form-control frm-pan" name="pan" value="{{ old('pan') }}" placeholder="PAN">
                                            <span class="help-block text-danger" style="display: none;">Please enter valid PAN of 10 characters</span>                            
                                        </div>
                                        <div class="form-group mb-3 col-4">
                                            <label for="" class="control-label">Company/CIN/LLPIN</label>
                                            <input type="text" class="form-control" name="company_in" value="{{ old('company_in') }}" placeholder="Company/CIN/LLPIN">                            
                                        </div>
                                        <div class="form-group mb-3 col-4">
                                            <label for="" class="control-label">DOI/DOB</label>
                                            <input type="date" class="form-control frm-inp" name="doi_dob" value="{{ old('doi_dob') }}" placeholder="DOI/DOB" required> 
                                            <span class="help-block text-danger" style="display: none;">Please enter valid DOI/DOB</span>                          
                                        </div>
                                    </div>
                                    <div>
                                        <span>
                                            <p style="color: indigo;">
                                                **TAN and GSTIN are not mandatory**
                                            </p>
                                        </span>
                                    </div>
                                    <div class="row">
                                        <div class="form-group mb-3 col-6">
                                            <label for="" class="control-label">TAN</label>
                                            <input type="text" class="form-control" name="tan" value="{{ old('tan') }}" placeholder="TAN">                            
                                        </div>

                                        <div class="form-group mb-3 col-6">
                                            <label for="" class="control-label">GSTIN</label>
                                            <input type="text" class="form-control gstin" name="gstin" value="{{ old('gstin') }}" placeholder="GSTIN">
                                            <span class="help-block text-danger" style="display: none;">Please enter valid GSTIN of 15 characters</span>
                                        </div>
                                    </div>                        
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true">     
                                <span class="title">3. Personal Details </span>
                                <span class="accicon"><i class="fas fa-angle-down rotate-icon"></i></span>
                            </div>
                            <div id="collapseThree" class="collapse" data-parent="#accordionExample">
                                <div class="card-body">
                                   <div class="form-group mb-3">
                                        <label for="" class="control-label">Contact Person Name</label>
                                        <input type="text" class="form-control frm-inp" name="cp_name" value="{{ old('cp_name') }}" placeholder="Contact person name" required>
                                        <span class="help-block text-danger" style="display: none;">Please enter name</span> 
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                    <div class="form-group" style="margin-bottom: 0px;">
                                        <label for="" class="control-label">Contact Person Phone</label>
                                    </div>
                                    <div class="input-group mb-3">                            
                                        <select class="form-select" id="phone" name="cp_ph_code">
                                            <option value="91">+91</option>
                                            <option value="93">+93</option>
                                            <option value="358">+358</option>
                                            <option value="355">+355</option>
                                            <option value="213">+213</option>
                                            <option value="1684">+1684</option>
                                            <option value="376">+376</option>
                                            <option value="244">+244</option>
                                            <option value="1264">+1264</option>
                                            <option value="672">+672</option>
                                            <option value="1268">+1268</option>
                                            <option value="54">+54</option>
                                            <option value="374">+374</option>
                                            <option value="297">+297</option>
                                            <option value="61">+61</option>
                                            <option value="43">+43</option>
                                            <option value="994">+994</option>
                                            <option value="1242">+1242</option>
                                            <option value="973">+973</option>
                                            <option value="880">+880</option>
                                            <option value="1246">+1246</option>
                                            <option value="375">+375</option>
                                            <option value="32">+32</option>
                                            <option value="501">+501</option>
                                            <option value="229">+229</option>
                                            <option value="1441">+1441</option>
                                            <option value="975">+975</option>
                                            <option value="591">+591</option>
                                            <option value="599">+599</option>
                                            <option value="387">+387</option>
                                            <option value="267">+267</option>
                                            <option value="55">+55</option>
                                            <option value="55">+55</option>
                                            <option value="246">+246</option>
                                            <option value="673">+673</option>
                                            <option value="359">+359</option>
                                            <option value="226">+226</option>
                                            <option value="257">+257</option>
                                            <option value="855">+855</option>
                                            <option value="237">+237</option>
                                            <option value="1">+1</option>
                                            <option value="238">+238</option>
                                            <option value="1345">+1345</option>
                                            <option value="236">+236</option>
                                            <option value="235">+235</option>
                                            <option value="56">+56</option>
                                            <option value="86">+86</option>
                                            <option value="61">+61</option>
                                            <option value="672">+672</option>
                                            <option value="57">+57</option>
                                            <option value="269">+269</option>
                                            <option value="242">+242</option>
                                            <option value="242">+242</option>
                                            <option value="682">+682</option>
                                            <option value="506">+506</option>
                                            <option value="225">+225</option>
                                            <option value="385">+385</option>
                                            <option value="53">+53</option>
                                            <option value="599">+599</option>
                                            <option value="357">+357</option>
                                            <option value="420">+420</option>
                                            <option value="45">+45</option>
                                            <option value="253">+253</option>
                                            <option value="1767">+1767</option>
                                            <option value="1809">+1809</option>
                                            <option value="593">+593</option>
                                            <option value="20">+20</option>
                                            <option value="503">+503</option>
                                            <option value="240">+240</option>
                                            <option value="291">+291</option>
                                            <option value="372">+372</option>
                                            <option value="251">+251</option>
                                            <option value="500">+500</option>
                                            <option value="298">+298</option>
                                            <option value="679">+679</option>
                                            <option value="358">+358</option>
                                            <option value="33">+33</option>
                                            <option value="594">+594</option>
                                            <option value="689">+689</option>
                                            <option value="262">+262</option>
                                            <option value="241">+241</option>
                                            <option value="220">+220</option>
                                            <option value="995">+995</option>
                                            <option value="49">+49</option>
                                            <option value="233">+233</option>
                                            <option value="350">+350</option>
                                            <option value="30">+30</option>
                                            <option value="299">+299</option>
                                            <option value="1473">+1473</option>
                                            <option value="590">+590</option>
                                            <option value="1671">+1671</option>
                                            <option value="502">+502</option>
                                            <option value="44">+44</option>
                                            <option value="224">+224</option>
                                            <option value="245">+245</option>
                                            <option value="592">+592</option>
                                            <option value="509">+509</option>
                                            <option value="39">+39</option>
                                            <option value="504">+504</option>
                                            <option value="852">+852</option>
                                            <option value="36">+36</option>
                                            <option value="354">+354</option>
                                            <option value="62">+62</option>
                                            <option value="98">+98</option>
                                            <option value="964">+964</option>
                                            <option value="353">+353</option>
                                            <option value="44">+44</option>
                                            <option value="972">+972</option>
                                            <option value="39">+39</option>
                                            <option value="1876">+1876</option>
                                            <option value="81">+81</option>
                                            <option value="44">+44</option>
                                            <option value="962">+962</option>
                                            <option value="7">+7</option>
                                            <option value="254">+254</option>
                                            <option value="686">+686</option>
                                            <option value="850">+850</option>
                                            <option value="82">+82</option>
                                            <option value="381">+383</option>
                                            <option value="965">+965</option>
                                            <option value="996">+996</option>
                                            <option value="856">+856</option>
                                            <option value="371">+371</option>
                                            <option value="961">+961</option>
                                            <option value="266">+266</option>
                                            <option value="231">+231</option>
                                            <option value="218">+218</option>
                                            <option value="423">+423</option>
                                            <option value="370">+370</option>
                                            <option value="352">+352</option>
                                            <option value="853">+853</option>
                                            <option value="389">+389</option>
                                            <option value="261">+261</option>
                                            <option value="265">+265</option>
                                            <option value="60">+60</option>
                                            <option value="960">+960</option>
                                            <option value="223">+223</option>
                                            <option value="356">+356</option>
                                            <option value="692">+692</option>
                                            <option value="596">+596</option>
                                            <option value="222">+222</option>
                                            <option value="230">+230</option>
                                            <option value="262">+262</option>
                                            <option value="52">+52</option>
                                            <option value="691">+691</option>
                                            <option value="373">+373</option>
                                            <option value="377">+377</option>
                                            <option value="976">+976</option>
                                            <option value="382">+382</option>
                                            <option value="1664">+1664</option>
                                            <option value="212">+212</option>
                                            <option value="258">+258</option>
                                            <option value="95">+95</option>
                                            <option value="264">+264</option>
                                            <option value="674">+674</option>
                                            <option value="977">+977</option>
                                            <option value="31">+31</option>
                                            <option value="599">+599</option>
                                            <option value="687">+687</option>
                                            <option value="64">+64</option>
                                            <option value="505">+505</option>
                                            <option value="227">+227</option>
                                            <option value="234">+234</option>
                                            <option value="683">+683</option>
                                            <option value="672">+672</option>
                                            <option value="1670">+1670</option>
                                            <option value="47">+47</option>
                                            <option value="968">+968</option>
                                            <option value="92">+92</option>
                                            <option value="680">+680</option>
                                            <option value="970">+970</option>
                                            <option value="507">+507</option>
                                            <option value="675">+675</option>
                                            <option value="595">+595</option>
                                            <option value="51">+51</option>
                                            <option value="63">+63</option>
                                            <option value="64">+64</option>
                                            <option value="48">+48</option>
                                            <option value="351">+351</option>
                                            <option value="1787">+1787</option>
                                            <option value="974">+974</option>
                                            <option value="262">+262</option>
                                            <option value="40">+40</option>
                                            <option value="7">+7</option>
                                            <option value="250">+250</option>
                                            <option value="590">+590</option>
                                            <option value="290">+290</option>
                                            <option value="1869">+1869</option>
                                            <option value="1758">+1758</option>
                                            <option value="590">+590</option>
                                            <option value="508">+508</option>
                                            <option value="1784">+1784</option>
                                            <option value="684">+684</option>
                                            <option value="378">+378</option>
                                            <option value="239">+239</option>
                                            <option value="966">+966</option>
                                            <option value="221">+221</option>
                                            <option value="381">+381</option>
                                            <option value="381">+381</option>
                                            <option value="248">+248</option>
                                            <option value="232">+232</option>
                                            <option value="65">+65</option>
                                            <option value="721">+721</option>
                                            <option value="421">+421</option>
                                            <option value="386">+386</option>
                                            <option value="677">+677</option>
                                            <option value="252">+252</option>
                                            <option value="27">+27</option>
                                            <option value="500">+500</option>
                                            <option value="211">+211</option>
                                            <option value="34">+34</option>
                                            <option value="94">+94</option>
                                            <option value="249">+249</option>
                                            <option value="597">+597</option>
                                            <option value="47">+47</option>
                                            <option value="268">+268</option>
                                            <option value="46">+46</option>
                                            <option value="41">+41</option>
                                            <option value="963">+963</option>
                                            <option value="886">+886</option>
                                            <option value="992">+992</option>
                                            <option value="255">+255</option>
                                            <option value="66">+66</option>
                                            <option value="670">+670</option>
                                            <option value="228">+228</option>
                                            <option value="690">+690</option>
                                            <option value="676">+676</option>
                                            <option value="1868">+1868</option>
                                            <option value="216">+216</option>
                                            <option value="90">+90</option>
                                            <option value="7370">+7370</option>
                                            <option value="1649">+1649</option>
                                            <option value="688">+688</option>
                                            <option value="256">+256</option>
                                            <option value="380">+380</option>
                                            <option value="971">+971</option>
                                            <option value="44">+44</option>
                                            <option value="1">+1</option>
                                            <option value="1">+1</option>
                                            <option value="598">+598</option>
                                            <option value="998">+998</option>
                                            <option value="678">+678</option>
                                            <option value="58">+58</option>
                                            <option value="84">+84</option>
                                            <option value="1284">+1284</option>
                                            <option value="1340">+1340</option>
                                            <option value="681">+681</option>
                                            <option value="212">+212</option>
                                            <option value="967">+967</option>
                                            <option value="260">+260</option>
                                            <option value="263">+263</option>
                                        </select>
                                        <input type="text" class="form-control frm-phone" name="cp_phone" value="{{ old('cp_phone') }}" placeholder="Contact person phone number" required>
                                        <div class="input-group-append">
                                            <div class="input-group-text">
                                                <span class="fas fa-phone"></span>
                                            </div>
                                        </div>
                                        <span class="help-block text-danger" style="display: none; width:100%">Please enter valid phone no</span>
                                    </div>
                                    </div>
                                    <div class="form-group mb-3 col-6">
                                        <label for="" class="control-label">Contact Person Email</label>
                                        <input type="email" class="form-control frm-email" name="cp_email" value="{{ old('cp_email') }}" placeholder="Contact person email" required><br/>
                                        <span class="help-block text-danger" style="display: none;">Please enter valid email id</span>
                                    </div>
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-4">
                            <button type="submit" class="btn btn-lg btn-success frm-submit-btn" disabled>Register</button>
                        </div>
                        <!-- /.col -->
                    </div>
                    </form>

                </div>
                <!-- /.form-box -->
            </div><!-- /.card -->
        </div>
        <!-- /.register-box -->
    </div>
</div>

<script src="{{ asset('scripts/auto_billing_address.js') }}" defer></script>
 <!-- For State code combo  -->
 <script>
            document.addEventListener("DOMContentLoaded", function() {
                console.log('Page is fully loaded');
            
                fetch('{{ route('state.codes') }}')
                .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
                 })
                .then(stateData => {
                    
                    const selectElement = document.getElementById('client_state_code');
                    
                    stateData.data.forEach(state => {
                    const option = document.createElement('option');
                    option.value = state.state_code;
                    option.textContent = state.state_code + "-" +state.state_name;
                    selectElement.appendChild(option);
                });
                })
                .catch(error => {
                    alert("error");
                    console.error('Error fetching states:', error);
                });
             });
    </script>
@endsection