@extends('template.master')
@section('title', 'Add/Edit Spotlight Member')
@push('styles')
<style>
    .img_pre {
        width: 200px;
        height: 200px;
        padding: 10px;
    }

    .note-editable {
        min-height: 300px !important;
    }

    .modal-content>.modal-body>p>img {
        object-fit: contain;
        width: 100% !important;
        height: 100% !important;
    }

</style>
@endpush
@section('content')
<div class="mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                    <h4 class="card-title" style="color: #f0ac63 !important;"><strong>Add/Edit Spotlight Member</strong></h4>
                    <a href="{{ route('spotlight.index') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
                </div>
                <div class="card-body">
                    <form class="form" id="taxo-form" action="{{ isset($spotLight) && !empty($spotLight->spotlight_member_id) ? route('spotlight.update',$spotLight->spotlight_member_id) :  route('spotlight.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @if(isset($spotLight) && !empty($spotLight->spotlight_member_id))
                        <input type="hidden" name="_method" value="PUT" />
                        <input type="hidden" name="spotlight_member_id" value="{{$spotLight->spotlight_member_id}}" />
                        @endif
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="spotlight_member_contact_name" class="mt-2">Contact Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="spotlight_member_contact_name" name="spotlight_member_contact_name" placeholder="Contact Name" value="{{ (isset($spotLight) && !empty($spotLight->spotlight_member_contact_name)) ? $spotLight->spotlight_member_contact_name : old('spotlight_member_contact_name') }}">
                                    @if($errors->has('spotlight_member_contact_name'))
                                    <div class="error">{{ $errors->first('spotlight_member_contact_name') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="spotlight_member_contact_email" class="mt-2">Contact Email <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="spotlight_member_contact_email" name="spotlight_member_contact_email" placeholder="Contact Email" value="{{ (isset($spotLight) && !empty($spotLight->spotlight_member_contact_email)) ? $spotLight->spotlight_member_contact_email : old('spotlight_member_contact_email') }}">
                                    @if($errors->has('spotlight_member_contact_email'))
                                    <div class="error">{{ $errors->first('spotlight_member_contact_email') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="spotlight_member_company_logo" class="mt-2">Company Logo <span class="text-danger">*</span></label>
                                    <input type="file" class="form-control" id="spotlight_member_company_logo" name="spotlight_member_company_logo" style="border:none;" accept="image/png, image/jpeg, image/jpg">
                                    @if($errors->has('spotlight_member_company_logo'))
                                    <div class="error">{{ $errors->first('spotlight_member_company_logo') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                @if(isset($spotLight) && !empty($spotLight->spotlight_member_company_logo))
                                <div class="row">
                                    <img src="{{ asset('spotlight-member/'.$spotLight->spotlight_member_company_logo) }}" style="width:200px;height:200px;padding:10px;">
                                </div>
                            @endif
                                <div id="preview-container"></div>
                            </div>
                        </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="spotlight_member_company_short_description" class="mt-2">Short Desc <span class="text-danger">*</span></label>
                                        <textarea class="form-control" id="spotlight_member_company_short_description" name="spotlight_member_company_short_description" placeholder="Short Desc">@if(isset($spotLight) && !empty($spotLight->spotlight_member_company_short_description)) {{$spotLight->spotlight_member_company_short_description}}@else{{old('spotlight_member_company_short_description')}}@endif</textarea>
                                        @if($errors->has('spotlight_member_company_short_description'))
                                        <div class="error">{{ $errors->first('spotlight_member_company_short_description') }}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="spotlight_member_company_long_description" class="mt-2">Long Desc <span class="text-danger">*</span></label>
                                        <textarea class="form-control summernote" id="spotlight_member_company_long_description" name="spotlight_member_company_long_description" placeholder="Long Description">@if(isset($spotLight) && !empty($spotLight->spotlight_member_company_long_description)){{$spotLight->spotlight_member_company_long_description}}@else{{old('spotlight_member_company_long_description')}}@endif</textarea>
                                        @if($errors->has('spotlight_member_company_long_description'))
                                        <div class="error">{{ $errors->first('spotlight_member_company_long_description') }}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-sm-6">
                                <label for="spotlight_member_status" class="mt-2">Status</label>
                                    <div class="form-group clearfix">
                                        <div class="icheck-success d-inline">
                                            <input type="radio" name="spotlight_member_status" value="1" id="radioSuccess1" {{  (isset($spotLight->spotlight_member_status)) && @$spotLight->spotlight_member_status ==1? "checked" : "" }} checked>
                                            <label for="radioSuccess1">
                                                Active
                                            </label>
                                        </div>
                                        <div class="icheck-danger d-inline">
                                            <input type="radio" name="spotlight_member_status" value="0" id="radioDanger2" {{ (isset($spotLight->spotlight_member_status)) && @$spotLight->spotlight_member_status ==0? "checked" : "" }}>
                                            <label for="radioDanger2">
                                                Inactive
                                            </label>
                                        </div>
                                        @if($errors->has('spotlight_member_status'))
                                        <div class="error">{{ $errors->first('spotlight_member_status') }}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn mr-2 mt-5" id="submitTaxo" style="background: #000000;color: #f0ac63 !important;">Submit</button>
                            <a class="btn btn-light mt-5" href="{{url('/spotlight')}}">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('child-scripts')
<script>
    // JavaScript code
    document.getElementById('spotlight_member_company_logo').addEventListener('change', function(event) {
        $('img').hide();
        var previewContainer = document.getElementById('preview-container');
        previewContainer.innerHTML = ''; // Clear any existing previews

        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();

            reader.onload = function(e) {
                var imageElement = document.createElement('img');
                imageElement.src = e.target.result;
                imageElement.classList.add('preview-image');
                imageElement.classList.add('img_pre');
                previewContainer.appendChild(imageElement);
            }

            reader.readAsDataURL(file);
        }
    });
</script>

<script>
    $(function() {
        $('#spotlight_member_company_long_description').summernote();

        $("#taxo-form").validate({
            errorElement: "span",
            errorClass: "error",
            ignore: '.note-editor *',
            rules: {
                spotlight_member_contact_email: {
                    required: true,
                    maxlength: 255,
                    email: true,
                },
                spotlight_member_company_short_description: {
                    required: true,
                },
                spotlight_member_company_long_description: {
                    required: true,
                },
                spotlight_member_contact_name: {
                    required: true,
                    maxlength: 255
                }
            },
            messages: {
                spotlight_member_contact_email: {
                    required: 'Contact email required.',
                },
                spotlight_member_company_short_description: {
                    required: 'Short Desc required.',
                },
                spotlight_member_company_long_description: {
                    required: 'Long Desc  required.',
                },
                spotlight_member_contact_name: {
                    required: 'Contact name required.',
                }
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                if (element.hasClass('summernote')) {
                    error.insertAfter(element.parent().find('.note-editor'));
                } else {
                    element.after(error); // default error placement
                }
            }
        });
    })
</script>
@endpush