@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <span class="card-title">Edit Jenis Sarpras</span>

                @if($errors->any())
                    <div class="card-panel red lighten-4 red-text text-darken-4">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if(session('error'))
                    <div class="card-panel red lighten-4 red-text text-darken-4">
                        {{ session('error') }}
                    </div>
                @endif

                @if(session('success'))
                    <div class="card-panel green lighten-4 green-text text-darken-4">
                        {{ session('success') }}
                    </div>
                @endif

                <form action="{{ route('jns-sarpras.update', $jnsSarpras) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="input-field">
                        <input type="text" id="jenis_sarpras" name="jenis_sarpras" class="@error('jenis_sarpras') invalid @enderror" value="{{ old('jenis_sarpras', $jnsSarpras->jenis_sarpras) }}" required>
                        <label for="jenis_sarpras">Nama Jenis Sarpras</label>
                        @error('jenis_sarpras')
                            <span class="helper-text" data-error="{{ $message }}"></span>
                        @enderror
                    </div>

                    <div class="input-field">
                        <div class="file-field input-field">
                            <div class="btn">
                                <span>Gambar Marker (32x32 pixel)</span>
                                <input type="file" name="gmb_marker" accept="image/*" data-max-width="40" data-max-height="40">
                            </div>
                            <div class="file-path-wrapper">
                                <input class="file-path validate @error('gmb_marker') invalid @enderror" type="text">
                            </div>
                        </div>
                        @error('gmb_marker')
                            <span class="helper-text" data-error="{{ $message }}"></span>
                        @enderror
                        @if($jnsSarpras->gmb_marker)
                            <div class="current-image">
                                <p>Gambar Marker Saat Ini:</p>
                                <img src="{{ asset($jnsSarpras->gmb_marker) }}" alt="Current Marker" style="max-width: 40px; max-height: 40px;">
                            </div>
                        @endif
                        <div class="preview-container" style="margin-top: 10px; display: none;">
                            <p>Preview Gambar Baru:</p>
                            <img id="imagePreview" style="max-width: 40px; max-height: 40px; border: 1px solid #ddd; padding: 5px;">
                        </div>
                    </div>

                    <div class="card-action">
                        <a href="{{ route('jns-sarpras.index') }}" class="btn waves-effect waves-light grey">Kembali</a>
                        <button type="submit" class="btn waves-effect waves-light blue">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('input[name="gmb_marker"]').on('change', function() {
        const maxWidth = 40;
        const maxHeight = 40;
        const previewContainer = $('.preview-container');
        const imagePreview = $('#imagePreview');

        if (this.files && this.files[0]) {
            const reader = new FileReader();

            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    if (this.width > maxWidth || this.height > maxHeight) {
                        $('input[name="gmb_marker"]').val('');
                        swal("Dibatalkan", `Ukuran gambar harus maksimal ${maxWidth}x${maxHeight} pixel`, "warning");
                        previewContainer.hide();
                    } else {
                        imagePreview.attr('src', e.target.result);
                        previewContainer.show();
                    }
                };
                img.src = e.target.result;
            };

            reader.readAsDataURL(this.files[0]);
        } else {
            previewContainer.hide();
        }
    });
});
</script>
@endpush