@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Company Profile
@endsection

@section('styles')
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
		<h1 class="link"> Company Info</h1>
	</div>

	@if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h2>
						<span>
							<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12.756" viewBox="0 0 18 12.756"><path d="M291.565,414.487v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.018-3.019V413.4H290.487v2.027h-3.6v10.729h18V415.427Zm-10.807,9.85h-2.734V422.8h2.734Zm0-3.346h-2.734v-1.285h2.734Zm0-2.156h-2.734V418.5h2.734Zm0-2.148h-2.734V416.3h2.734Zm6.632,7.65h-2.458v-2.449h2.458Zm3.528.224h-2.881v-3.329h-3.752v3.321h-2.881V414.056h9.513Zm3.381-.224h-2.734V422.8h2.734Zm0-3.346h-2.734v-1.285h2.734Zm0-2.156h-2.734V418.5h2.734Zm0-2.148h-2.734V416.3h2.734Zm-10.445,4.114H298.2v3.329h2.018V414.487h-8.651v10.574h2.018Zm4.287-5.96h1.406v2.665h-1.406Zm-2.682,0h1.406v2.665h-1.406Zm-2.682,0h1.406v2.665H292.5Zm-.94-1.294v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Z" transform="translate(-286.89 -413.4)" fill="#213b78"/></svg>
						</span>
						Star Security
					</h2>
				</div>
				
				<div class="card-body">
					<!-- add Company-->
					<div class="row">
						<div class="col-md-6">
							<form method="post" action="{{ route('companyAdmin.updateCompany') }}"  enctype="multipart/form-data">
								@csrf
								<div class="upload admin">
									<label for="company_logo">
										<input type="file" class="d-none" name="company_logo" id="company_logo" onchange="loadProfileImage(event)">
										@if(@isset($companyDetails->company_logo))
										    <img id="output_img" src="{{ url('storage/images/company/logo/web/'.$companyDetails->company_logo) }}" alt="">
										@else
											<img id="output_img" src="{{ asset('assets/images/user.svg') }}" alt="">
										@endif
										<img src="{{ asset('assets/images/upload-photo.svg') }}" alt=""  class="add">
									</label>
									<p class="label">Upload Company Logo <span class="text-danger">*</span></p>
								</div>
								<div class="form-group">
									<label for="" class="form-label">Company Name</label>
									<input type="text" class="form-control" name="" value="{{ $companyDetails->company_name}}" disabled id="cname">
									<input type="hidden" name="company_id" id="company_id" value="{{ $companyDetails->id}}">
								</div>
								<div class="form-group">
									<label for="" class="form-label">Company Description</label>
										<textarea name="company_desc" id="company_desc" class="form-control" cols="" rows="5">{{ $companyDetails->company_desc}}</textarea>
								</div>
								<div class="form-group">
									<label for="" class="form-label">Company Address <span class="text-danger">*</span></label>
									<input type="text" class="form-control" name="company_address" id="company_address" value="{{ $companyDetails->company_address}}">
								</div>
								<div class="form-group">
									<label for="" class="form-label">Website</label>
									<input type="url" class="form-control" name="company_website" id="company_website" value="{{ $companyDetails->company_website}}" >
								</div>
								<div class="form-group">
									<label for="" class="form-label">Phone Number</label>
									<input type="text" class="form-control" name="company_phone" id="company_phone" value="{{ $companyDetails->company_phone}}">
								</div>
								<div class="form-group">
									<div class="images-upload" style="display: block">
										<input type="hidden" id="count_item" value="2">
										<ul id="image-fields">
											@if($companyProfileImages->count() > 0)
												@foreach($companyProfileImages as $each)
												<li style="position:relative;">
													<label for="img-1" class="uploader-box">
														<input type="file" name="photos[]" id="img-1" class="d-none">													
														<span class="icon">
															<img src="{{ url('storage/images/company/profile/web/'.$each->image) }}" alt="">
														</span>													
													</label>
													<span class="deleteimg" data-id="{{ $each->id }}"  style="position:absolute; top:-10px; right:-10px; width:20px; height:20px; line-height:20px; text-align:center; background-color:#FF6347; border-radius:100px; display:inline-block;color:#fff; cursor:pointer">X</span>
												</li>
												@endforeach
												@if($companyProfileImages->count() == 1)
													<li>
													<label for="img-2" class="uploader-box">
														<input type="file" name="photos[]" id="img-2" class="d-none">														
														<span class="icon">
															<img src="{{ asset('assets/images/camera-icon-plus.svg') }}" alt="">
														</span>
													</label>
												</li>
												@endif
											@else
												<li>
													<label for="img-1" class="uploader-box">
														<input type="file" name="photos[]" id="img-1" class="d-none">
														<span class="icon">
															<img src="{{ asset('assets/images/camera-icon-plus.svg') }}" alt="">
														</span>
													</label>
												</li>
												<li>
													<label for="img-2" class="uploader-box">
														<input type="file" name="photos[]" id="img-2" class="d-none">
														<span class="icon">
															<img src="{{ asset('assets/images/camera-icon-plus.svg') }}" alt="">
														</span>
													</label>
												</li>
											@endif											
										</ul>
										<ul>										
											@if($count < 5)
												<li>
													<div class="add-box" id="add-image">
														<span class="icon">
															<img src="{{ asset('assets/images/circle-plus.svg') }}" alt="">
														</span>
													</div>
												</li>
											@endif
										</ul>
									</div>
								</div>
								<div class="form-group">
									<button class="btn btn-primary btn-block">Save Info</button>
								</div>
							</form>
						</div>
					</div> 
				</div>
			</div>
		</div>
	</div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
<script>
var loadProfileImage = function(event) {
    var output = document.getElementById('output_img');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
};

$(document).ready(function() {		
	var howMany = $("#count_item").val();
	$("#add-image").click(function() {		
		howMany = Number(howMany);
		//console.log(howMany);
		if(howMany < 6){
			howMany = howMany + 1;
			$("#count_item").val(howMany);
			let existingFields = $("#image-fields").html();
			existingFields += `
				<li>
					<label for="img-` + howMany + `" class="uploader-box">
						<input type="file" name="photos[]" id="img-` + howMany + `" class="d-none">
						<span class="icon">
							<img src="{{ asset('assets/images/camera-icon-plus.svg') }}" alt="">
						</span>
					</label>
				</li>
			`;
			$("#image-fields").html(existingFields);		
			
		}
		if(howMany == 5){
			$('#add-image').hide();
		}		
		 
	});


	$(document).on('click', '.deleteimg', function (event) {
		event.preventDefault();  
		if (confirm('Do you really want to delete it?'))
        {             
	        var imageID = $(this).attr('data-id');
	        //console.log(imageID);
	        $.ajaxSetup({
	            headers: {
	                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
	            }
	        });
	        $.ajax({
	            url: "{{ route('companyAdmin.deleteCompanyImage') }}",
	            method: 'post',
	            dataType: 'json',
	            data: {
	                id: imageID,
	                _token: $('meta[name="csrf_token"]').attr('content')
	            },
	            success: function (result) {
	                if (result.success == true) {
	                   location.reload()
	                } else {
	                    //Do nothing
	                }
	            }
	        });
        }
    });

	
});
</script>
@endsection