@extends('layouts.app')

@section('title', 'Frequently Asked Question')
@section('breadcrumb', 'Application Setting')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        Frequently Asked Question
    </a>
@endsection
@section('faq', 'kt-menu__item--active')
@section('content')

    <div class="col-md-12 mb-3">
        <button type="button" class="btn btn-light btn-elevate btn-pill" data-toggle="modal" data-target="#createFAQ"><i class="la la-plus"></i>  Create New FAQ {{Session::get('brands_pick')['name'] }}</button>
    </div>

   {{-- Begin:: Faq List  --}}
    @if ($data['result'] == [])
        <div class="col-md-12">
            <div class="kt-portlet">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            <i class="la la-question-circle"></i> Frequently Asked Question List
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    Empty Frequently Asked Question List
                <div class="kt-separator kt-separator--dashed"></div>
                </div>
            </div>
        </div>
    @else
        @foreach ($data['result'] as $item)
            <div class="col-md-12">
                <div class="kt-portlet">
                    <div class="kt-portlet__head">
                        <div class="kt-portlet__head-label">
                            <h3 class="kt-portlet__head-title">
                                <i class="la la-question-circle"></i> {{$item['question']}}
                            </h3>
                        </div>
                        <div class="kt-portlet__head-toolbar">
                            <a href="#"  data-toggle="modal" data-target="#updateFAQ{{$item['id']}}"><i class='fa fa-edit text-warning'></i></a> &nbsp;|&nbsp;
                            <a href="{{route('setting.faq.delete', $item['id'])}}" class='btn-delete'><i class='fa fa-trash text-danger'></i></a>
                        </div>
                    </div>
                    <div class="kt-portlet__body">
                            {{$item['answer']}}
                    <div class="kt-separator kt-separator--dashed"></div>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
   {{-- End:: Faq List  --}}

   {{-- Begin:: Modal Create --}}
    <div class="modal fade" id="createFAQ" 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">
                    Create FAQ {{Session::get('brands_pick')['name'] }}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('setting.faq.store')}}" id="createBrand" method="POST">
                    @csrf
                    <div class="form-group">
                        <label>Question</label>
                        <input name="question" id="question" class="form-control" type="text" placeholder="E.g: Bagaimana Caranya?">
                    </div>
                    <div class="form-group">
                        <label>Answer</label>
                        <textarea name="answer" id="answer" class="form-control" cols="30" rows="10" placeholder="E.g: Caranya adalah dengan . ."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-secondary"><i class="fa fa-undo"></i> Reset</button>
                </form>
                    <a href="#" type="submit" id="create" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Create</a>
                </div>
            </div>
        </div>
    </div>
   {{-- End:: Modal Create --}}

   {{-- Begin:: Modal Update --}}
    @foreach ($data['result'] as $item)
        <div class="modal fade" id="updateFAQ{{$item['id']}}" 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">
                        Update FAQ {{Session::get('brands_pick')['name'] }}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{route('setting.faq.update')}}" id="updateFAQForm{{$item['id']}}" method="POST">
                        @csrf
                        <input type="hidden" name="id" value="{{$item['id']}}">
                        <div class="form-group">
                            <label>Question</label>
                            <input name="question" id="question" class="form-control" type="text" placeholder="E.g: Bagaimana Caranya?" value="{{$item['question']}}">
                        </div>
                        <div class="form-group">
                            <label>Answer</label>
                            <textarea name="answer" id="answer" class="form-control" cols="30" rows="10" placeholder="E.g: Caranya adalah dengan . .">{{$item['answer']}}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-secondary"><i class="fa fa-undo"></i> Reset</button>
                    </form>
                        <a href="#" type="submit" id="update{{$item['id']}}" class="btn btn-warning"><i class="fa fa-edit"></i> Update</a>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
   {{-- End:: Modal Update --}}

