@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Create New Facility</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Home CMS</li>
                    <li class="breadcrumb-item active">Our Facilities</li>
                    <li class="breadcrumb-item active">Create Facility</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <form id="add_our_facility_frm" action="{{ route('admin.storeOurFacility') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Add New Facility</h3>
                </div>

                <div class="card-body">
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input type="text" name="title" id="title" class="form-control">
                        <p id="titleErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea name="description" id="description" class="form-control summernote" rows="10"></textarea>
                        <p id="descriptionErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="image">Image</label>
                        <input type="file" name="image" id="image" class="form-control">
                        <small class="text-muted">Allowed types: jpeg, png, jpg, gif, webp</small>
                        <p id="imageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

                        {{-- image preview --}}
                        <div class="mt-2">
                            <!-- <p><strong>Image Preview:</strong></p> -->
                            <img 
                                id="imagePreview" 
                                src="#" 
                                alt="Preview" 
                                style="display:none; max-width: 250px; border: 1px solid #ddd; border-radius: 6px; padding: 4px;"
                            >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="status">Status</label>
                        <select name="status" id="status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        <p id="statusErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary"><span>Save Facility</span></button>
                </div>
            </div>
        </form>
    </div>
</section>

@stop

@section('js')
<script>
    $(document).ready(function() {
        // Initialize Summernote with height adjustment
        $('.summernote').summernote({
            height: 250,  // Set height for Summernote editor
        });

        $("#add_our_facility_frm").submit(function(event) {
            event.preventDefault();

            var submitForm = $(this);
            var submitBtn = submitForm.find('button[type="submit"]');

            $.ajax({
                url: submitForm.attr('action'),
                data: new FormData(submitForm[0]),
                type: 'POST',
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    submitBtn.attr("disabled", true).find('span').text('Saving...');
                    submitForm.find('.text-danger').text(''); // Clear previous error messages
                    submitForm.find('input').removeClass('is-invalid'); // Remove error styling
                },
                success: function(response) {
                    submitBtn.attr("disabled", false).find('span').text('Save Facility');

                    if (response.status == 200) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.success(response.msg);
                        submitForm.trigger('reset');

                        setTimeout(function() {
                            window.location.href = "{{ route('admin.listOurFacilities') }}";
                        }, 1000);

                    } else if (response.status == 422) {
                        // Handle validation errors
                        $.each(response.errors, function(key, value) {
                            $('#' + key + 'Err').text(value[0]); // Display validation error
                            $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                        });
                    } else if (response.status == 500) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error(response.msg);
                    }
                },
                error: function(xhr) {
                    submitBtn.attr("disabled", false).find('span').text('Save');
                    alertify.set('notifier', 'position', 'top-right');
                    // alertify.error("An error occurred: " + xhr.responseText);
                }
            });
        });
    });
</script>

<script>
    document.getElementById("image").addEventListener("change", function(event) {
        const file = event.target.files[0];
        const preview = document.getElementById("imagePreview");

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = "block";
            };
            reader.readAsDataURL(file);
        } else {
            preview.src = "#";
            preview.style.display = "none";
        }
    });
</script>
@stop