@extends('layouts.master')
@section('content')
    <div class="row">
        <div class="col-md-12 p-3">

            <div class="card card-outline card-primary">

                <div class="card-header">
                    <div class="row">
                        <div class="col-md-9">
                            TPHA About General
                        </div>
                        <div class="col-md-3 text-right">
                            <button id="aboutBtn" class="btn bg-gradient-primary btn-sm">Add Page &nbsp;<i
                                class="fas fa-fw fa-edit"></i></button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <table class="table w-100" id="about_table">
                        <thead class="bg-gradient-light">
                            <th>Image</th>
                            <th>Title</th>
                            {{-- <th>Content</th> --}}
                            <th>Status</th>
                            <th>Last Update</th>
                            <th>Action</th>
                        </thead>

                        <tbody>

                            @foreach ($abouts as $item)
                            
                                <tr>
                                    @if($item->image_attachment == '')
                                    <td>--</td>
                                    @else
                                    <td>
                                        <a href="{{url('/uploads/photos/'.$item->image_attachment)}} "target="_blank"><img class="img-fluid" style="max-width: 50px; max-height: 90vh; margin: auto;" src="{{url('/uploads/photos/'.$item->image_attachment)}}"></a>
                                    </td>
                                    @endif
                                    <td>{{$item->title}}</td>
                                    {{-- <td>{!! $item->description !!}</td> --}}
                                    <td>{{$item->publish_status}}</td>
                                    <td>{{Carbon\Carbon::parse($item->updated_at)->format('d-M-Y')}}</td>
                                    <td>
                                        <button class="edit btn btn-sm bg-gradient-primary" id="{{$item->id}}"><i class="fas fa-fw fa-edit"></i></button>&nbsp;&nbsp;
                                        <button class="delete btn btn-sm bg-gradient-danger" id="{{$item->id}}"><i class="fas fa-fw fa-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                            
                        </tbody>
                    </table>
                </div>

            </div>

        </div>
    </div>

    <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-gradient-primary">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <form id="about_form" enctype="multipart/form-data">
                            @csrf
    
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Page Title:</label>
                                                <input type="text" id="title" name="title" class="form-control" placeholder="Page Title" required>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">TPHA Mission:</label>
                                        <input type="text" id="mission" name="mission" class="form-control" placeholder="TPHA Mission" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">TPHA Vision:</label>
                                        <input type="text" id="vision" name="vision" class="form-control" placeholder="TPHA Vision" required>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">TPHA Goal:</label>
                                        <input type="text" id="goal" name="goal" class="form-control" placeholder="TPHA Goal" required>
                                    </div>
                                </div>
                            </div>
                           
                            <div class="form-group">
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Image Attachment:</label>
                                        <input type="file" class="form-control-file" name="photo"
                                            accept="images/.png,.png,.gif,.tiff,.jpeg,.jpg" placeholder="Image Attachment">
                                    </div>

                                    <div class="col-md-6">
                                        <label for="">Publish 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>
    
                            <div class="form-group">
                                <label for="">Description:</label>
                                <textarea name="description" id="description" class="summernote"
                                    id="description"></textarea>
                            </div>

                            <div class="loader text-center mb-2" style='display: none;'>
                                <img src="{{asset('images/loader.gif')}}" width="100px" height="15px">
                            </div>
    
                            <div class="modal-footer">
                                <button type="button" class="btn bg-gradient-warning btn-sm" data-dismiss="modal">Close <i class="fas fa-fw fa-times-circle"></i></button>
                                <input type="hidden" name="hidden_data" id="hidden_data">
                                <input type="hidden" name="action" id="action">
                                <button type="submit" class="btn bg-gradient-primary btn-sm">Save <i class="fas fa-fw fa-save"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
    
            </div>
        </div>
    </div>

    <script>
        $("document").ready(function(){
            //datatable
            $('#about_table').DataTable({
                responsive: true,
                serverSide: false,
                processing:true,
            })

            //displaying modal
            //modal display
            $('#aboutBtn').on('click', function () {
                $('#about_form')[0].reset();
                $('.modal-title').text('Record New Page');
                $('#aboutModal').modal('show');
                $('.loader').hide();
                $('#action').val('Create');
                $('#SummernoteText').summernote('reset');
            })

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

                var data_url = "";

                //assigning routing
                if($('#action').val() == "Create"){
                    data_url = "{{route('about_general.store')}}";
                }

                if($('#action').val() == "Edit"){
                    data_url = "{{route('about_general.update')}}";
                }

                $.ajax({
                url: data_url,
                method: "POST",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,

                beforeSend: function () {
                    // Show image container
                    $(".loader").show();
                },

                success: function (data) {

                    if (data.success) {
                        $('.loader').hide();
                        $('#aboutModal').modal('hide');

                        var result = data.success;

                        Swal.fire({
                            title: "<h4>Notification!</h4>",
                            text: result,
                            icon: "success",
                            showConfirmButton: false,
                            showCancelButton: false,
                            timer: 3000,
                        });

                        setTimeout(function () {
                            window.location = "{{url('about_general')}}";
                        }, 2000);
                    }

                    if (data.errors) {
                        var result = data.errors;

                        Swal.fire({
                            title: "<h4>Info!</h4>",
                            text: result,
                            icon: "warning",
                            showConfirmButton: false,
                            showCancelButton: false,
                            timer: 3000,
                        })
                    }
                }
            })

                
            })

            $(document).on('click','.edit',function(event){
            event.preventDefault();

            var id = $(this).attr('id');
            
            $.ajax({
                url: "/about_general/" + id + "/edit",
                dataType: "JSON",
                success: function(data){
                    $('.modal-title').text('Update About Page')
                    $('#title').val(data.result.title);
                    $('#vision').val(data.result.vision);
                    $('#goal').val(data.result.goal);
                    $('#mission').val(data.result.mission);
                    $('#publish_status').val(data.result.publish_status);
                    $('#hidden_data').val(id);
                    $('#action').val('Edit');
                    $('#description').summernote('code',data.result.description);
                    $('#aboutModal').modal('show');
                }
            })
        })

               //deleting function
                $(document).on('click', '.delete', function (event) {
                event.preventDefault();
                var delete_id = $(this).attr('id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, keep it'

                }).then((result) => {
                    if (result.value) {

                        $.ajax({
                            url: "/about_general/destroy/" + delete_id,
                            success: function (data) {

                                if(data.success){
                                    var result = data.success;

                                     //alerting
                                    Swal.fire({
                                        title: '<h4>Notification!</h4>',
                                        text: result,
                                        type: 'success',
                                        icon: 'success',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 2000,
                                    });

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

                                if(data.errors){
                                    var result = data.errors;

                                    Swal.fire({
                                        title: '<h4>Notification!</h4>',
                                        text: result,
                                        icon: 'warning',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 4000,
                                    });
                                }

                            }

                        });

                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        Swal.fire({
                            title: '<h4>Information!</h4>',
                            text: 'Your Page is Safe.',
                            icon: 'info',
                            timer: 2000,
                            showCancelButton: false,
                            showConfirmButton: false,
                        })
                    }
                })

            })

        })
    </script>
@endsection