@extends('back.layouts.main')
@if ($model->exists)
    @section('title', 'تعديل رسالة #' . $model->id)
    @else
    @section('title', 'انشاء رسالة ')
    @endif

    @section('content')
        <div class="card">
            <div class="card-content collapse show">
                <div class="card-body card-dashboard">
                    <form method='post' enctype="multipart/form-data">

                        {{ csrf_field() }}
                        <div class="message-form row">
                            <div class='col-md-5 form-group'>
                                <label for="MessageContent">عنوان الرسالة</label>
                                <input type='text' class='form-control' name='scheduled_notification[title]'
                                    value='{{ $model->title }}'>

                            </div>
                            
                            <div class='col-md-5 form-group'>
                                <input type='hidden' name='scheduled_notification[is_active]' value='0'>  
                                <input type='checkbox' name='scheduled_notification[is_active]'
                                {{checked($model->is_active , 1)}}
                                value='1'>
                                <label for="MessageContent">مفعلة</label>

                            </div>

                            <div class='col-md-5 form-group'>
                                <label for="MessageContent">المحتوى</label>
                                <div data-emojiarea data-type="unicode" data-global-picker="false">
                                    <div class="emoji-button">&#x1f604;</div>
                                    <textarea name='scheduled_notification[content]' class="form-control" id="MessageContent"
                                        required placeholder="محتوى الرسالة">{!!  $model->content !!}</textarea>
                                </div>
                                <br>
                            </div>

                            <div class='col-md-5 form-group'>
                                <label for="MessageContent">إختيار اليوم</label>

                                <select required name="scheduled_notification[day]" class="form-control">
                                    <option value="">اختر اليوم</option>
                                    <option @if ($model->day == 'Saturdays')selected
                                        @endif value="Saturdays">السبت</option>
                                    <option @if ($model->day == 'Sundays')selected
                                        @endif value="Sundays">الأحد</option>
                                    <option @if ($model->day == 'Mondays')selected
                                        @endif value="Mondays">الأثنين</option>
                                    <option @if ($model->day == 'Tuesdays')selected
                                        @endif value="Tuesdays">الثلاثاء</option>
                                    <option @if ($model->day == 'Wednesdays')selected
                                        @endif value="Wednesdays">الأربعاء</option>
                                    <option @if ($model->day == 'Thursdays')selected
                                        @endif value="Thursdays">الخميس</option>
                                    <option @if ($model->day == 'Fridays')selected
                                        @endif value="Fridays">الجمعة</option>

                                </select>
                            </div>
                            <div class='col-md-5 form-group'>
                                <label for="MessageContent">إختيار الساعه</label>
                                <input type="time" name="scheduled_notification[time]" value='{{$model->time}}' class="form-control">
                            </div>

                            <div class='col-md-12'>
                                <h3>الصفحات </h3>
                            </div>
                            <div class='col-md-4'>						
                                <label for="">لنك خارجي</label>
                                <input type="text" class="form-control" name="scheduled_notification[link]" value='{{$model->link}}'>
                            </div>
                            <div class='col-md-4'>						
                                <label for="">او اختر الصفحة الداخلية</label>
                                <select name="scheduled_notification[page]" class="form-control">
                                    <option value=""> اختر الصفحة </option>
                                    @foreach ($pages as $page)
                                        <option {{ selected($page['page'], $model->page) }} value="{{ $page['page']}}">
                                            {{ $page['page'] }}
                                        </option>
                                    @endforeach
                                </select>
                                
                                <label for="">ID الصفحة </label>
                                <input type="text" class="form-control" name="scheduled_notification[page_params][id]" value='{{@$model->page_params['id']}}'>
                            </div>

                        </div>


                        <div class='clearfix'></div>
                        <div class="col-md-12">
                            <br>
                            <input type='submit' value='حفظ' name='save' class='btn btn-primary'>

                        </div>

                    </form>
                </div>
            </div>
        </div>

        @if (isset($errors))
            @push('footer')
                {!! $model->viewErrors() !!}
            @endpush
        @endif


    @stop



    @section('breadcrumbs')
        <li class="breadcrumb-item"><a href="{{ url('backend/scheduled_notification') }}">الرسائل</a></li>
        @if ($model->exists)
            <li class="breadcrumb-item active">تعديل</li>
        @else
            <li class="breadcrumb-item active">انشاء</li>
        @endif
    @stop


    @push('footer')
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
        <script>
            $('.radiobutton input').change(function() {
                var val = $(this).val();
                if (val == 'order') {
                    $('.order').show();
                    $('.region').hide();
                    $('.custom').hide();
                    $('.custom input').val('');
                } else if (val == 'region') {
                    $('.region').show();
                    $('.order').hide();
                    $('.custom').hide();
                    $('.custom input').val('');
                } else if (val == 'custom') {
                    $('.region').hide();
                    $('.order').hide();
                    $('.custom').show();
                    $('.region select').val('');
                } else {
                    $('.region').hide();
                    $('.order').hide();
                    $('.custom').hide();
                    $('.region select').val('');
                    $('.custom input').val('');
                }
            })
            $('.selectUser').select2({
                ajax: {
                    url: 'user/select_user',
                    processResults: function(data, params) {
                        data = $.parseJSON(data);
                        return data;
                    }
                },
                minimumInputLength: 2,

            });

            $('#message-type').change(function() {
                var val = $(this).val();
                if (val == 1)
                    $('.custom_number').hide();
                else
                    $('.custom_number').show();

            })

            $('#message-type').trigger('change');
            $('.radiobutton input').each(function() {
                if ($(this).is(':checked')) {
                    $(this).trigger('change');
                }
            })

        </script>

        <style>
            .radiobutton {
                width: 120px;
                display: inline-block;
            }

        </style>
    @endpush


    @push('footer')
        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
        <script>
            $('.daterange').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY/MM/DD',
                    cancelLabel: 'Clear'
                }
            });

            $('.daterange').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
                $('.search input[type=submit]').trigger('click');
            });

            $('.daterange').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $('.search input[type=submit]').trigger('click');
            });

            $('.timerange').daterangepicker({
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 1,
                timePickerSeconds: true,
                locale: {
                    format: 'HH:mm:ss'
                }
            }).on('show.daterangepicker', function(ev, picker) {
                picker.container.find(".calendar-table").hide();
            });

        </script>

        <script>
            $('#emirate_id').change(function() {
                var val = $(this).val();
                $('#region_id').css('background', '#f2f2f2');
                $('#region_id option').each(function() {
                    if ($(this).val() == '') $(this).attr('selected');

                    if ($(this).data('emirate_id') != val) {
                        $(this).hide();
                        $(this).removeAttr('selected');
                    } else
                        $(this).show();
                });
                setTimeout(function() {
                    $('#region_id').css('background', 'white');
                }, 500)
            })

        </script>
        <link rel="stylesheet" href="../admin/app-assets/js/scripts/emoji/assets/css/style.css">
        <script src="../admin/app-assets/js/scripts/emoji/assets/js/jquery.emojiarea.js"></script>
    @endpush


    @push('header')
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
    @endpush
    @push('footer')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
        <style>
            .select2-search__field {
                text-align: right !important;
            }

        </style>
        <script>
            $('.purpose-select2').select2({
                placeholder: 'الغرض',
                align: 'right'
            });

        </script>
    @endpush