@extends('layouts.app')
@section('title', 'Add System Configuration')
@section('content')
<!-- Content Wrapper. Contains page content -->


<!-- Main content -->
<section class="content">
        <div id="logoErrorAlert" class="alert alert-danger" style="display: none;"></div>
        <div class="row">
        <div class="col-lg-12 col-12">
                <div class="box">

                    
                             <div class="box-body"><!--bg-lightest-->
                             <h4 class="box-title text-info mb-0"><i class="fa fa-plus"></i> Company Details</h4>
            <!-- <a href="{{url('/crm-system-setting')}}" type="button" style="float:right" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-eye fa-sx"></i> System Configuration</a> -->
            <hr class="my-15">
                    <div class="row col-md-12">      
                        
                        <form  method="post"  id="systemForm"enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                  
                                   <input type="hidden"id="id"value=""name="id">
                                <div class="form-group col-md-6">
                            <label class="form-label">Company Name </label>
                           <div class="input-group">
                           <span class="input-group-text @error('company_name') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                <input  type="text" class="form-control" name="company_name" placeholder="Company Name"value="" id="company_name"required>
                            </div>
                        </div>
                                   

                                    <div class="form-group col-md-6">
                                        <label class="form-label"> Email</label>
                                        <div class="input-group">
                           <span class="input-group-text @error('company_email') text-danger border-danger @enderror"><i class="ti-email"></i></span>
                                        <input type="email" required class="form-control" name="company_email"id="company_email"
                                               placeholder=" Email">

                                    </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1"> Phone Number</label>
                                    <div class="input-group">
                                     <span class="input-group-text @error('company_phone') text-danger border-danger @enderror"><i class="ti-mobile"></i></span>
                                    <input type="text" required class="form-control" name="company_phone"id="phone"
                                               placeholder="(___) __-____">

                                    </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1">Address</label>
                                    <div class="input-group">
                                    <span class="input-group-text @error('company_address') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                    <input type="text" required class="form-control" name="company_address"id="company_address"
                                               placeholder="address">
                                            
                                    </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1">State</label>
                                    <div class="input-group">
                                    <span class="input-group-text @error('state') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                    <select class="form-select" name="state" id="state">
                                                                    <option value="AL">Alabama</option>
                                                                        <option value="AK">Alaska</option>
                                                                        <option value="AS">American Samoa</option>
                                                                        <option value="AZ">Arizona</option>
                                                                        <option value="AR">Arkansas</option>
                                                                        <option value="AE-A">Armed Forces Africa</option>
                                                                        <option value="AA">Armed Forces Americas</option>
                                                                        <option value="AE-C">Armed Forces Canada</option>
                                                                        <option value="AE-E">Armed Forces Europe</option>
                                                                        <option value="AE-M">Armed Forces Middle East</option>
                                                                        <option value="AP">Armed Forces Pacific</option>
                                                                        <option value="CA">California</option>
                                                                        <option value="CO">Colorado</option>
                                                                        <option value="CT">Connecticut</option>
                                                                        <option value="DE">Delaware</option>
                                                                        <option value="DC">District of Columbia</option>
                                                                        <option value="FM">Federated States of Micronesia</option>
                                                                        <option value="FL">Florida</option>
                                                                        <option value="GA">Georgia</option>
                                                                        <option value="GU">Guam</option>
                                                                        <option value="HI">Hawaii</option>
                                                                        <option value="ID">Idaho</option>
                                                                        <option value="IL">Illinois</option>
                                                                        <option value="IN">Indiana</option>
                                                                        <option value="IA">Iowa</option>
                                                                        <option value="KS">Kansas</option>
                                                                        <option value="KY">Kentucky</option>
                                                                        <option value="LA">Louisiana</option>
                                                                        <option value="ME">Maine</option>
                                                                        <option value="MD">Maryland</option>
                                                                        <option value="MA">Massachusetts</option>
                                                                        <option value="MI">Michigan</option>
                                                                        <option value="MN">Minnesota</option>
                                                                        <option value="MS">Mississippi</option>
                                                                        <option value="MO">Missouri</option>
                                                                        <option value="MT">Montana</option>
                                                                        <option value="NE">Nebraska</option>
                                                                        <option value="NV">Nevada</option>
                                                                        <option value="NH">New Hampshire</option>
                                                                        <option value="NJ">New Jersey</option>
                                                                        <option value="NM">New Mexico</option>
                                                                        <option value="NY">New York</option>
                                                                        <option value="NC">North Carolina</option>
                                                                        <option value="ND">North Dakota</option>
                                                                        <option value="MP">Northern Mariana Islands</option>
                                                                        <option value="OH">Ohio</option>
                                                                        <option value="OK">Oklahoma</option>
                                                                        <option value="OR">Oregon</option>
                                                                        <option value="PA">Pennsylvania</option>
                                                                        <option value="PR">Puerto Rico</option>
                                                                        <option value="MH">Republic of Marshall Islands</option>
                                                                        <option value="RI">Rhode Island</option>
                                                                        <option value="SC">South Carolina</option>
                                                                        <option value="SD">South Dakota</option>
                                                                        <option value="TN">Tennessee</option>
                                                                        <option value="TX">Texas</option>
                                                                        <option value="UT">Utah</option>
                                                                        <option value="VT">Vermont</option>
                                                                        <option value="VI">Virgin Islands of the U.S.</option>
                                                                        <option value="VA">Virginia</option>
                                                                        <option value="WA">Washington</option>
                                                                        <option value="WV">West Virginia</option>
                                                                        <option value="WI">Wisconsin</option>
                                                                        <option value="WY">Wyoming</option>
                                                                </select>
                                            
                                    </div>
                                    </div>
                                    <div class="form-group col-md-3">
                                    <label for="exampleInputEmail1">City</label>
                                    <div class="input-group">
                                    <span class="input-group-text @error('city') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                    <input type="text" required class="form-control" name="city"id="city"
                                               placeholder="City">
                                            
                                    </div>
                                    </div>
                                    <div class="form-group col-md-3">
                                    

                                    <label for="exampleInputEmail1">ZIP</label>
                                    <div class="input-group">
                                    <span class="input-group-text @error('zipcode') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                    <input type="text" required class="form-control" name="zipcode"id="zipcode" data-validation-containsnumber-regex="(\d)+" data-validation-containsnumber-message="No Characters Allowed, Only Numbers"
                                               placeholder="ZIP">

                                  
                                    </div>
                                    </div>
                                    <div class="form-group col-md-6">
    
                                    <label for="exampleInputEmail1">Upload Logo</label>
                                    <div class="input-group">
                                    <span class="input-group-text @error('logo') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                    <input type="file"  class="form-select logo" name="logo" id="logo">
                                    </div>
                                    </div>
                                  
                                    <div class="col-md-3"id="preview"style="display:none;">
                                    <div class="form-group">
                                    <label class="form-label" for="">Preview</label>
                                    <br/>
                                                <div id="imagePreview"></div></div>
                                    </div>
                                    
                                    @if(isset($crm_system[0]->logo) && !empty($crm_system[0]->logo))
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label" for="">Current Logo</label>
                                                <br/>
                                                <div>
                                                    <img src="{{ asset('logo/' . $crm_system[0]->logo) }}" alt="Avatar" class="profile-user-img img-responsive image" style="border:none;height:100px;width:200px;">
                                                </div>
                                                <br/>
                                            </div>
                                        </div>
                                    @endif

                                    
                                    <div class="form-group col-md-6">
    
                                        <label for="domain">Company Domain</label>
                                        <div class="input-group">
                                        <span class="input-group-text @error('company_domain') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                        <input type="url"  class="form-control" name="company_domain" id="domain">
                                        </div>
                                        </div>
                                    </div>

            
                    <div class="box-footer text-end">
                        @if(!empty($crm_system))
                    <button type="button" id="submitButton"  class="btn btn btn-primary waves-effect waves-light"><i class="ti-save-alt"></i> Edit</button> 

                    <button type="submit" id="updateButton" style="display:none;"  class="btn btn btn-primary waves-effect waves-light"><i class="ti-save-alt"></i> Update</button> 


                    @else
                    <button type="submit"  class="btn btn btn-primary waves-effect waves-light"><i class="ti-save-alt"></i> Submit</button> 


                    @endif              </div>
            </form>
                    </div>
              
                     
                    </div><!-- /.box-body -->
                </div><!-- /.box -->

            </div><!-- /.col -->
        </div><!-- /.row -->
    </section><!-- /.content -->
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>           
      <script src="https://cdn.jsdelivr.net/npm/imask"></script>