@endsection
@section('custom-script')
<script>
    $('#create').click(function (event) {
        event.preventDefault();
        $('#loading').show();
        var form = $('#createBrand'),
            url = form.attr('action'),
            method = 'POST';

        form.find('.help-block').remove();
        form.find('.form-group input').removeClass('is-invalid');
        form.find('.form-group textarea').removeClass('is-invalid');

        $.ajax({
            url : url,
            method: method,
            data : form.serialize(),
            success: function (response) {
                $('#loading').hide();
                // console.log(response);
                if (response.status == "fail") {
                    $('.form-group input').removeClass('is-invalid');
                    $.each(response.messages, function (key, value) {
                        $('#' + key)
                            .closest('.form-group input')
                            .addClass('is-invalid')
                            .append('<span class="help-block"><strong>' + value + '</strong></span>');
                        $('#' + key)
                            .closest('.form-group textarea')
                            .addClass('is-invalid')
                            .append('<span class="help-block"><strong>' + value + '</strong></span>');
                        $('#' + key)
                            .closest('.form-group')
                            .append('<span class="help-block"><strong>' + value + '</strong></span>');
                    });
                }
                if (response.status == "success") {
                    swal.fire({
                        type : 'success',
                        title : 'Success!',
                        timer: 5000,
                        text : 'Data has been saved!'
                    }).then((result) => {
                        if (result.value) {
                            $(location).attr('href', "{{route('setting.faq')}}");
                        }
                            $(location).attr('href', "{{route('setting.faq')}}");
                    });
                }
            },
            error : function (xhr) {
                $('#loading').hide();
                // console.log(xhr);
                swal.fire({
                    type : 'error',
                    title : 'Failed!',
                    text : 'An error Occured!'
                });

            }
        })
    });
</script>

    @foreach ($data['result'] as $item)
        <script>
            $('#update{{$item['id']}}').click(function (event) {
                event.preventDefault();
                $('#loading').show();
                var form = $('#updateFAQForm{{$item['id']}}'),
                    url = form.attr('action'),
                    method = 'POST';

                form.find('.help-block').remove();
                form.find('.form-group input').removeClass('is-invalid');
                form.find('.form-group textarea').removeClass('is-invalid');

                $.ajax({
                    url : url,
                    method: method,
                    data : form.serialize(),
                    success: function (response) {
                        $('#loading').hide();
                        // console.log(response);
                        if (response.status == "fail") {
                            $('.form-group input').removeClass('is-invalid');
                            $.each(response.messages, function (key, value) {
                                $('#' + key)
                                    .closest('.form-group input')
                                    .addClass('is-invalid')
                                    .append('<span class="help-block"><strong>' + value + '</strong></span>');
                                $('#' + key)
                                    .closest('.form-group textarea')
                                    .addClass('is-invalid')
                                    .append('<span class="help-block"><strong>' + value + '</strong></span>');
                                $('#' + key)
                                    .closest('.form-group')
                                    .append('<span class="help-block"><strong>' + value + '</strong></span>');
                            });
                        }
                        if (response.status == "success") {
                            swal.fire({
                                type : 'success',
                                title : 'Success!',
                                timer: 5000,
                                text : 'Data has been saved!'
                            }).then((result) => {
                                if (result.value) {
                                    $(location).attr('href', "{{route('setting.faq')}}");
                                }
                                $(location).attr('href', "{{route('setting.faq')}}");
                            });
                        }
                    },
                    error : function (xhr) {
                        $('#loading').hide();
                        // console.log(xhr);
                        swal.fire({
                            type : 'error',
                            title : 'Failed!',
                            text : 'An error Occured!'
                        });

                    }
                })
            });
        </script>
    @endforeach

<script>
    $('body').on('click', '.btn-delete', function (event) {
        event.preventDefault();

        var me = $(this),
            url = me.attr('href'),
            csrf_token = $('meta[name="csrf-token"]').attr('content');

        swal.fire({
            title: 'Are you sure want to delete this ?',
            text: 'You won\'t be able to revert this!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                $('#loading').show();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        '_method': 'DELETE',
                        '_token': csrf_token
                    },
                    success: function (response) {
                        $('#loading').hide();
                        // console.log(response)
                        if (response.status == "fail") {
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            }).then((result) => {
                                    if (result.value) {
                                        $(location).attr('href', "{{route('setting.faq')}}");
                                    }
                                });
                        }
                        if (response.status == "success") {
                            $('#datatable').DataTable().ajax.reload();
                            swal.fire({
                                type: 'success',
                                title: 'Success!',
                                text: 'Data has been deleted!'
                            }).then((result) => {
                                    if (result.value) {
                                        $(location).attr('href', "{{route('setting.faq')}}");
                                    }
                                $(location).attr('href', "{{route('setting.faq')}}");
                            });
                        }
                    },
                    error: function (xhr) {
                        $('#loading').hide();
                        swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!'
                        });
                    }
                });
            }
        });
    });
</script>
@endsection