@extends('layouts.app') {{-- Include the layout --}}

@section('content')

<style>
 .logo-preview{
    position:static;
    padding:5px; 
     
 }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Manage Company Information</div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success custom-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger custom-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    <form method="POST" action="{{ route('updateCompanyinfo') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="form-group">
                            <label for="name">Name <span class="text-danger">*</span></label> 
                            <input type="text" id="name" name="name" class="form-control" value="{{ isset($name) ? $name : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter the company name.
                            </div>
                        </div>
                                
                        <div class="form-group">
                            <label for="slogan">Slogan <span class="text-danger">*</span></label>
                            <input type="text" id="slogan" name="slogan" class="form-control" value="{{ isset($slogan) ? $slogan : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter the slogan.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="address">Address <span class="text-danger">*</span></label>
                            <textarea type="text" id="address" name="address" class="form-control" required>{{ isset($address) ? $address : '' }}</textarea>
                            <div class="invalid-feedback">
                                Please enter the address.
                            </div>
                        </div>
                        
                        <div class="form-group">
                             <label for="cityid">Select City <span class="text-danger">*</span></label>
                             <select name="cityid" id="cityid" class="form-control" required>
                                
                                <option value="">Select City</option>
                                
                                @foreach($citylist as $list)
                                        
                                    @php
                                        $select = (isset($city) && $city == $list->value) ? 'selected' : '';
                                    @endphp
                                        
                                    <option value="{{ $list->value }}"  {{$select}}>{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                            
                            <div class="invalid-feedback">
                                Please select city.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="state">State <span class="text-danger">*</span></label>
                            <input type="text" id="state" name="state" class="form-control" value="{{ isset($state) ? $state : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter the state.
                            </div>
                        </div>
                        
                        <div class="form-group">
                             <label for="country">Select Country <span class="text-danger">*</span></label>
                             <select name="country" id="country" class="form-control" required>
                                
                                <option value="">Select Country</option>
                                
                                @foreach($countrylist as $list)
                                        
                                    @php
                                        $select = (isset($country) && $country == $list->value) ? 'selected' : '';
                                    @endphp
                                        
                                    <option value="{{ $list->value }}"  {{$select}}>{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                            
                            <div class="invalid-feedback">
                                Please enter the country.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="zipcode">Zip Code</label>
                            <input type="text" id="zipcode" name="zipcode" class="form-control" value="{{ isset($zipcode) ? $zipcode : '' }}">
                        </div>
                        
                        <div class="form-group">
                            <label for="phone">Phone <span class="text-danger">*</span></label>
                            <input type="text" id="phone" name="phone" class="form-control" value="{{ isset($phone) ? $phone : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter the phone.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone2">Phone 2</label>
                            <input type="text" id="phone2" name="phone2" class="form-control" value="{{ isset($phone2) ? $phone2 : '' }}">
                        </div>
                        
                        
                        
                        <div class="form-group">
                            <label for="email">Email <span class="text-danger">*</span></label>
                            <input type="text" id="email" name="email" class="form-control" value="{{ isset($email) ? $email : '' }}" required >
                            <div class="invalid-feedback">
                                Please enter the email.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="email2">Email 2</label>
                            <input type="text" id="email2" name="email2" class="form-control" value="{{ isset($email2) ? $email2 : '' }}">
                        </div>
                        
                        <div class="form-group">
                            <label for="websiteurl">Website Url <span class="text-danger">*</span></label>
                            <input type="text" id="websiteurl" name="websiteurl" class="form-control" value="{{ isset($websiteurl) ? $websiteurl : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter the website url.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="footertext">Footer Copyright Text <span class="text-danger">*</span></label>
                            <input type="text" id="footertext" name="footertext" class="form-control" value="{{ isset($footertext) ? $footertext : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter footer copyright text.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="mainlogo">Company Main Logo <span class="text-danger">*</span></label>
                            <input type="file" id="mainlogo" name="mainlogo" class="form-control" accept=".jpg, .jpeg, .png" {{ isset($logo) && isset($logopath) ? '' : 'required' }} onchange="previewLogo(this, 'mainlogo-preview')">
                            <div class="invalid-feedback">
                                Please add company main logo.
                            </div>
                            <div id="mainlogo-preview" class="logo-preview" >
                                @if(isset($logo) && isset($logopath))
                                    <img src="{{ asset($logopath) }}" alt="Main Logo" width="150" height="150">
                                @endif
                            </div>
                        </div>
                
                        <div class="form-group">
                            <label for="reportlogo">Report&apos;s Logo <span class="text-danger">*</span></label>
                            <input type="file" id="reportlogo" name="reportlogo" class="form-control" accept=".jpg, .jpeg, .png"  {{ isset($reportlogo) && isset($reportlogopath) ? '' : 'required' }} onchange="previewLogo(this, 'reportlogo-preview')">
                            <div class="invalid-feedback">
                                Please add report&apos;s logo.
                            </div>
                            <div id="reportlogo-preview" class="logo-preview">
                                @if(isset($reportlogo) && isset($reportlogopath))
                                    <img src="{{ asset($reportlogopath) }}" alt="Report's Logo" width="150" height="150">
                                @endif
                                
                            </div>
                        </div>
                        
                        
                        
                        <br>
                        
                        <div style="text-align:right">
                            <button type="submit" class="btn btn-success" id="savebtn">{{ isset($email) ? 'Update' : 'Save' }}</button>
                        </div> 
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div>    

<script>
        function previewLogo(input, previewId) {
            const previewContainer = document.getElementById(previewId);
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    // Remove previous preview, if any
                    previewContainer.innerHTML = '';

                    const previewImage = document.createElement('img');
                    previewImage.src = e.target.result;
                    previewImage.alt = 'Logo Preview';
                    previewImage.width = 150;
                    previewImage.height = 150;
                    previewContainer.appendChild(previewImage);
                };

                reader.readAsDataURL(file);
            }
        }
    </script>

<script>

$('#savebtn').on('click', function(event) {
    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }

    $(form).addClass('was-validated');
    
});



$("#moduleid").change(function() {
    
    if($('#moduleid').val()>0)
    {
        var selectedOption = $(this).find(":selected");
        var sequence = selectedOption.attr("sequence");
        var label = selectedOption.attr("label");
    
        $('#modulename').val(label);
        $('#moduleseq').val(sequence);
        $('#savebtn').text('Update');
        $('#deletebtn').show();
        
    }
    else {
        $('#modulename').val(label);
        $('#moduleseq').val(sequence);
        $('#savebtn').text('Add New');
        $('#deletebtn').hide();
    }
    
});


$("#deletebtn").on('click', function() {
    
    var moduleid=$('#moduleid').val();
    
    if(moduleid>0)
    {
        Swal.fire({
            title: 'Are you sure?',
            icon: 'warning',
            width: '300px',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                
                $.ajax({
                    type: 'DELETE',
                    url: '{{ route('deleteModule', '') }}/' + moduleid,
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        
                        if (response.error) {
                            Swal.fire({
                                title: response.error,
                                icon: 'error',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                }
                            });
                        } else if (response.success) {
                            
                            Swal.fire({
                                title: response.success,
                                icon: 'success',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                },
                                showConfirmButton: true,
                            });
                            
                            $('#moduleid option[value="' + moduleid + '"]').remove();
                            $('#modulename').val('');
                             $('#moduleseq').val('');
                            $('#deletebtn').hide();
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting the item', error);
                    }
                });
                
            } else {
           
            }
        });
                
        
            
    }
    
});

</script>

@endsection