<script>
      var phoneInput = document.getElementById('phone');
    var phoneMask = new IMask(phoneInput, {
        mask: '(000) 000-0000'
    }); 
    var phoneInput = document.getElementById('zipcode');
    var phoneMask = new IMask(phoneInput, {
        mask: '00000'
    }); 
    $(document).ready(function () {
    var existingData = {!! json_encode($crm_system) !!};
    console.log('Existing Data:', existingData);

    if (existingData.length > 0 && existingData[0].company_name) {
        // Data exists, set form action to update route
        $('#systemForm').attr('action', '{{ route("System.update") }}');
        $('#id').val(existingData[0].id);
        // Populate form fields with existing data
        $('#company_name').val(existingData[0].company_name);
        $("#company_name").attr('disabled','disabled');

        $('#company_email').val(existingData[0].company_email);
        $("#company_email").attr('disabled','disabled');

        $('#phone').val(existingData[0].company_phone);
        $("#phone").attr('disabled','disabled');

        $('#company_address').val(existingData[0].company_address);
        $("#company_address").attr('disabled','disabled');

        $('#state').val(existingData[0].state);
        $("#state").attr('disabled','disabled');

        $('#city').val(existingData[0].city);
        $("#city").attr('disabled','disabled');

        $('#zipcode').val(existingData[0].zipcode);
        $("#zipcode").attr('disabled','disabled');
        
        $('#domain').val(existingData[0].company_domain);
        $("#domain").attr('disabled','disabled');

        $('#logo').val(existingData[0].logo);
        $("#logo").attr('disabled',true);

       

        // Populate other fields...

        // Change button text
        //$('#submitButton').text('Update');
    } else {
        console.log('Company Name is undefined or not present in existingData.');
    }
});

    // Handle form submission
    $('#submitButton').click(function () {

        $('input').removeAttr("disabled");
        $('select').removeAttr("disabled");

        $("#updateButton").show();
        $("#submitButton").hide();


        
    });
    
    </script>
