Skip to content

Instantly share code, notes, and snippets.

@tajulasri

tajulasri/sample.blade.php

Created December 4, 2018 12:29
Show Gist options
  • Save tajulasri/d6b066553170d37848eb836f6c8bd046 to your computer and use it in GitHub Desktop.
Save tajulasri/d6b066553170d37848eb836f6c8bd046 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sample.blade.php
@extends('layouts.argon.app')
@section('content')
<div class="container-fluid mt--7">
<div class="row" style="margin-top: 20px;">
<div class="col">
<div class="card shadow">
<div class="card-header border-0">
</div>
<div class="table-responsive">
<div class="col-md-12">
<div class="col-md-12 panel">
<div class="col-md-12 panel-heading">
{{-- <h4>Service Category Details</h4> --}}
</div>
<div class="col-md-12 panel-body">
<form action="{{ route('provider.proofreading.store',['service_id' => Request::get('service_id'),'update' => $allowUpdate]) }}" method="post" enctype="multipart/form-data">
@csrf
<div class="col-md-12">
<div class="col-md-12">
<h4>Language</h4>
<p>Language that is provided. Can add multiple language</p>
</div>
<div class="col-md-12">
<div class="row">
<div class="form-group col-sm-4 col-xs-12">
<select name="language[type][]" class="form-control">
<option value="">Please select</option>
@forelse( get_academic_language() as $main)
<option>{{ $main->name }}</option>
@empty
<p class="alert alert-warning">There is no language to show yet.</p>
@endforelse
</select>
</div>
<div class="form-group">
<button type="button" class="btn btn-default bahasaBtn">Add</button>
</div>
</div>
<div>
<div class="bahasaWrapper">
@if(!is_null($metaData))
@foreach($metaData->languages as $language)
<div class="row">
<div class="form-group col-sm-4 col-xs-12">
<select name="language[type][]" id="lunchBegins" class="form-control">
<option value="">Please select</option>
@forelse( get_academic_language() as $main)
@if($main->name == $language)
<option value="{{ $main->name }}" selected>{{ $main->name }}</option>
@else
<option value="{{ $main->name }}">{{ $main->name }}</option>
@endif
@empty
<p class="alert alert-warning">There is no subject to show yet.</p>
@endforelse
</select>
</div>
<div class="form-group">
<button type="button" class="btn btn-3d btn-danger bahasaremoveBtn">Remove</button>
</div>
</div>
@endforeach
@endif
</div>
</div>
</div>
<div class="col-md-12">
<h4>Portfolios if available</h4>
<p>Upload a picture of your portfolio.</p>
</div>
<div class="col-md-12">
<div class="row">
<div class="form-group">
<div class="uploader" style="display: flex;">
@if(!is_null($metaData))
@foreach($metaData->portfolios as $index => $image)
<div class="col">
<div class="uploader-container-{{ $index+1 }}" id="img" style="height: 200px; display:flex; justify-content: center; align-items: center; background: no-repeat url('{{ asset('storage/service_providers/'.$image['path'])}}'); background-size: 200px 200px;">
<input onchange="readURL(this,'.uploader-container-{{$index+1}}')" type="file" name="image[]" />
</div>
</div>
@endforeach
@foreach(range(1,(3 - count($metaData->portfolios))) as $index => $emptyPlaceholder)
<div class="col">
<div class="uploader-container-{{ $index+10 }}" id="img" style="height: 200px; display:flex; justify-content: center; align-items: center; background: #eee; height: 200px;">
<input onchange="readURL(this,'.uploader-container-{{$index+10}}')" type="file" name="image[]" />
</div>
</div>
@endforeach
@else
@foreach(range(1,3) as $counter)
<div class="col">
<div class="uploader-container-{{ $counter }}" id="img" style="display:flex; justify-content: center; align-items: center; background: #eee; height: 200px;">
<input onchange="readURL(this,'.uploader-container-{{$counter}}')" type="file" name="image[]" />
</div>
</div>
@endforeach
@endif
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@push('inline_js')
<script>
$(document).ready(function(){
//handle dynamic adding input value for subject and language
var subjectmaxfield = 20;
var subjectFormCounter = 1;
var locationmaxfield = 20;
var locationFormCounter = 1;
var locationAddBtn = $('.locationBtn');
var locationWrapper = $('.locationWrapper');
var locationTemplate =
'<div class="row">'+
'<div class="form-group col-sm-4 col-xs-12">'+
'<select name="location[]" class="form-control">'+
'<option value="">Please select</option>'+
'@forelse($coverages as $cat)'+
'<option>{{ $cat->coverage }}</option>'+
'@empty'+
'<p class="alert alert-warning">There is no location to show yet.</p>'+
'@endforelse'+
'</select>'+
'</div>'+
'<div class="form-group">'+
'<button type="button" class="btn btn-3d btn-warning removeBtn">Remove</button>'+
'</div>'+
'</div>';
locationAddBtn.on('click',function(){
if(locationFormCounter < subjectmaxfield) {
locationWrapper.append(locationTemplate);
}
locationFormCounter++;
});
locationWrapper.on('click','.removeBtn',function(e){
e.preventDefault();
$(this).parent('div').parent().remove();
locationFormCounter--;
});
});
</script>
<script>
$(document).ready(function(){
//handle dynamic adding input value for subject and language
var subjectmaxfield = 20;
var subjectFormCounter = 1;
var languagemaxfield = 20;
var languageFormCounter = 1;
var languageAddBtn = $('.languageBtn');
var languageWrapper = $('.languageWrapper');
var languageTemplate =
'<div class="row">'+
'<div class="form-group col-sm-4 col-xs-12">'+
'<input type="text" name="service[]" class="form-control" id="" placeholder="Estimation time to completed">'+
'</div>'+
'<div class="form-group col-sm-4 col-xs-12">'+
'<input type="text" name="price[]" class="form-control" id="" placeholder="Price">'+
'</div>'+
'<div class="form-group">'+
'<button type="button" class="btn btn-3d btn-warning removeBtn">Remove</button>'+
'</div>'+
'</div>';
languageAddBtn.on('click',function(){
if(languageFormCounter < subjectmaxfield) {
languageWrapper.append(languageTemplate);
}
languageFormCounter++;
});
languageWrapper.on('click','.removeBtn',function(e){
e.preventDefault();
$(this).parent('div').parent().remove();
languageFormCounter--;
});
});
</script>
<script>
$(document).ready(function(){
//handle dynamic adding input value for subject and language
var sotong = 20;
var bahasaFormCounter = 1;
var bahasaAddBtn = $('.bahasaBtn');
var bahasaWrapper = $('.bahasaWrapper');
var bahasaTemplate =
'<div class="row">'+
'<div class="form-group col-sm-4 col-xs-12">'+
'<select name="language[type][]" class="form-control">'+
'<option value="">Please select</option>'+
'@forelse( get_academic_language() as $main)'+
'<option>{{ $main->name }}</option>'+
'@empty'+
'<p class="alert alert-warning">There is no subject to show yet.</p>'+
'@endforelse'+
'</select>'+
'</div>'+
'<div class="form-group">'+
'<button type="button" class="btn btn-3d btn-danger bahasaremoveBtn">Remove</button>'+
'</div>'+
'</div>';
bahasaAddBtn.on('click',function(){
if(bahasaFormCounter < sotong) {
bahasaWrapper.append(bahasaTemplate);
}
bahasaFormCounter++;
});
bahasaWrapper.on('click','.bahasaremoveBtn',function(e){
e.preventDefault();
$(this).parent('div').parent().remove();
bahasaFormCounter--;
});
});
</script>
@endpush
</div>
</div>
</div>
</div>
</div>
@endsection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment