@extends('layouts.master')

@section('content')
<style>
    #startDate,
    #endDate {
        cursor: pointer;
    }
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ trans('breadcrumbs.Add Message') }}</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-3"></div>
                <div class="col-sm-3">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">{{ Breadcrumbs::render('Add Message') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="content">
        <div class="card" id="filterDiv">
            <div class="card-header">
                <form id="message-form">
                    <h3 class="card-title">{{ trans('marketing.Slider Information') }}</h3>
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            @csrf
                            <div class="form-col-1">
                                {{ Form::label('messageType', trans('marketing.Message Type'), ['class' => 'required']) }}
                                {{ Form::select('messageType', $messageTypeList, '', ['id' => 'messageType', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="messageType-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('displayType', trans('marketing.Display Type'), ['class' => 'required']) }}
                                {{ Form::select('displayType', $displayTypeList, '', ['id' => 'displayType', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="displayType-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1 scheduled">
                                {{ Form::label('startDate', trans('marketing.Start Date'), ['class' => 'required']) }}
                                {{ Form::text('startDate', '', ['class' => 'form-control', 'id' => 'startDate', 'readonly' => 'readonly']) }}
                                <span id="startDate-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1 scheduled">
                                {{ Form::label('endDate', trans('marketing.End Date'), ['class' => 'required']) }}
                                {{ Form::text('endDate', '', ['class' => 'form-control', 'id' => 'endDate', 'readonly' => 'readonly']) }}
                                <span id="endDate-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1 scheduled">
                                {{ Form::label('intervalMinutes', trans('marketing.Interval Minutes'), ['class' => 'required']) }}
                                {{ Form::text('intervalMinutes', '', ['id' => 'intervalMinutes', 'class' => 'form-control']) }}
                                <span id="intervalMinutes-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('message', trans('marketing.Message'), ['class' => 'required']) }}
                                {{ Form::textarea('message', '', ['id' => 'message', 'class' => 'form-control', 'rows' => 2, 'cols' => 40]) }}
                                <span id="message-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('status', trans('marketing.Status'), ['class' => 'required']) }}
                                {{ Form::select('status', $statusList, '', ['id' => 'status', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="status-error" class="error-help-block"></span>
                            </div>
                        </div>
                    </div>

                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            <div class="button_sec" id="form-buttons">
                                <button class="btn btn-primary" id="form-submit">{{ trans('marketing.Create') }}</button>
                                <button class="btn btn-default" id="form-clear">{{ trans('layout.Clear') }}</button>
                            </div>
                            <div class="button_sec" id="form-loader" style="display:none">
                                <img style="height: 65px;width: 65px;" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
        </div>
    </section>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
    $('#startDate, #endDate').daterangepicker({
        singleDatePicker: true,
        timePicker: true,
        minDate: moment(),
        maxDate: moment().add(1, 'years'),
        locale: {
            format: 'YYYY-MM-DD hh:mm:00 A'
        }
    });

    $('#startDate, #endDate').val('');

    $(document).on('change', '.form-control', function() {
        $(this).closest('div').find('.error-help-block').html('');
    });

    function showErrorMessage(message) {
        $('.error-help-block').html('');
        var i = 1;
        var element = '';
        $.each(message, function(k, v) {
            $("#" + k + "-error").html(v);
            if (i == 1) {
                element = "#" + k;
            }
            i++;
        });

        var topOffset = $(element).parent().offset();
        if (topOffset != undefined) {
            $([document.documentElement, document.body]).animate({
                scrollTop: topOffset.top
            }, 1000);
        }

        return;
    }

    $(document).on('click', '#form-submit', function(e) {
        e.preventDefault();

        var formData = new FormData($('#message-form')[0]);

        $.ajax({
            type: 'POST',
            url: "{{ route('message.store') }}",
            data: formData,
            dataType: 'JSON',
            contentType: false,
            processData: false,
            beforeSend: function() {
                $("#form-buttons").hide();
                $("#form-loader").show();
            },
            success: function(response) {
                var message = response.msg;
                var status = response.status;
                if (status == 422) {
                    showErrorMessage(message);
                    return;
                }
                if (status == 200) {
                    swal(message, {
                        icon: "success",
                    });
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                }
                $('.error-help-block').html('');
                $('#form-clear').trigger('click');
            },
            error: function() {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#form-loader").hide();
                $("#form-buttons").show();
            }
        });
    });

    $(document).on('click', '#form-clear', function(e) {
        e.preventDefault();
        $('.error-help-block').html('');
        $('.select2').select2('destroy');
        $(this).closest('form').find("input[type=text], input[type=number], input[type=password], textarea, select").val('');
        $('.select2').select2({
            placeholder: "Select",
            allowClear: true
        });
        $("#messageType").trigger('change');
    });

    $("#messageType").change(function() {
        var type = $(this).val();

        if (type == 2) {
            $('.scheduled').show();
        } else {
            $('.scheduled').hide();
        }
    });

    $('.scheduled').hide();
</script>
@stop