@extends('backend.dashboard.layout.master')
@section('content')
@if ($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif
<div class="container-xxl mt-5">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                @if (isset($method) && $method == 'PUT')
                {{ translate('Edit Language') }}
                @else
                {{ translate('Create Language') }}
                @endif
            </h3>
        </div>
        <div class="card-body">
            <form class="needs-validation" id="myForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" novalidate>
                {{ csrf_field() }}
                @if (isset($method))
                @method('PUT')
                @endif
                <div class="row g-3 mt-3">
                    <div class="col-md-4">
                        <label class="form-label">{{ translate('Name') }}</label>
                        <input type="text" class="form-control" value="{{ old('name', $Language->name) }}"  name="name">
                        <div class="invalid-feedback">{{ translate('Please enter a valid position') }}.</div>
                    </div>



                    <div class="col-md-4">
                        <label class="form-label">{{ translate('Flags') }}</label>
                        <input type="file" class="form-control" name="flag" onchange="previewImage(event)">
                        @if (isset($method) && $method == 'PUT')
                        <img src="{{ asset($Language->flag ?? 'assets/media/avatars/300-10.jpg') }}" alt="Image" class="img-thumbnail mt-2" width="80" height="80">
                        @endif
                        <div id="imagePreviewContainer" style="display: none; margin-top: 10px;">
                            <img id="imagePreview" src="" alt="Selected Image" class="img-thumbnail" width="80" height="80">
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-4">
                    <button class="btn btn-primary" type="submit">{{ translate('Submit Form') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
     document.getElementById('submitBtn').addEventListener('click', function(event) {
        var form = document.getElementById('myForm');
        if (!form.checkValidity()) {
            event.preventDefault();
            form.classList.add('was-validated');
            return;
        }

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = 'Loading...';

        setTimeout(function() {
            form.submit();
        }, 1000);

        event.preventDefault();
    });












    function previewImage(event) {
        var file = event.target.files[0];
        var previewContainer = document.getElementById('imagePreviewContainer');
        var imagePreview = document.getElementById('imagePreview');

        if (file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                previewContainer.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    }

</script>
@endsection