@extends('layout_dashboard.layout')
@section('title', 'Tambah Informasi Sistem PSB Al-Qodiri Jember')

@section('content')
    <div class="content-body">

        <!-- row -->

        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Tambah Data Informasi PSB</h4>
                            <hr>

                            <div class="form-validation">
                                <form class="form-valide" action="{{ route('store_informasi') }}" method="post"
                                    enctype="multipart/form-data" id="informasiForm">
                                    @method('POST')
                                    @csrf
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="val-username">Judul <span
                                                class="text-danger">*</span>
                                        </label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control @error('judul') is-invalid @enderror"
                                                id="judul" name="judul" placeholder="Masukkan Judul"
                                                value="{{ old('judul') }}">
                                            @error('judul')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="val-email">Gambar <span
                                                class="text-danger">*</span>
                                        </label>
                                        <div class="col-lg-6">
                                            <input type="file" class="form-control @error('gambar') is-invalid @enderror"
                                                id="gambar" name="gambar" accept="image/*">
                                            @error('gambar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Format: JPG, PNG, JPEG. Maksimal 2MB</small>
                                        </div>
                                    </div>
                                    <hr>
                                    <h4> Editor Teks </h4>
                                    <textarea class="summernote @error('isi_artikel_informasi') is-invalid @enderror"
                                        name="isi_artikel_informasi" id="isi_artikel_informasi"
                                        placeholder="Masukkan Isi Artikel Informasi">
                                                {{ old('isi_artikel_informasi', '<h3>Isikan Artikel Informasinya disini!</h3>') }}
                                            </textarea>
                                    @error('isi_artikel_informasi')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror

                                    <hr>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="val-skill">Status <span
                                                class="text-danger">*</span>
                                        </label>
                                        <div class="col-lg-6">
                                            <select class="form-control @error('status') is-invalid @enderror" id="status"
                                                name="status">
                                                <option value="">Pilih Status</option>
                                                <option value="AKTIF" {{ old('status') == 'AKTIF' ? 'selected' : '' }}>AKTIF
                                                </option>
                                                <option value="NONAKTIF" {{ old('status') == 'NONAKTIF' ? 'selected' : '' }}>
                                                    NONAKTIF</option>
                                            </select>
                                            @error('status')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="col-lg-8 ml-auto">
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- #/ container -->
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // Client-side validation
            $('#informasiForm').validate({
                rules: {
                    judul: {
                        required: true,
                        minlength: 5,
                        maxlength: 255
                    },
                    gambar: {
                        required: true,
                        extension: "jpg|jpeg|png",
                        filesize: 2 * 1024 * 1024 // 2MB
                    },
                    isi_artikel_informasi: {
                        required: true,
                        minlength: 10
                    },
                    status: {
                        required: true
                    }
                },
                messages: {
                    judul: {
                        required: "Judul harus diisi",
                        minlength: "Judul minimal 5 karakter",
                        maxlength: "Judul maksimal 255 karakter"
                    },
                    gambar: {
                        required: "Gambar harus diupload",
                        extension: "Format file harus JPG, JPEG, atau PNG",
                        filesize: "Ukuran file maksimal 2MB"
                    },
                    isi_artikel_informasi: {
                        required: "Isi artikel harus diisi",
                        minlength: "Isi artikel minimal 10 karakter"
                    },
                    status: {
                        required: "Status harus dipilih"
                    }
                },
                errorElement: 'div',
                errorPlacement: function (error, element) {
                    if (element.hasClass('summernote')) {
                        error.insertAfter(element.next('.note-editor'));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid').removeClass('is-valid');
                    if ($(element).hasClass('summernote')) {
                        $(element).next('.note-editor').addClass('is-invalid');
                    }
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                    if ($(element).hasClass('summernote')) {
                        $(element).next('.note-editor').removeClass('is-invalid');
                    }
                }
            });

            // Custom method for file size validation
            $.validator.addMethod('filesize', function (value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, 'Ukuran file terlalu besar');
        });
    </script>
@endsection