@extends('layouts.admin')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="row">

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">                        
                        <h5 class="card-title mb-0">Suporter 1</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('suporters.update_suporter1', 1) }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf      
                            @method('PUT')                       
                            <div class="mb-3">
                                <label for="name_suporter1" class="form-label">Name</label>
                                <input type="text" class="form-control" name="name_suporter1" 
                                    value="{{ isset($suporter1) ? $suporter1->name : old('suporter1') }}">
                            </div>                            
                            <div class="mb-3">
                                <label><strong>Photo</strong></label>	
                                <img id="previewPhotoSuporter1" 
                                    src="{{ isset($suporter1) ? asset('storage/'.$suporter1->photo) : asset('storage/'.old('suporter1')) }}" 
                                    class="img-responsive mt-2" width="auto" height="150"> 
                                <label class="form-label w-100">File input</label>
                                <input type="file" name="photo_suporter1" onchange="preview_suporter1(event)">
                                <input type="hidden" name="photo_suporter1_old" 
                                    value="{{ isset($suporter1) ? $suporter1->photo : old('suporter1') }}" 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="instagram_url_suporter1" class="form-label">Instagram URL</label>
                                <input type="text" class="form-control" name="instagram_url_suporter1"  
                                    value="{{ isset($suporter1) ? $suporter1->instagram_url : old('suporter1') }}">
                            </div>
                            <div class="mb-3">
                                <label for="instagram_id_suporter1" class="form-label">Instagram ID</label>
                                <input type="text" class="form-control" name="instagram_id_suporter1" 
                                    value="{{ isset($suporter1) ? $suporter1->instagram_id : old('suporter1') }}">
                            </div>
                            <div class="mb-3">
                                <label for="profesi_suporter1" class="form-label">Profesi</label>
                                <input type="text" class="form-control" name="profesi_suporter1"  
                                    value="{{ isset($suporter1) ? $suporter1->profesi : old('suporter1') }}">
                            </div>                            
                            <button type="submit" class="btn btn-primary">Save changes</button>     
                        </form>
                    </div>                    
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">                        
                        <h5 class="card-title mb-0">Suporter 2</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('suporters.update_suporter2', 2) }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')                        
                            <div class="mb-3">
                                <label for="name_suporter2" class="form-label">Name</label>
                                <input type="text" class="form-control" name="name_suporter2" id="inputName" 
                                    value="{{ isset($suporter2) ? $suporter2->name : old('suporter2') }}">
                            </div>                            
                            <div class="mb-3">
                                <label><strong>Photo</strong></label>	
                                <img id="previewPhotoSuporter2" 
                                    src="{{ isset($suporter2) ? asset('storage/'.$suporter2->photo) : asset('storage/'.old('suporter2')) }}" 
                                    class="img-responsive mt-2" width="auto" height="150"> 
                                <label class="form-label w-100">File input</label>
                                <input type="file" name="photo_suporter2" onchange="preview_suporter2(event)">
                                <input type="hidden" name="photo_suporter2_old" 
                                    value="{{ isset($suporter2) ? $suporter2->photo : old('suporter2') }}" 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="instagram_url_suporter2" class="form-label">Instagram URL</label>
                                <input type="text" class="form-control" name="instagram_url_suporter2" 
                                    value="{{ isset($suporter2) ? $suporter2->instagram_url : old('suporter2') }}">
                            </div>
                            <div class="mb-3">
                                <label for="instagram_id_suporter2" class="form-label">Instagram ID</label>
                                <input type="text" class="form-control" name="instagram_id_suporter2" id="inputName" 
                                    value="{{ isset($suporter2) ? $suporter2->instagram_id : old('suporter2') }}">
                            </div>
                            <div class="mb-3">
                                <label for="profesi_suporter2" class="form-label">Profesi</label>
                                <input type="text" class="form-control" name="profesi_suporter2"  
                                    value="{{ isset($suporter2) ? $suporter2->profesi : old('suporter2') }}">
                            </div>                            
                            <button type="submit" class="btn btn-primary">Save changes</button>     
                        </form>
                    </div>                    
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">                        
                        <h5 class="card-title mb-0">Suporter 3</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('suporters.update_suporter3', 3) }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf          
                            @method('PUT')                   
                            <div class="mb-3">
                                <label for="name_suporter3" class="form-label">Name</label>
                                <input type="text" class="form-control" name="name_suporter3" 
                                    value="{{ isset($suporter3) ? $suporter3->name : old('suporter3') }}">
                            </div>                            
                           
                            <div class="mb-3">
                                <label><strong>Photo</strong></label>	
                                <img id="previewPhotoSuporter3" 
                                    src="{{ isset($suporter3) ? asset('storage/'.$suporter3->photo) : asset('storage/'.old('suporter3')) }}" 
                                    class="img-responsive mt-2" width="auto" height="150"> 
                                <label class="form-label w-100">File input</label>
                                <input type="file" name="photo_suporter3" onchange="preview_suporter3(event)">
                                <input type="hidden" name="photo_suporter3_old" 
                                    value="{{ isset($suporter3) ? $suporter3->photo : old('suporter3') }}" 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="instagram_url_suporter3" class="form-label">Instagram URL</label>
                                <input type="text" class="form-control" name="instagram_url_suporter3"  
                                    value="{{ isset($suporter3) ? $suporter3->instagram_url : old('suporter3') }}">
                            </div>
                            <div class="mb-3">
                                <label for="instagram_id_suporter3" class="form-label">Instagram ID</label>
                                <input type="text" class="form-control" name="instagram_id_suporter3"  
                                    value="{{ isset($suporter3) ? $suporter3->instagram_id : old('suporter3') }}">
                            </div>
                            <div class="mb-3">
                                <label for="profesi_suporter3" class="form-label">Profesi</label>
                                <input type="text" class="form-control" name="profesi_suporter3"  
                                    value="{{ isset($suporter3) ? $suporter3->profesi : old('suporter3') }}">
                            </div>                            
                            <button type="submit" class="btn btn-primary">Save changes</button>     
                        </form>
                    </div>                    
                </div>
            </div>

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

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

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

@endsection