<script>
  document.getElementById('logo').addEventListener('change', function (event) {
        // Get the selected file
        const file = event.target.files[0];

        // Check if a file is selected
        if (file) {
            // Check if the file format is supported
            const allowedFormats = ['jpeg', 'png', 'jpg', 'gif', 'svg'];
            const fileName = file.name.toLowerCase();
            const fileExtension = fileName.split('.').pop();

            if (!allowedFormats.includes(fileExtension)) {
                // Display an error message in the Bootstrap alert
                displayBootstrapAlert('Invalid logo format. Please choose a file with a supported format: jpeg, png, jpg, gif, svg.');

                // Reset the file input
                document.getElementById('logo').value = '';

                // Clear the image preview
                document.getElementById('imagePreview').innerHTML = '';

                // Hide the preview div
                document.getElementById('preview').style.display = 'none';

                return;
            }

            // Create a FileReader to read the file
            const reader = new FileReader();

            // Set the callback function when reading is done
            reader.onload = function (e) {
                // Get the data URL representing the file
                const dataUrl = e.target.result;

                // Display the image in the 'imagePreview' div
                document.getElementById('imagePreview').innerHTML = `<img src="${dataUrl}" alt="Uploaded Image" style="height:100px;width:200px;">`;

                // Show the preview div
                document.getElementById('preview').style.display = 'block';
            };

            // Read the file as a Data URL
            reader.readAsDataURL(file);
        }
    });

// Function to display an error message in a Bootstrap alert
function displayBootstrapAlert(message) {
    const alertElement = document.getElementById('logoErrorAlert');
    alertElement.innerHTML = message;
    alertElement.style.display = 'block';
setTimeout(function () {
        alertElement.style.display = 'none';
    }, 3000);
    // You can also use a library like jQuery to add animation effects to the alert
    // $(alertElement).fadeIn();
}

</script>
<!-- /.content-wrapper -->

@endsection