@extends('admin.layouts.master')

@section('page_title', __('admin.Add New :name', ['name' => __('admin.message')]))

@section('page_heading', __('admin.Add New :name', ['name' => __('admin.message')]))

@section('page_text', __('admin.Add New :name', ['name' => __('admin.message')]))

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Message')

@section('page_breadcrumb_item2', 'Add Message')

@section('css')
    <style>
        .errorText {
            color: rgb(241, 26, 26) !important;
            background-color: rgb(209, 175, 170);
            margin-top: 5px;
            border-radius: 10px;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-flush">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-10">
                            {!! Form::open([
                                'enctype' => 'multipart/form-data',
                                'id' => 'msg-form',
                                'route' => 'message.store',
                                'method' => 'POST',
                            ]) !!}
                            <div class="errorText  container">
                               
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <h3 class="font-weight-bold">@lang('admin.Your Message')</h3>
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                {!! Form::textarea('message', null, [
                                    'placeholder' => '',
                                    'class' => 'form-control required',
                                    'rows' => '5',
                                ]) !!}
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="upload-file" class="btn btn-outline-secondary "
                                    style="background: rgb(202, 198, 198)">
                                    <i class="fa fa-link"></i> Attach a File
                                    <input type="file" class="hidden" id="upload-file" name="msg_file">
                                </label>
                            </div>

                            <div class="d-flex flex-column mb-7 fv-row">
                                <h3 class="font-weight-bold">@lang('admin.Message Options')</h3>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" name="internal_message" value="1" id="internal_message"
                                    class="form-check-input">
                                <label for="internal_message" class="form-label ms-1">@lang('admin.Internal Messaging')</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" name="email_status" value="1" id="email"
                                    class="form-check-input">
                                <label for="email" class="form-label ms-1">@lang('admin.Email')</label>
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row mt-3">
                                <h3 class="font-weight-bold">@lang('admin.Who do you want to sent to?')</h3>
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                {!! Form::select(
                                    'sent_to',
                                    ['0' => 'Send to a Group(e.g whole building)', '1' => 'Send to Individual Residents'],
                                    [],
                                    [
                                        'required' => 'required',
                                        'class' => 'form-control ',
                                        'placeholder' => 'Please choose...',
                                        'id' => 'message-sent-to',
                                    ],
                                ) !!}
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row hidden" id="sent-to-group">
                                <h6 class="bg-primary p-2 text-white rounded"><strong>Which buildings?</strong></h6>
                                <div class="py-4" id="buildings"></div>
                                <h6 class="bg-primary p-2 text-white rounded"><strong>Which apartment types?</strong></h6>
                                <div class="py-4" id="aprtment_type"> </div>
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row hidden" id="sent-to-individual">
                                <div class="py-2" id="aprtments"></div>
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <div class="divider"></div>
                                <div class="clearfix">
                                    <button type="submit" id="next-btn"
                                        class="btn-shadow btn-wide float-right   btn-hover-shine btn btn-primary submit-btn">
                                        @lang('admin.Submit')
                                    </button>
                                    <a href="{{ route('message.index') }}" id="prev-btn"
                                        class="btn-shadow float-right btn-wide  mr-3 btn btn-outline-secondary">
                                        @lang('admin.Cancel')
                                    </a>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{asset('assets_admin/js/jquery.validate.min.js')}}"></script>
    <script type="text/javascript">
        // CSRF Token
        var CSRF_TOKEN = $('input[name="_token"]').val();
        $(document).ready(function() {
            $('#message-sent-to').change(function() {
                var key = $(this).val();
                console.log(key);
                $.ajax({
                    url: '/admin/message-sent-to',
                    type: 'get',
                    data: {
                        key: key
                    },
                    success: function(data) {
                        console.log(key.length);

                        if (key == 0 && key.length == 1) {
                            $('#buildings').empty();
                            $('#buildings').append(data.building_data);

                            $('#aprtment_type').empty();
                            $('#aprtment_type').append(data.apartment_type_data);


                            $('#sent-to-group').show();
                            $('#sent-to-individual').hide();
                        } else if (key == 1 && key.length == 1) {

                            $('#aprtments').empty();
                            $('#aprtments').append(data.apartment_data);

                            $('#sent-to-group').hide();
                            $('#sent-to-individual').show();
                        } else if (key.length == 0) {
                            $('#sent-to-group').hide();
                            $('#sent-to-individual').hide();
                        }

                    }
                });
            })

            $('.submit-btn').click(function() {
                var value = $('#message-sent-to').val();

                var a = [];
                $.each($(".building_id:checked"), function(){
                    a.push($(this).val());
                })

                var b = [];
                $.each($(".apartment_type_id:checked"), function(){
                    b.push($(this).val());
                })

                $('.apartment_id').removeClass('required');

                console.log(a.length,b.length);

                if(a.length || b.length){

                    $('.building_id').removeClass('required');
                    $('.apartment_type_id').removeClass('required');
                }else{
                    $('.building_id').addClass('required');
                    $('.apartment_type_id').addClass('required');
                }
                if (value == 0) {

                    $("#msg-form").validate({
                        messages: {
                            message: {
                                required: "Please Enter a message",
                            },
                            sent_to: {
                                required: "Please Select atleast one option",
                            },
                            'building_id[]': {
                                required: "Please Select atleast one building ",
                                maxlength: 1
                            },
                            'apartment_type_id[]': {
                                required: "Please Select atleast one Apartment Type",
                                maxlength: 1
                            },
                        },
                        errorClass: "errorText",
                        errorElement: 'li',
                        errorLabelContainer: '.errorText',
                    });
                } else if (value == 1) {
                    $('.apartment_id').addClass('required');

                    $('.building_id').removeClass('required');
                    $('.apartment_type_id').removeClass('required');

                    $("#msg-form").validate({
                        messages: {
                            message: {
                                required: "Please Enter a msg",
                            },
                            sent_to: {
                                required: "Please Select atleast one option",
                            },
                            'building_id[]': {
                                required: "Please Select atleast one building",
                                maxlength: 1
                            },
                            'apartment_type_id[]': {
                                required: "Please Select atleast one Apartment Type",
                                maxlength: 1
                            },
                        },
                        errorClass: "errorText",
                        errorElement: 'li',
                        errorLabelContainer: '.errorText',
                    });
                }
            })

        })
    </script>
@endsection