@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 PROJECTS
                    </div>
                    <div class="col-md-3 text-right">
                        <button id="projectBtn" class="btn bg-gradient-primary">New Project &nbsp;<i
                                class="fas fa-fw fa-edit"></i></button>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <table class="table w-100" id="project_table">
                    <thead class="bg-light">
                        <th>S/N</th>
                        <th>Image</th>
                        <th>Project Title</th>
                        <th>Status</th>
                        <th>Project Status</th>
                        <th>File</th>
                        <th>Created Date</th>
                        <th>Action</th>
                    </thead>

                    <tbody>

                        @foreach ($projects as $item)
                        <tr>
                            <td>{{$loop->index+1}}</td>
                            @if($item->image_attachment == '')
                            <td>--</td>
                            @else
                            <td>
                                <a href="{{url('/uploads/project_photos/'.$item->image_attachment)}} "target="_blank"><img class="img-fluid" style="max-width: 50px; max-height: 90vh; margin: auto;" src="{{url('/uploads/project_photos/'.$item->image_attachment)}}"></a>
                            </td>
                            @endif
                            <td>{{substr($item->project_title,0,30).'....'}}</td>
                            <td>{{$item->publish_status}}</td>
                            <td>{{$item->project_status}}</td>

                            @if($item->file_type == '')
                            <td>--</td>
                            @else
                            <td><a href="{{url('/uploads/project_files/'.$item->file_attachment)}}" target="_blank">{{$item->file_type}}</a></td>
                            @endif
                            <td>{{Carbon\Carbon::parse($item->created_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="projectModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-lg" 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="project_form" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label for="">Project Title:</label>
                            <input type="text" id="project_title" name="project_title" class="form-control" placeholder="Project Title"
                                required>
                        </div>

                        <div class="form-group">

                            <div class="row">

                                <div class="col-md-6">
                                    <label for="">Project Status:</label>
                                    <select name="project_status" id="project_status" class="form-control" required>
                                        <option value="">Select Status</option>
                                        <option value="current">Current Project</option>
                                        <option value="past">Past Project</option>
                                    </select>
                                </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-froup">
                            <div class="row">

                                <div class="col-md-6">
                                    <label for="">File Attachment:</label>
                                    <input type="file" class="form-control-file" name="file_attachment"
                                        placeholder="File Attachment" accept="document/.pdf,.pdf,.doc,.docx">
                                </div>

                                <div class="col-md-6">
                                    <label for="">Image Attachment:</label>
                                    <input type="file" class="form-control-file" name="photo"
                                        placeholder="Image Attachment" accept="images/.png,.png,.gif,.jpg,.jpeg">
                                </div>

                            </div>
                        </div>

                        <div>
                            <div class="form-group pt-3">
                                <label for="">Project Description:</label>
                                <textarea name="project_description" id="project_description" class="summernote"
                                    id="project_description"></textarea>
                            </div>
                        </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" data-dismiss="modal">Close <i class="fas fa-fw fa-times-circle"></i></button>
                            <input type="hidden" name="hidden_action" id="hidden_action">
                            <input type="hidden" name="hidden_data" id="hidden_data">
                            <button type="submit" class="btn bg-gradient-primary">Record <i class="fas fa-fw fa-save"></i></button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

{{-- <div class="modal fade" id="projectEditModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-lg" 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="project_form" action="{{route('all_project.update')}}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <input type="hidden" name="hidden_data" id="hidden_data" value="">

                        <div class="form-group">
                            <label for="">Project Title:</label>
                            <input type="text" id="project_title_e" name="project_title" class="form-control" placeholder="Project Title"
                                required>
                        </div>

                        <div class="form-group">

                            <div class="row">

                                <div class="col-md-6">
                                    <label for="">Project Status:</label>
                                    <select name="project_status" id="project_status_e" class="form-control" required>
                                        <option value="">Select Status</option>
                                        <option value="current">Current Project</option>
                                        <option value="past">Past Project</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="">Publish Status:</label>
                                    <select name="publish_status" id="publish_status_e" 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-froup">
                            <div class="row">

                                <div class="col-md-6">
                                    <label for="">File Attachment:</label>
                                    <input type="file" class="form-control-file" name="file_attachment"
                                        placeholder="File Attachment" accept="document/.pdf,.pdf,.doc,.docx">
                                </div>

                                <div class="col-md-6">
                                    <label for="">Image Attachment:</label>
                                    <input type="file" class="form-control-file" name="photo"
                                        placeholder="Image Attachment" accept="images/.png,.png,.gif,.jpg,.jpeg">
                                </div>

                            </div>
                        </div>

                        <div>
                            <div class="form-group pt-3">
                                <label for="">Project Description:</label>
                                <textarea name="project_description" id="project_description_e" class="summernote"
                                    id="project_description"></textarea>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">Close <i class="fas fa-fw fa-times-circle"></i></button>
                            <button type="submit" class="btn btn-primary">Record Report <i class="fas fa-fw fa-save"></i></button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div> --}}

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

        //displaying datatable
        $('#project_table').DataTable({
            responsive: true,
            serverSide: false,
            processing:true,
        });

        //modal display
        $('#projectBtn').on('click', function () {
            $('#project_form')[0].reset();
            $('.modal-title').text('Record Project');
            $('#projectModal').modal('show');
            $('#hidden_action').val('Create');
            $('#SummernoteText').summernote('reset');
        })

        //summernote
        $('.summernote').summernote({
            height: 100,
        });

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

            var data_url = '';

            //means creating
            if($('#hidden_action').val() == "Create"){
                data_url = "{{route('all_project.store')}}";
            }

            //means updating
            if($('#hidden_action').val() == "Edit"){
                data_url = "{{route('all_project.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.errors){

                            var result = data.errors;

                            Swal.fire({
                                title: "Info!",
                                type: "info",
                                icon: "info",
                                text: result,
                                timer: 4500,
                                showConfirmButton: false,
                                showCancelButton: false,
                            })
                        }

                        //uploading
                        if(data.success){

                            $('#projectModal').hide();
                            $('.loader').hide();
                            $('#project_form')[0].reset();

                            var result = data.success;

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

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

                        }
                    }
                })

        })

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

            var id = $(this).attr('id');
            
            $.ajax({
                url: "/all_project/" + id + "/edit",
                dataType: "JSON",
                success: function(data){
                    $('.modal-title').text('Update Project')
                    $('#project_title').val(data.result.project_title);
                    $('#project_status').val(data.result.project_status);
                    $('#publish_status').val(data.result.publish_status);
                    $('#hidden_data').val(id);
                    $('#hidden_action').val('Edit');
                    $('#project_description').summernote('code',data.result.project_description);
                    $('#projectModal').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: "/all_project/destroy/" + delete_id,
                    success: function (data) {

                        var result = data.success;

                        if(data.success){
                             //alerting
                            Swal.fire({
                                title: 'Deleted!',
                                text: result,
                                type: 'success',
                                icon: 'success',
                                showCancelButton: false,
                                showConfirmButton: false,
                                timer: 2000,
                            });

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

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

                            Swal.fire({
                                title: 'Info!',
                                text: result,
                                type: 'warning',
                                icon: 'warning',
                                showCancelButton: false,
                                showConfirmButton: false,
                                timer: 3000,
                            });
                        }
                       
                    }

                });

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

    })

    })
</script>
@endsection