@extends('layouts.master')
@section('title')
@lang('translation.Data_Tables')
@endsection
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style type="text/css">
        .select2-selection__choice__display{
            padding-left: 20px !important;
        }
    </style>
@endsection
@section('content')
    @include('components.breadcum')
    <div class="row">
        <div class="col-12">
        </div>
        <div class="card">
            <div class="card-body">
                <form class="" name="main_form" id="main_form" method="post" action="{{route('admin.custom_notification.update',$data->id)}}" enctype="multipart/form-data">
                    {!! get_error_html($errors) !!}
                    @csrf
                    @method('PATCH')
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>{{__('Type')}}</label>
                        <div class="col-md-5">
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="all_users"  @if($data->type == 'all_users') checked @endif>&nbsp;All Users</label>
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="select_user" @if($data->type == 'select_user') checked @endif>&nbsp;Selected User</label>
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="pet_shop" @if($data->type == 'pet_shop') checked @endif>&nbsp;Pet shop</label>
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="pet_age" @if($data->type == 'pet_age') checked @endif>&nbsp;Pet age</label>
                        </div>
                    </div>
                    @if($data->type == 'select_user')
                        <div class="mb-3 row" id="selct_user">
                            <label for="example-text-input" class="col-md-2 col-form-label">Users</label>
                            <div class="col-md-10">
                                <select class="form-control" name="users[]" id="users" multiple="multiple">
                                    @foreach($users as $users_new)
                                    <option value="{{$users_new->id}}" @if(in_array($users_new->id, $data->user_id)) selected @endif>{{$users_new->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @else
                        <div class="mb-3 row d-none" id="selct_user">
                            <label for="example-text-input" class="col-md-2 col-form-label">Users</label>
                            <div class="col-md-10">
                                <select class="form-control" name="users[]" id="users" multiple="multiple">
                                    @foreach($users as $users_new)
                                    <option value="{{$users_new->id}}">{{$users_new->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif


                    @if($data->type == 'pet_shop')
                        <div class="mb-3 row" id="pet_shop">
                            <label for="example-text-input" class="col-md-2 col-form-label">Pet shop list</label>
                            <div class="col-md-10">
                                <select class="form-control" name="pet_shop_list[]" id="pet_shop_list" multiple="multiple">
                                    @foreach($pet_shop_list as $pet_shop_list_new)
                                    <option value="{{$pet_shop_list_new->id}}" @if(in_array($pet_shop_list_new->id, $data->pet_shop_list)) selected @endif>{{$pet_shop_list_new->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @else
                        <div class="mb-3 row d-none" id="pet_shop">
                            <label for="example-text-input" class="col-md-2 col-form-label">Pet shop list</label>
                            <div class="col-md-10">
                                <select class="form-control" name="pet_shop_list[]" id="pet_shop_list" multiple="multiple">
                                    @foreach($pet_shop_list as $pet_shop_list_new)
                                    <option value="{{$pet_shop_list_new->id}}">{{$pet_shop_list_new->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                    @if($data->type == 'pet_age')
                        <div class="mb-3 row" id="pet_age">
                            <label for="example-text-input" class="col-md-2 col-form-label">Age(in Months)</label>
                            <div class="col-md-10">
                                <input class="form-control" type="number" name="pet_age_in_month" id="pet_age_in_month" value="{{$data->pet_age_in_month}}" min="1">
                            </div>
                        </div>
                    @else
                        <div class="mb-3 row d-none" id="pet_age">
                            <label for="example-text-input" class="col-md-2 col-form-label">Age(in Months)</label>
                            <div class="col-md-10">
                                <input class="form-control" type="number" name="pet_age_in_month" id="pet_age_in_month" min="1">
                            </div>
                        </div>
                    @endif  

                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Title</label>
                        <div class="col-md-10">
                            <input type="text" name="title" id="title" class="form-control" value="{{$data->title}}" placeholder="Title">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Short Description</label>
                        <div class="col-md-10">
                            <input type="text" name="short_description" id="short_description" class="form-control" value="{{$data->description}}" placeholder="Short Description">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Date</label>
                        <div class="col-md-10">
                                                       <input type="datetime-local" name="date_time" id="date_time" onclick="this.showPicker();" class="form-control" value="{{date('Y-m-d\TH:i',strtotime($data->date_time))}}" min="{{$new_date}}">
                        </div>
                    </div>
                    <div class="kt-portlet__foot">
                        <div class=" ">
                            <div class="row">
                                <div class="wd-sl-modalbtn">
                                    <button  type="submit" class="btn btn-primary waves-effect waves-light" id="save_changes">Submit</button>
                                    <a href="{{route('admin.custom_notification.index')}}" id="close"><button type="button" class="btn btn-outline-secondary waves-effect">Cancel</button></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#users').select2();
    });

    $(document).ready(function() {
        $('#pet_shop_list').select2();
    });

    $(function () {
        $("#main_form").validate({
            ignore: [],
            rules: {
                type: {required: true},
                title: {required: true,maxlength:50},
                short_description: {required: true,maxlength:200},
                date_time: {required: true},
            },
            messages: {
                type: {required: 'Please Select Users Type.'},
                title: {required: "Please enter title"},
                short_description: {required: "Please enter Short Description"},
                date_time: {required: "Please Select Date."},
            },
            submitHandler: function (form) {
                addOverlay();
                form.submit();
            },
            errorPlacement: function (error, element) {
                error.insertAfter($(element))
            }, 
            errorPlacement: function (error, element) {
                if (element.attr("type") == "radio") {
                    error.insertAfter($(element).parent().children().last());
                } else {
                    error.insertAfter($(element))
                }
            },
            errorPlacement: function (error, element) {
                if (element.attr("id") == "users") {
                    error.insertAfter($(element).parent().children().last());
                } else {
                    error.insertAfter($(element))
                }
            }
        });
    });

    $('input[type=radio][name=type]').change(function () {
        if (this.value == 'all_users') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').addClass('d-none');
            $('#pet_shop').addClass('d-none');
            $('#pet_age').addClass('d-none');
        } else if(this.value == 'select_user') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').removeClass('d-none');
            $('#pet_shop').addClass('d-none');
            $('#pet_age').addClass('d-none');
            $('#users').rules( "add", {
                required: true,
                messages: {
                    required: "Please select user from users list.",
                }
            });
            $('#pet_shop_list').rules("remove");
            $('#pet_age_in_month').rules("remove");
        } else if(this.value == 'pet_shop') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').addClass('d-none');
            $('#pet_shop').removeClass('d-none');
            $('#pet_age').addClass('d-none');
            $('#pet_shop_list').rules( "add", {
                required: true,
                messages: {
                    required: "Please select pet shop from pet shop list.",
                }
            });
            $('#users').rules("remove");
            $('#pet_age_in_month').rules("remove");
        } else if(this.value == 'pet_age') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').addClass('d-none');
            $('#pet_shop').addClass('d-none');
            $('#pet_age').removeClass('d-none');
            $('#pet_age_in_month').rules( "add", {
                required: true,
                min: 1,
                messages: {
                    required: "Please enter pet age in months.",
                }
            });
            $('#pet_shop_list').rules("remove");
            $('#users').rules("remove");
        }
    });
</script>
@endsection