@extends('layouts.master')
@section('content')

@if($messages->count() != 0)
<div class="row justify-content-center p-4">
    <div class="col-md-6">
        <div class="card card-outline card-primary">

            <div class="card-header text-center">
                <h6>Welcome Message</h6>
            </div>

            <div class="card-body">
                <form id="editForm" enctype="multipart/form-data">
                    @csrf

                    @foreach ($messages as $item)

                    <input type="hidden" name="hidden_data" value="{{$item->id}}">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Message Title:</label>
                                <input type="text" class="form-control" name="message_title" id="message_title"
                                    placeholder="Enter Message Title" required="required" value="{{$item->message_title}}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Name:</label>
                                <input type="text" class="form-control" name="name" id="name"
                                    placeholder="Enter Name of Leader" required="required" value="{{$item->name}}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <label for="">Photo:</label>
                            <input type="file" class="form-control-file" name="photo" id="photo"
                                accept="images/png,.png,.jpeg,.jpg,.tiff,">
                        </div>
                        <div class="col-md-6">
                            <label for="">Status:</label>
                            <select name="publish_status" id="publish_status" class="form-control" required="required">
                                <option value="{{$item->publish_status}}">{{$item->publish_status}}</option>
                                <option value="published">Published</option>
                                <option value="unpublished">Unpublished</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group pt-3">
                        <label for="">Message Content:</label>
                        <textarea name="description" id="description" rows="5" class="form-control"
                            placeholder="type your Content Here" required="required">{{$item->description}}</textarea>
                    </div>

                    <div class="form-group">
                        <button id="updateBtn" class="btn bg-gradient-primary" type="submit">Update Message <i
                                class="fas fa-fw fa-save"></i></button>
                    </div>

                    @endforeach
                </form>
            </div>
        </div>
    </div>
</div>
@else
<div class="row justify-content-center p-4">
    <div class="col-md-6">
        <div class="card card-outline card-primary">

            <div class="card-header text-center">
                <h6>Welcome Message</h6>
            </div>

            <div class="card-body">
                <form id="createForm" enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="action" id="Create">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Message Title:</label>
                                <input type="text" class="form-control" name="message_title" id="message_title"
                                    placeholder="Enter Message Title" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Name:</label>
                                <input type="text" class="form-control" name="name" id="name"
                                    placeholder="Enter Name of Leader" required>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-6">
                            <label for="">Photo:</label>
                            <input type="file" class="form-control-file" name="photo" id="photo"
                                accept="images/png,.png,.jpeg,.jpg,.tiff,">
                        </div>
                        <div class="col-md-6">
                            <label for="">Status:</label>
                            <select name="publish_status" id="publish_status" class="form-control" required>
                                <option value="">Select Status</option>
                                <option value="published">Published</option>
                                <option value="unpublished">Unpublished</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group pt-3">
                        <label for="">Message Content:</label>
                        <textarea name="description" id="description" rows="5" class="form-control"
                            placeholder="type your Content Here" required></textarea>
                    </div>

                    <div class="form-group">
                        <button id="createBtn" class="btn bg-gradient-primary" type="submit">Save Message <i
                                class="fas fa-fw fa-save"></i></button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
@endif

<script>
    $("document").ready(function(){

        $('#createForm').on('submit',function(event){
            event.preventDefault();

            var data_url = "{{route('welcome.store')}}";

            $.ajax({
                url: data_url,
                method: "POST",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success:function(data){
                    //errors images
                    if (data.errors) {
                        var result = data.errors;
                        Swal.fire({
                            text: result,
                            type: "warning",
                            icon: "warning",
                            timer: 2500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })
                    }

                    //data success
                    if (data.success) {

                        var result = data.success;

                        Swal.fire({
                            text: result,
                            type: "success",
                            icon: "success",
                            timer: 2500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })

                            //refreshing page
                            setTimeout(function () {
                                window.location = "{{url('welcome')}}";
                            }, 2000);
                        }

                    //data failed
                    if (data.failed) {
                        var result = data.failed;
                        Swal.fire({
                            text: result,
                            type: "error",
                            icon: "error",
                            timer: 2500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })
                    }
                }

            })

        })

        $('#editForm').on('submit',function(event){
            event.preventDefault();

            var data_url = "{{route('welcome.update')}}";

            $.ajax({
                url: data_url,
                method: "POST",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success:function(data){
                    //errors images
                    if (data.errors) {
                        var result = data.errors;
                        Swal.fire({
                            text: result,
                            type: "warning",
                            icon: "warning",
                            timer: 4500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })
                    }

                    //data success
                    if (data.success) {
                        var result = data.success;
                        Swal.fire({
                            text: result,
                            type: "success",
                            icon: "success",
                            timer: 2500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })

                            //refreshing page
                            setTimeout(function () {
                                window.location = "{{url('welcome')}}";
                            }, 2000);
                        }

                    //data failed
                    if (data.failed) {
                        Swal.fire({
                            text: "Unable To Update The Welcome Message.",
                            type: "error",
                            icon: "error",
                            timer: 2500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })
                    }
                }

            })

        })
    })
</script>

@endsection