@extends('admin.layouts.app')

@push('style')
<link rel="stylesheet" href="{{asset('admin/assets/css/main.css')}}">
<link rel="stylesheet" href="{{asset('admin/assets/css/color_skins.css')}}">
@endpush

@section('content')
<section class="content home">
    <div class="block-header">
        <!-- Start Content-->
        <div class="container-fluid">
            <div class="body">

                <div class="row">
                    <div class="col-lg-12 mt-3 mb-3">
                        <h2 class="text-center">{{!empty($shelterDetails) ? 'EDIT' : 'ADD'}} SHELTER</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">

                                @if(empty($shelterDetails))
                                <form class="form" name="createShelter" id="createShelter" method="post" action="{{route('admin-store_shelter')}}" enctype="multipart/form-data">
                                    @else
                                    <form class="form" name="updateShelter" id="updateShelter" method="post" action="{{ route('admin-update_shelter', $shelterDetails->id) }}" enctype="multipart/form-data">
                                        @method('PUT')
                                        @endif

                                        @csrf

                                        <input type="hidden" name="shelter_id" id="shelter_id" value="{{ $shelterDetails->id ?? ''}}">

                                        <div class="form-group form-float">
                                            <div class="form-line">
                                                <input type="text" id="name" name="name" class="form-control" value="{{ $shelterDetails->name ?? '' }}">
                                                <label class="form-label">Shelter Name</label>
                                            </div>
                                        </div>

                                        <div class="form-group form-float">
                                            <div class="form-line">
                                                <input type="text" id="address" name="address" class="form-control" value="{{ $shelterDetails->address ?? '' }}">
                                                <label class="form-label">Address</label>
                                            </div>
                                        </div>

                                        <div>
                                            @if(empty($shelterDetails))
                                            <input type="submit" class="btn btn-success" class="add_shelter" value="Add">
                                            @else
                                            <input type="submit" class="btn btn-success" class="update_shelter" value="Update">
                                            @endif
                                        </div>
                                    </form>
                                </form>

                            </div>
                        </div> <!-- end card-->
                    </div> <!-- end col-->
                </div>

            </div>
        </div>
    </div>
</section>

@endsection

@push('script')
<script src="{{asset('admin/assets/bundles/libscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('admin/assets/bundles/vendorscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->

<script src="{{asset('admin/assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('admin/assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->

<script src="{{asset('admin/assets/bundles/mainscripts.bundle.js')}}"></script><!-- Custom Js -->
<script src="{{asset('admin/assets/js/pages/forms/form-validation.js')}}"></script>

<script>
    //JQUERY FORM VALIDATION FOR ADD AND EDIT  
    $('#createShelter,#updateShelter').validate({
        rules: {
            'name': {
                'required': true
            },
            'address': {
                'required': true
            },
        },
        messages: {
            'name': {
                'required': 'Please enter name.'
            },
            'address': {
                'required': 'Please enter address.'
            },
        },

        highlight: function(input) {
            $(input).parents('.form-line').addClass('error');
        },
        unhighlight: function(input) {
            $(input).parents('.form-line').removeClass('error');
        },
        errorPlacement: function(error, element) {
            $(element).parents('.form-group').append(error);
        }
    });
</script>
<script>
    //WHEN EDIT FORM WILL OPEN

    document.addEventListener('DOMContentLoaded', function() {
        // Get all the form inputs
        const formInputs = document.querySelectorAll('.form-control');

        // Iterate over each input
        formInputs.forEach(function(input) {
            // Check if the input has a predefined value
            if (input.value !== '') {
                // Add a class to the parent form-group to show the label
                input.parentElement.classList.add('focused');
            }

            // Add event listener for input focus
            input.addEventListener('focus', function() {
                // Add a class to the parent form-group to show the label
                this.parentElement.classList.add('focused');
            });

            // Add event listener for input blur
            input.addEventListener('blur', function() {
                // Check if the input value is empty
                if (this.value === '') {
                    // Remove the class from the parent form-group to hide the label
                    this.parentElement.classList.remove('focused');
                }
            });
        });
    });
</script>

@endpush