@extends('Root.layout.master')
@section('title',"Create Country")
@section('page_name',"Create Country")

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css" rel="stylesheet">
    <style>
        /* Small fix to ensure it looks good in Bootstrap 5 */
        .note-editable { background-color: #fff !important; color: #000 !important; }
    </style>
@endpush

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form method="post" action="{{route('admin.country.store')}}" autocomplete="off" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="country" class="form-label">Country Name</label>
                        <input type="text" name="country" class="form-control" placeholder="Enter Country">
                        @error('country') <span class="text-danger">{{$message}}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label for="flag" class="form-label">Upload Flag Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*" required>
                        @error('image') <span class="text-danger">{{$message}}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Content</label>
                        <textarea id="summernote" name="body"></textarea>
                        @error('body') <span class="text-danger">{{$message}}</span> @enderror
                    </div>

                    <button type="submit" class="btn btn-primary px-4">Submit</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#summernote').summernote({
                placeholder: 'Type scholarship details here...',
                tabsize: 2,
                height: 300,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });
        });
    </script>
@endpush