@extends('layouts.dashboard')

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

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="icon fa fa-ban"></i> Error!</h4>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title text-center" style="display:block;">
                        Edit Certificate
                    </h3>
                </div>

                <!-- form start -->
                <form role="form" method="post" action="{{ route('certificate.update', $certificate->id) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="box-body">
                        <div class="form-group">
                            <label for="name">Student Name</label>
                            <input 
                                type="text" 
                                class="form-control @error('name') is-invalid @enderror" 
                                name="name" 
                                id="name" 
                                value="{{ old('name', $certificate->name) }}" 
                                placeholder="Enter Student Name">
                            @error('name')
                                <span class="help-block text-red">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="school">School Name</label>
                            <input 
                                type="text" 
                                class="form-control @error('school') is-invalid @enderror" 
                                name="school" 
                                id="school" 
                                value="{{ old('school', $certificate->school) }}" 
                                placeholder="Enter Student School Name">
                            @error('school')
                                <span class="help-block text-red">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="class">Student Class</label>
                            <input 
                                type="text" 
                                class="form-control @error('class') is-invalid @enderror" 
                                name="class" 
                                id="class" 
                                value="{{ old('class', $certificate->class) }}" 
                                placeholder="Enter Student Class">
                            @error('class')
                                <span class="help-block text-red">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="age">Student Age</label>
                            <input 
                                type="number" 
                                class="form-control @error('age') is-invalid @enderror" 
                                name="age" 
                                id="age" 
                                value="{{ old('age', $certificate->age) }}" 
                                placeholder="Enter Student Age">
                            @error('age')
                                <span class="help-block text-red">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="phone">Parent Phone Number</label>
                            <input 
                                type="text" 
                                class="form-control @error('phone') is-invalid @enderror" 
                                name="phone" 
                                id="phone" 
                                value="{{ old('phone', $certificate->phone) }}" 
                                placeholder="Enter Parent's Phone Number">
                            @error('phone')
                                <span class="help-block text-red">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="photo">Passport Photograph</label>
                            <input 
                                type="file" 
                                class="@error('photo') is-invalid @enderror" 
                                name="photo" 
                                id="photo"
                                accept="image/*"
                                onchange="previewImage(event)">
                            <p class="help-block">Upload a new passport photo to replace the old one.</p>
                            @error('photo')
                                <span class="help-block text-red">{{ $message }}</span>
                            @enderror

                            <!-- Old Photo -->
                            @if($certificate->photo)
                                <div class="mt-3">
                                    <p>Current Passport:</p>
                                    <img src="{{ asset('storage/' . $certificate->photo) }}" alt="Current Photo" class="img-responsive img-thumbnail" style="max-width: 100px;">
                                </div>
                            @endif

                            <!-- Preview box -->
                            <div class="mt-3">
                                <img id="photoPreview" src="#" alt="New Passport Preview" class="img-responsive img-thumbnail hidden" style="max-width: 100px;">
                            </div>
                        </div>
                    </div>

                    <div class="box-footer">
                        <button type="submit" class="btn btn-success btn-block">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- JS for image preview -->
<script>
    function previewImage(event) {
        var input = event.target;
        var preview = document.getElementById('photoPreview');

        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.remove('hidden');
            }
            reader.readAsDataURL(input.files[0]);
        } else {
            preview.src = '#';
            preview.classList.add('hidden');
        }
    }
</script>
@endsection