@extends('layouts.admin')

@section('content')
    <div class="container text-right">
        <button class="btn btn-primary btn-sm rounded mr-4" onclick="addNewNotification()">Add New</button>
    </div>
    <div class="nimmu-content-area nimmu-file-transfer-area">
        <div class="container-fluid">
            <div class="row mt-4">
                <div class="col-12">
                    <div class="nimmu-default-card">
                        @if (session()->has('message'))
                            <div class="alert alert-success nimmu-alert-success alert-dismissible fade show" role="alert">
                                <strong>Success!</strong> {{ session()->get('message') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        <div class="table-responsive">
                            <table id="notification_table"
                                class="table table-borderless table-striped table-hover nimmu-table-hover nimmu-basic-table"
                                data-stripe-classes="[]">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Title</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Photos</th>
                                        <th scope="col">URL</th>
                                        <th scope="col">Type</th>
                                        <th scope="col">Created At</th>
                                        <th scope="col">Updated At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($notifications)
                                        @foreach ($notifications as $notification)
                                            <tr>
                                                <th scope="row">{{ $notification->id }}</th>
                                                <td>{{ $notification->title }}</td>
                                                <td>{{ $notification->description }}</td>
                                                @if (!empty($notification->image_path))
                                                    <td><img src="{{ url('storage/') . '/' . $notification->image_path }}"
                                                            alt="" width="50" height="50" class=""></td>
                                                @else
                                                    <td>-</td>
                                                @endif
                                                @if (!empty($notification->link))
                                                    <td>{{ $notification->link }}</td>
                                                @else
                                                    <td> -</td>
                                                @endif
                                                @if ($notification->notification_type == 1)
                                                    <td> Text</td>
                                                @elseif ($notification->notification_type==2)
                                                    <td> Image</td>
                                                @elseif ($notification->notification_type==3)
                                                    <td> URL</td>
                                                @elseif ($notification->notification_type==4)
                                                    <td> Video</td>
                                                @endif
                                                <td>{{ $notification->created_at }}</td>
                                                <td>{{ $notification->updated_at }}</td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>No data found.</tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="newNotification" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New Notification</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="" method="post" id="newNotificationForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <span id="error"></span>
                        <div class="form-group">
                            <label for="">Title <span class="text-danger"><small id="title_error"></small></span></label>
                            <input type="text" name="title" id="title" class="form-control" placeholder="Title"
                                aria-describedby="helpId">
                        </div>
                        <div class="form-group" id="description_div">
                            <label for="">Description <span class="text-danger"><small
                                        id="desc_error"></small></span></label>
                            <textarea name="description" id="description" cols="30" rows="2" class="form-control"
                                placeholder="Description"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="">Type</label>
                            <select name="type" id="type" onchange="typeoption()" class="form-control">
                                <option value="1">Text</option>
                                <option value="2">Image</option>
                                <option value="3">Url</option>
                                <option value="4">Video</option>
                            </select>
                        </div>
                        <div class="form-group" id="imageType" style="display: none">
                            <label for="">Image <span class="text-danger"><small id="image_error"></small></span></label>
                            <input type="file" name="image" id="image" class="form-control">
                        </div>

                        <div class="form-group" id="linkType" style="display: none">
                            <label for="">Url <span class="text-danger"><small id="link_error"></small></span></label>
                            <input type="text" name="link" id="link" class="form-control" placeholder="Url">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
    </div>

@endsection
@push('scripts')
    <script>

        $("#image").change(function() {

            var val = $(this).val();
            switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
                case 'gif': case 'jpg': case 'png': case 'ico': case 'jpeg': case 'bmp':
                    $('#image_error').text('');
                    //alert("an image");
                    break;
                default:
                    $('#image_error').text('Please upload image e.g jpg,png,gif,jpeg,bmp,ico');
                    break;
            }
        });

        $('#notification_table').dataTable({
            "scrollCollapse": true,
            "paging": true
        });

        function addNewNotification() {
            $("#newNotificationForm")[0].reset();
            $('#newNotification').modal('show');
        }

        function typeoption() {
            val = $('#type').val();
            // console.log(val);
            if (val == 2) {
                $('#imageType').show();
                $('#linkType').hide();
                $('#description_div').show();
            } else if (val == 3) {
                $('#imageType').hide();
                $('#linkType').show();
                $('#description_div').hide();
                $('#link_error').text('');
            } else if (val == 4) {
                $('#imageType').hide();
                $('#linkType').show();
                $('#description_div').show();
            } else {
                $('#imageType').hide();
                $('#linkType').hide();
                $('#description_div').show();
            }
        }

        $("#newNotificationForm").submit(function(e) {
            e.preventDefault();
            if($('#type').val() ==4)
            {
                video_url = $('#link').val();
                if(video_url)
                {
                    switch(video_url.substring(video_url.lastIndexOf('.') + 1).toLowerCase()){
                        case 'flv': case 'mp4': case 'm3u8': case 'ts': case '3gp': case 'mov': case 'avi': case 'wmv':
                            $('#link_error').text('');
                            break;
                        default:
                            $('#link_error').text('Please provide valid video link e.g flv,mp4,m3u8,ts,3gp,mov,avi,wmv');
                            return ;
                            break;
                    }
                }
            }

            $.ajax({
                type: "post",
                url: "/admin/add-notification",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function(response) {
                    if (response.status == true) {
                        toastr["success"](response.message);
                        location.reload();
                    } else if (response.status == false && response.error == 'title') {
                        $('#title_error').html(response.message);
                    } else if (response.status == false && response.error == 'description') {
                        $('#title_error').html('');
                        $('#desc_error').html(response.message);
                    } else if (response.status == false && response.error == 'image') {
                        $('#title_error').html('');
                        $('#desc_error').html('');
                        $('#image_error').html(response.message);
                    } else if (response.status == false && (response.error == 'link' && response.error == 'video')) {
                        $('#title_error').html('');
                        $('#desc_error').html('');
                        $('#image_error').html('');
                        $('#link_error').html(response.message);
                    }
                }
            });
        });
    </script>
@endpush