@extends('layouts.admin')
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">                        
                        <h5 class="card-title mb-0">Team 1</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('teams.update_team1', 1) }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf      
                            @method('PUT')                       
                            <div class="mb-3">
                                <label for="name_team1" class="form-label">Name</label>
                                <input type="text" class="form-control" name="name_team1" 
                                    value="{{ isset($team1) ? $team1->employee_name : old('team1') }}">
                            </div>                            
                            <div class="mb-3">
                                <label><strong>Photo</strong></label>	
                                <img id="previewPhotoTeam1" 
                                    src="{{ isset($team1) ? asset('storage/'.$team1->employee_photo) : asset('storage/'.old('team1')) }}" 
                                    class="img-responsive mt-2" width="auto" height="150"> 
                                <label class="form-label w-100">File input</label>
                                <input type="file" name="photo_team1" onchange="preview_team1(event)">
                                <input type="hidden" name="photo_team1_old" 
                                    value="{{ isset($team1) ? $team1->employee_photo : old('team1') }}" readonly>
                                <small class="form-text text-muted">For best results, use an image at least 128px by 128px in .jpg format</small>
                            </div>                            
                            <div class="mb-3">
                                <label for="position_team1" class="form-label">Posisi</label>
                                <input type="text" class="form-control" name="position_team1"  
                                    value="{{ isset($team1) ? $team1->position : old('team1') }}">
                            </div>      
                            <div class="mb-3">
                                <label for="author">Statement <small data-toggle="tooltip" title="Wajib diisi">*</small></label>
                                <textarea id="editor_team1" 
                                name="statement_team1" 
                                class="form-control" 
                                required>{{ isset($team1) ? $team1->statement : old('team1') }}</textarea>
                            </div>                      
                            <button type="submit" class="btn btn-primary">Save changes</button>     
                        </form>
                    </div>                    
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">                        
                        <h5 class="card-title mb-0">Team 2</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('teams.update_team2', 2) }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')                        
                            <div class="mb-3">
                                <label for="name_team2" class="form-label">Name</label>
                                <input type="text" class="form-control" name="name_team2" id="inputName" 
                                    value="{{ isset($team2) ? $team2->employee_name : old('team2') }}">
                            </div>                            
                            <div class="mb-3">
                                <label><strong>Photo</strong></label>	
                                <img id="previewPhotoTeam2" 
                                    src="{{ isset($team2) ? asset('storage/'.$team2->employee_photo) : asset('storage/'.old('team2')) }}" 
                                    class="img-responsive mt-2" width="auto" height="150"> 
                                <label class="form-label w-100">File input</label>
                                <input type="file" name="photo_team2" onchange="preview_team2(event)">
                                <input type="hidden" name="photo_team2_old" 
                                    value="{{ isset($team2) ? $team2->employee_photo : old('team2') }}" readonly>
                                <small class="form-text text-muted">For best results, use an image at least 128px by 128px in .jpg format</small>
                            </div>                            
                            <div class="mb-3">
                                <label for="position_team2" class="form-label">Position</label>
                                <input type="text" class="form-control" name="position_team2"  
                                    value="{{ isset($team2) ? $team2->position : old('team2') }}">
                            </div>               
                            <div class="mb-3">
                                <label for="author">Statement <small data-toggle="tooltip" title="Wajib diisi">*</small></label>
                                <textarea id="editor_team2" 
                                name="statement_team2" 
                                class="form-control" 
                                required>{{ isset($team2) ? $team2->statement : old('team2') }}</textarea>
                            </div>                 
                            <button type="submit" class="btn btn-primary">Save changes</button>     
                        </form>
                    </div>                    
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">                        
                        <h5 class="card-title mb-0">Team 3</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('teams.update_team3', 3) }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf          
                            @method('PUT')                   
                            <div class="mb-3">
                                <label for="name_team3" class="form-label">Name</label>
                                <input type="text" class="form-control" name="name_team3" 
                                    value="{{ isset($team3) ? $team3->employee_name : old('team3') }}">
                            </div>                            
                           
                            <div class="mb-3">
                                <label><strong>Photo</strong></label>	
                                <img id="previewPhotoTeam3" 
                                    src="{{ isset($team3) ? asset('storage/'.$team3->employee_photo) : asset('storage/'.old('team3')) }}" 
                                    class="img-responsive mt-2" width="auto" height="150"> 
                                <label class="form-label w-100">File input</label>
                                <input type="file" name="photo_team3" onchange="preview_team3(event)">
                                <input type="hidden" name="photo_team3_old" 
                                    value="{{ isset($team3) ? $team3->employee_photo : old('team3') }}" readonly>
                                <small class="form-text text-muted">For best results, use an image at least 128px by 128px in .jpg format</small>
                            </div>                            
                            <div class="mb-3">
                                <label for="position_team3" class="form-label">Position</label>
                                <input type="text" class="form-control" name="position_team3"  
                                    value="{{ isset($team3) ? $team3->position : old('team3') }}">
                            </div>      
                            <div class="mb-3">
                                <label for="author">Statement <small data-toggle="tooltip" title="Wajib diisi">*</small></label>
                                <textarea id="editor_team3" 
                                name="statement_team3" 
                                class="form-control" 
                                required>{{ isset($team3) ? $team2->statement : old('team3') }}</textarea>
                            </div>                       
                            <button type="submit" class="btn btn-primary">Save changes</button>     
                        </form>
                    </div>                    
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">                        
                        <h5 class="card-title mb-0">Team 4</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('teams.update_team4', 4) }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf          
                            @method('PUT')                   
                            <div class="mb-3">
                                <label for="name_team4" class="form-label">Name</label>
                                <input type="text" class="form-control" name="name_team4" 
                                    value="{{ isset($team4) ? $team4->employee_name : old('team4') }}">
                            </div>                            
                           
                            <div class="mb-3">
                                <label><strong>Photo</strong></label>	
                                <img id="previewPhotoTeam4" 
                                    src="{{ isset($team4) ? asset('storage/'.$team4->employee_photo) : asset('storage/'.old('team4')) }}" 
                                    class="img-responsive mt-2" width="auto" height="150"> 
                                <label class="form-label w-100">File input</label>
                                <input type="file" name="photo_team4" onchange="preview_team4(event)">
                                <input type="hidden" name="photo_team4_old" 
                                    value="{{ isset($team4) ? $team4->employee_photo : old('team4') }}" readonly>
                                <small class="form-text text-muted">For best results, use an image at least 128px by 128px in .jpg format</small>
                            </div>                            
                            <div class="mb-3">
                                <label for="position_team4" class="form-label">Position</label>
                                <input type="text" class="form-control" name="position_team4"  
                                    value="{{ isset($team4) ? $team4->position : old('team4') }}">
                            </div>      
                            <div class="mb-3">
                                <label for="author">Statement <small data-toggle="tooltip" title="Wajib diisi">*</small></label>
                                <textarea id="editor_team4" 
                                name="statement_team4" 
                                class="form-control" 
                                required>{{ isset($team4) ? $team2->statement : old('team4') }}</textarea>
                            </div>                       
                            <button type="submit" class="btn btn-primary">Save changes</button>     
                        </form>
                    </div>                    
                </div>
            </div>

        </div> 
    </div>
</div>

<script>
    function preview_team1(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            document.getElementById('previewPhotoTeam1').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

<script>
    function preview_team2(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            document.getElementById('previewPhotoTeam2').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<script>
    function preview_team3(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            document.getElementById('previewPhotoTeam3').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<script>
    function preview_team4(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            document.getElementById('previewPhotoTeam4').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

<script>
    CKEDITOR.replace('editor_team1');
    CKEDITOR.replace('editor_team2');
    CKEDITOR.replace('editor_team3');
    CKEDITOR.replace('editor_team4');
</script>

@endsection