@extends('administrator.layout')
@section('admintitle', 'Blog')
@section('content')

            <!-- Table Start -->
            <div class="container-fluid pt-4 px-4">
                <div class="row g-4">
                    <div class="col-12">
                        <div class="bg-light rounded h-100 p-4">
                            
                             @if (session()->has('success'))
                                <div class="alert alert-success alert-dismissible fade show mb-2" role="alert">
                                    <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.success') }} !</strong> {{ session()->get('success') }}.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                        
                            @if (session()->has('error'))
                                <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
                                    <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.error') }} !</strong> {{ session()->get('error') }}.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                            
                <div class="row mb-4 mt-0">
                    <div class="col-md-9 mt-3">
                        <h5>{{ isset($data) ? __('text.edit') : __('text.add') }} {{ __('text.blog') }}</h5>
                    </div>
                    <div class="col-md-3 mt-1 text-end">
                        <a href="{{route('blogs')}}">
                            <button class="btn btn-warning rounded-pill" data-toggle="modal" data-target="#create">{{ __('text.back') }}</button>
                        </a>
                    </div>
                </div>
                <!--form-->
                 <form action="{{ isset($data) ? route('update_blog', ['id' => $data[0]->id]) : route('add_blog') }}" method="POST" enctype="multipart/form-data">
    @csrf
    @if(isset($data))
        @method('PUT') 
        <input type="hidden" class="form-control border-primary" name="id" value="{{ isset($data[0]) ? $data[0]->id:'' }}">
        <input type="hidden" class="form-control border-primary" name="blog_id" value="{{  isset($data[1]) ? $data[1]->blog_id: '' }}">
        <input type="hidden" name="page" value="{{ $currentPage }}">
    @endif

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <span class="flag-icon flag-icon-gb"></span>
                <label for="blog_name_en" style="margin-top: 11px;">{{ __('text.name') }}<span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="blog_name_en" placeholder="{{ __('text.name') }}" name="name_" value="{{ old('name_', isset($data) && isset($data[0]) ? $data[0]->name : '' )}}">
                @error('name_')
                <p class="text-danger">{{ $message }}</p>
                @enderror
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <span class="flag-icon flag-icon-fr"></span>
                <label for="blog_name_fr" style="margin-top: 11px;">{{ __('text.name') }}<span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="blog_name_fr" placeholder="{{ __('text.name') }}" name="_name" value="{{ old('_name', isset($data) && isset($data[1]) ? $data[1]->name : '' )}}">
                @error('_name')
                <p class="text-danger">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <span class="flag-icon flag-icon-gb"></span>
                <label for="description_en" style="margin-top: 11px;">{{ __('text.description') }}</label>
                <textarea class="form-control" id="description_en" name="description[en]">{{ old('description.en', isset($data) && isset($data[0])  ? $data[0]->description : '' )}}</textarea>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <span class="flag-icon flag-icon-fr"></span>
                <label for="description_fr" style="margin-top: 11px;">{{ __('text.description') }}</label>
                <textarea class="form-control" id="description_fr" name="description[fr]">{{ old('description.fr', isset($data) && isset($data[1])? $data[1]->description : '' )}}</textarea>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="image" style="margin-top: 11px;">{{ __('text.image') }}</label>
                <input type="file" class="form-control" id="image" name="image" accept=".jpg, .png, .jpeg" onchange="validateImage()">
                <br>
                @if(isset($data) && isset($data[0]->image))
                    @if($data[0]->image)
                        <img src="{{ asset('/public/storage/blog/'.$data[0]->image) }}" style="width: 100px;">
                    @else
                        <img src="{{ asset('/public/storage/blog/no image.jpg') }}" style="width: 100px;">
                    @endif
                @endif
                @error('image')
                    <p class="text-danger">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="sort_order" style="margin-top: 11px;">{{ __('text.sort_order') }}</label>
                <input type="number" class="form-control" id="sort_order" placeholder="{{ __('text.sort_order') }}" name="sort_order" value="{{ old('sort_order', isset($data) && isset($data[0]) ? $data[0]->sort_order : '' )}}">
                @error('sort_order')
                <p class="text-danger">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <div class="text-end">
        <button type="submit" class="btn btn-primary">{{ __('text.submit') }}</button>
    </div>
</form>

                           
                        </div>
                    </div>
                </div>
            </div>
            <!-- Table End -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
          <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

        
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
       CKEDITOR.replace('description_fr');
    CKEDITOR.replace('description_en');
  
</script>

<script>
    function validateImage() {
        var input = document.getElementById('image');
        var file = input.files[0];
        if (file) {
            var mimeType = file.type;
            if (!mimeType.startsWith('image/')) {
                alert('Please upload a valid image file.');
                input.value = ''; // Clear the input
            }
        }
    }
</script>
@endsection