@extends('admin.adminpanel')

@section('content')
<style>
    .help-block{width: 100%;}

    .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);
        }
        
        .error-message {
            color: red;
            font-weight: bold;
            margin-top: 10px;
        }
    
</style>
<!-- Bootstrap CSS (optional) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for jQuery usage) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 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 Internal Companies</li>
                    </ol>

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    {{-- Displaying messages specifying registration is successfull or not --}}
    @if (session('success'))
    <div class="container mt-4">
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    </div>
    @elseif (session('failure'))
    <div class="container mt-4">
        <div class="alert alert-danger">
            {{ session('failure') }}
        </div>
    </div>
    @endif

    {{-- 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>

    <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 Internal Company</b></h4></p>
                </div>
                <div class="card-body">

                    <form class="frm-submit" action="{{ url('store_internal_company_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>
                                <!-- PAN Validation -->
                                <div id="pan-validation-error" class="alert alert-danger" style="display:none;"></div>
                                <div id="pan-validation-message" class="error-message"></div>

                                <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
                                    <div class="card-body">
                                    <div class="row">
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-pan" id="pan" name="pan" value="{{ old('pan') }}" placeholder="PAN" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-hashtag"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid PAN of 10 characters</span>
                                            </div>
                                            
                                            <div class="input-group mb-3 col-6">
                                                <select class="form-control frm-inp" id="state_code" name="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>
                                    </div>
                                    <div class="row">
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-inp" id="company_name" name="company_name" value="{{ old('company_name') }}" placeholder="Company Name" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-user"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter company name</span>
                                            </div>
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-inp" id="company_initials" name="company_initials" value="{{ old('company_initials') }}" placeholder="Company Initials 3 letters" maxlength="3" onkeydown="return /[a-zA-Z0-9]/i.test(event.key)" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-user"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter company initials</span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <select class="form-control select2 mb-3" id="type_of_org" name="type_of_org" style="width: 100%;">
                                                    <option value="">Select type of organisation</option>
                                                    <option value="Proprietership">Proprietership</option>
                                                    <option value="Partnership">Partnership</option>
                                                    <option value="LLP">LLP</option>
                                                    <option value="Private Ltd">Private Ltd</option>
                                                    <option value="Banks">Banks</option>
                                                    <option value="Schools & Trusts">Schools & Trusts</option>
                                                </select>
                                            </div>
                                        </div>

                                    

                                        <div class="row">
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control frm-inp" id="registered_address_input" name="registered_address" value="{{ old('registered_address') }}" placeholder="Registered address" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-location-arrow"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid address</span>
                                            </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 class="input-group-text">
                                                        <span>
                                                            <span class="fas fa-location-arrow"></span>
                                                        </span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid billing address</span>
                                            </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>
                                            <span>
                                                <p style="color: indigo;">
                                                    **TAN and GSTIN are not mandatory**
                                                </p>
                                            </span>
                                        </div>
                                        <div class="row">
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control" id="tan" name="tan" value="{{ old('tan') }}" placeholder="TAN">
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-hashtag"></span>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control gstin" id="gstin" name="gstin" value="{{ old('gstin') }}" placeholder="GSTIN">
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-hashtag"></span>
                                                    </div>
                                                </div>
                                                <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="input-group mb-3">
                                            <input type="text" class="form-control frm-inp" id="cp_name"  name="cp_name" value="{{ old('cp_name') }}" placeholder="Contact person name" required>
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-user"></span>
                                                </div>
                                            </div>
                                            <span class="help-block text-danger" style="display: none;">Please enter valid company name</span>
                                        </div>
                                        <div class="row">
                                            <div class="input-group mb-3 col-6">
                                                <input type="number" class="form-control frm-phone" id="cp_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;">Please enter valid phone no</span>
                                            </div>

                                            <div class="input-group mb-3 col-6">
                                                <input type="email" class="form-control frm-email" id="cp_email" name="cp_email" value="{{ old('cp_email') }}" placeholder="Contact person email" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-envelope"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid email</span>
                                            </div>
                                        </div>
                                        <div>
                                            <span>
                                                <p style="color: indigo;">
                                                    Bank Details
                                                </p>
                                            </span>
                                        </div>
                                        <div class="row">
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-inp" name="bank_name" value="{{ old('bank_name') }}" placeholder="Bank name" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-font"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid bank name</span>
                                            </div>
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-inp" id= "branch"  name="branch" value="{{ old('branch') }}" placeholder="Branch" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-location-arrow"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid branch name</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-accno"  id="account_no" name="account_no" value="{{ old('account_no') }}" placeholder="Account No" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-hashtag"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid account no of 10-15 chracters</span>
                                            </div>
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-inp" id="ifsc_code" name="ifsc_code" value="{{ old('ifsc_code') }}" placeholder="IFSC code" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-barcode"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid IFSC code</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-inp" id="account_holder_name" name="account_holder_name" value="{{ old('account_holder_name') }}" placeholder="Account Holder name" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-solid fa-user"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid account holder name</span>
                                            </div>
                                            <div class="input-group mb-3 col-6">
                                                <input type="text" class="form-control frm-inp" id="account_type" name="account_type" value="{{ old('account_type') }}" placeholder="Account Type" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text">
                                                        <span class="fas fa-star"></span>
                                                    </div>
                                                </div>
                                                <span class="help-block text-danger" style="display: none;">Please enter valid account type</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-4">
                                <button type="submit" id="submit-button" class="btn btn-lg btn-success frm-submit-btn">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>

    <script>
        $(document).ready(function() {
            $('#pan').on('blur', function() {
                var pan = $('#pan').val(); 
                alert(pan); 
                if (pan) {
                    $.ajax({
                        url: "{{ route('validate.pan') }}",
                        type: 'GET',
                        data: {
                            PAN: pan,             
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            var orgType = data.type_of_org.toLowerCase();
                           
                            if (data.exists && (orgType!== 'propritership' && orgType !== 'individual')) {                               
                                $('#pan-validation-message').text("This PAN already exists for a Non-Proprietary Organization.You can not add another company ");

                                $('#submit-button').prop('disabled', true);
                            } else if (data.exists && (orgType === 'propritership' || orgType === 'individual')) {                                
                                $('#pan-validation-message').text('').removeClass('error-message');
                                $('#submit-button').prop('disabled', false);

                                const selectElement = document.getElementById('type_of_org');                  
                                    
                                // Clear existing options
                                selectElement.innerHTML = '';

                                // Create and append new options
                                const defaultOption = document.createElement('option');
                                defaultOption.value = '';
                                defaultOption.textContent = 'Select type of organisation';
                                selectElement.appendChild(defaultOption);

                                const proprietershipOption = document.createElement('option');
                                proprietershipOption.value = 'Propritership';
                                proprietershipOption.textContent = 'Propritership';
                                selectElement.appendChild(proprietershipOption);

                            } 
                        },
                        error: function(xhr, status, error) {
                            console.error('Error checking PAN:', error);
                        }
                    });
                }
            });
        });
    </script>
    <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('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>
   
</body>
</html>
@endsection