@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">
                        Publication - Strategic plan
                    </div>
                    <div class="col-md-3 text-right">
                        <button class="btn btn-sm bg-gradient-primary" id="strategicBtn">New Page &nbsp;<i
                                class="fas fa-fw fa-edit"></i></button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table w-100" id="strategic_table">
                        <thead class="bg-gradient-light">
                            <th>Image</th>
                            <th>Title</th>
                            <th>File</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Last Update</th>
                            <th>Action</th>
                        </thead>

                        <tbody>
                            @foreach ($datas as $item)
                            <tr>
                                @if($item->image_attachment == "")
                                <td>--</td>
                                @else
                                <td><a href="{{asset('/uploads/publication_data/'.$item->image_attachment)}}"
                                        target="_blank"><img
                                            src="{{asset('/uploads/publication_data/'.$item->image_attachment)}}"
                                            width="40px" class="img-fluid"></a></td>
                                @endif
                                <td>{{Str::limit($item->title,'25',$end='..')}}</td>
                                @if($item->file_attachment == "")
                                <td><badge class="badge bg-warning p-1">None</badge></td>
                                @else
                                <td><a href="{{asset('/uploads/publication_data/'.$item->file_attachment)}}"
                                        target="_blank">{{$item->file_type}}</a></td>
                                @endif
                                <td>{{$item->publish_status}}</td>
                                <td>{{Carbon\Carbon::parse($item->created_at)->format('d-m-Y')}}</td>
                                <td>{{Carbon\Carbon::parse($item->updated_at)->diffForHumans()}}</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>

<!-- Modal -->
<div class="modal fade" id="strategicModal" 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">
                <form action="" id="strategic_form" enctype="multipart/form-data">

                    @csrf

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Title:</label>
                                <input type="text" name="title" id="title" class="form-control" placeholder="Enter Strategic Title"
                                    required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <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>

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

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

                    <div class="form-group pt-3">
                        <label for="">Description:</label>
                        <textarea name="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 btn-sm bg-gradient-warning" data-dismiss="modal">Close &nbsp;<i class="fas fa-fw fa-times-circle"></i></button>
                        <input type="hidden" name="hidden_button" id="hidden_button">
                        <input type="hidden" name="hidden_data" id="hidden_data" value="">
                        <button type="submit" class="btn btn-sm bg-gradient-primary">Save &nbsp;<i class="fas fa-fw fa-save"></i></button>
                    </div>
                </form>
            </div>

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

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

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

        //modal displaying
        $('#strategicBtn').on('click', function () {
            $('.modal-title').text('New Strategic Page');
            $('#strategic_form')[0].reset();
            $('#hidden_button').val('Create');
            $('.loader').hide();
            $('#strategicModal').modal('show');
        })

        //editing data
        $(document).on('click','.edit',function(event){
            event.preventDefault();
            
            var id = $(this).attr('id');

            $.ajax({
                url:"/admin_strategic/"+ id + "/edit",
                dataType: "JSON",
                
                success: function(data){
                    $('.modal-title').text("Update Strategic Page");
                    $('#title').val(data.result.title);
                    $('#publish_status').val(data.result.publish_status);
                    $('#hidden_button').val('Edit');
                    $('#hidden_data').val(id);
                    $('.loader').hide();
                    $('#description').summernote('code',data.result.description);
                    $('#strategicModal').modal('show');
                }
            })

        })

        //submitting the form
        $('#strategic_form').on('submit', function (event) {
            event.preventDefault();

            var data_url = '';

            if ($('#hidden_button').val() == "Create") {
                data_url = "{{route('admin_strategic.store')}}";
            }

            if ($('#hidden_button').val() == "Edit"){
                data_url = "{{route('admin_strategic.strategic_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({
                            text: result,
                            type: "warning",
                            icon: "warning",
                            timer: 6500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            title: "Notification!",
                        })
                    }

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

                        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('admin_strategic')}}";
                        }, 2000);
                    }
                }
            })
        })


        //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: "/admin_strategic/destroy/" + delete_id,
                        success: function (data) {

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

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

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

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

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

        })

    })
</script>
@endsection