@extends('superAdmin.layouts.auth')

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

@section('styles')
	<!-- Data table css -->
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
		<a href="{{ route('superAdmin.company') }}">
        	<h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Companies</h1>
        </a>
    </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>
	                    Add New Company
	                </h2>
	            </div>
	            <div class="card-body">
	                <!-- add Company-->
	                <form action="{{ route('superAdmin.saveCompany')}}" method="post" enctype="multipart/form-data">
	                	@csrf
		                <div class="row">
		                    <div class="col-md-6">		                      	
	                        	<div class="upload logo">
	                          		<label for="logo">
	                            		<input type="file" class="d-none" name="logo" id="logo"  onchange="loadCompanyLogo(event)">
	                            		<img id="output" src="{{ asset('assets/images/camera-plus.svg') }}" alt="">
	                          		</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 <span class="text-danger">*</span></label>
	                           		<input type="text" class="form-control" name="company_name" id="" value="{{ old('company_name') }}" placeholder="Enter Company Name">
	                         	</div>
	                         	<div class="form-group">
	                          		<label for="" class="form-label">Company Description</label>
	                          		<textarea name="company_desc" id="" class="form-control" cols="" rows="5" placeholder="Enter Company Description">{{ old('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="" value="{{ old('company_address') }}" placeholder="Enter Company Address">
	                        	</div>
	                        	<div class="form-group">
	                          		<label for="" class="form-label">Website</label>
	                          		<input type="text" class="form-control" name="website" id="" value="{{ old('website') }}" placeholder="Enter 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="" value="{{ old('company_phone') }}" placeholder="Enter Company Phone Number">
	                        	</div>		                      	
		                    </div>
		                    <!-- admin -->
		                    <div class="col-md-6">		                      	
	                        	<div class="upload admin">
	                          		<label for="admin_profile_image">
	                            		<input type="file" class="d-none" name="admin_profile_image" id="admin_profile_image" onchange="loadCompanyAdminLogo(event)">
	                            		<img id="output2" src="{{ asset('assets/images/user.svg') }}" alt="" >
	                            		<img src="{{ asset('assets/images/upload-photo.svg') }}" alt="" class="add">
	                          		</label>
	                          		<p class="label">Upload Admin Photo</p>
	                        	</div>
	                         	<div class="form-group">
	                           		<label for="" class="form-label">Company Admin First Name <span class="text-danger">*</span></label>
	                           		<input type="text" class="form-control" name="user_first_name" id="first_name" value="{{ old('user_first_name') }}" placeholder="Enter Company Admin First Name">
	                         	</div>
	                         	<div class="form-group">
	                           		<label for="" class="form-label">Company Admin Last Name <span class="text-danger">*</span></label>
	                           		<input type="text" class="form-control" name="user_last_name" id="last_name" value="{{ old('user_last_name') }}" placeholder="Enter Company Admin Last Name">
	                         	</div>
	                         	<div class="form-group">
	                          		<label for="" class="form-label">Company Admin Email <span class="text-danger">*</span></label>
	                          		<input type="text" class="form-control" name="user_email" id="email" value="{{ old('user_email') }}" placeholder="Enter Company Admin Email">
	                        	</div>
	                        	<div class="form-group">
	                          		<label for="" class="form-label">Company Admin Contact Number <span class="text-danger">*</span></label>
	                          		<input type="text" class="form-control" name="user_phone" id="phone" value="{{ old('user_phone') }}" placeholder="Enter Company Admin Contact Number">
	                        	</div>
	                        	<div class="form-group">
	                          		<button class="btn btn-primary btn-block">Add a Company</button>
	                        	</div>		                        
		                    </div>
		                </div>
	                </form> 
	            </div>
            </div>
		</div>
	</div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
	<!-- Data tables -->
	<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
	<script src="{{ asset('assets/js/datatable.js') }}"></script>
	<script type="text/javascript">
		var loadCompanyLogo = function(event) {
		    var output = document.getElementById('output');
		    output.src = URL.createObjectURL(event.target.files[0]);
		    output.onload = function() {
		      URL.revokeObjectURL(output.src) // free memory
		    }
  		};
  		var loadCompanyAdminLogo = function(event) {
		    var output2 = document.getElementById('output2');
		    output2.src = URL.createObjectURL(event.target.files[0]);
		    output.onload = function() {
		      URL.revokeObjectURL(output2.src) // free memory
		    }
  		};
	</script>
@endsection