@extends('layouts.master')
@section('content')
    <div class="row p-2">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    Conference Abstracts
                </div>
                <div class="card-body">
                    <table class="table text-sm" id="table" style="width:100%;">
                        <thead class='bg-light'>
                            <tr>
                                <th>S/N</th>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>City</th>
                                <th>Abstract title</th>
                                <th>Action</th>
                            </tr>
                        </thead>
    
                        <tbody>
                            @foreach($data_abstract as $row)
                                <tr>
                                    <td>{{$loop->index+1}}</td>
                                    <td>{{$row->title}}. &nbsp;{{$row->first_middle_name}} {{$row->family_name}}</td>
                                    <td>{{$row->mobile}}</td>
                                    <td>{{$row->city}}</td>
                                    <td title="{{$row->abstract_title}}">{{Str::limit($row->abstract_title,'20',$end = '...')}}</td>
                                    <td>
                                        <a target = "_blank" href="{{url('admin_conference_abstract/preview',['id'=>$row->id])}}"><button class="btn btn-sm bg-gradient-warning mr-2"><i class="fas fa-fw fa-print"></i></button></a>
                                        <button class="edit btn btn-sm bg-gradient-primary mr-2" id="{{$row->id}}"><i class="far fa-fw fa-edit"></i></button>
                                        <button class="delete btn btn-sm bg-gradient-danger" id="{{$row->id}}"><i class="fas fa-fw fa-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="editModal" class="modal fade" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title" id="my-modal-title">Title</h5>
                    <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>

                <form action="" id="abstract_form">
                    <div class="modal-body">
                        @csrf
                            <div class="row">
                                <div class="col-md-6 text-left">

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Title *:</label>
                                                <select name="title" id="title" class="form-control" required>
                                                    <option value="">Select title</option>
                                                    <option value="Mr">Mr.</option>
                                                    <option value="Mrs">Mrs.</option>
                                                    <option value="Ms">Ms.</option>
                                                    <option value="Prof">Prof.</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">First Middle names *:</label>
                                                <input type="text" class="form-control" id="first_middle_name" name="first_middle_name" placeholder="Enter name" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Family name *:</label>
                                                <input type="text" class="form-control" id="family_name" name="family_name" placeholder="Enter family name" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Institution/Organization:</label>
                                                <input type="text" class="form-control" id="institution" name="institution" placeholder="Institution">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Mailing/Postal address:</label>
                                                <input type="text" class="form-control" name="postal_address" id="postal_address" placeholder="Postal address">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">City/Town *:</label>
                                                <input type="text" class="form-control" id="city" name="city" placeholder="city/town" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Country *:</label>
                                                <input type="text" class="form-control" name="country" id="country" placeholder="country" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Mobile *:</label>
                                                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile phone" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>Fax:</label>
                                                <input type="text" class="form-control" id="fax" name="fax" placeholder="Fax">
                                            </div>
                                            <div class="col-md-6">
                                                <label>Email *:</label>
                                                <input type="email" class="form-control" id="email" name="email" placeholder="Email address" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="">Are you willing to serve as session Chair if requested? *</label>
                                        <select name="session_chair" id="session_chair" class="form-control" required>
                                            <option value="">Select choice</option>
                                            <option value="Yes">Yes I am willing</option>
                                            <option value="No">No</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 text-left">
                                    <div class="form-group">
                                        <label for="">Abstract title *:</label>
                                        <input type="text" class="form-control" placeholder="Abstract title" id="abstract_title" name="abstract_title" required>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Sub theme *:</label>
                                                <input type="text" class="form-control" name="sub_theme" id="sub_theme" placeholder="Sub theme" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Authors *:</label>
                                                <input type="text" class="form-control" name="authors" id="authors" placeholder="authors separate by comma," required>
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Presenter:</label>
                                                <input type="text" class="form-control" id="presenter" name="presenter" placeholder="presenter from authors">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Type of presentation *:</label>
                                                <select name="type_of_presentation" id="type_of_presentation" class="form-control" required>
                                                    <option value="">Select mode</option>
                                                    <option value="Oral">Oral presentation</option>
                                                    <option value="Postal">Postal presentation</option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <div class="form-group">
                                        <label for="">Abstract (300 words) *:</label>
                                        <textarea name="abstract" id="abstract" class="form-control" placeholder="Type your abstract" rows="7" required></textarea>
                                    </div>

                                </div>
                            </div>

                            
                    </div>
                    <div class="modal-footer">
                        <div class="form-group text-right">
                            <input type="hidden" name="hidden_id" id="hidden_id">
                            <button class="btn btn-primary">Submit abstract &nbsp;&nbsp;&nbsp;<i class="fas fa-fw fa-envelope text-white"></i></button>
                        </div>
                    </div>
                </form>
                
            </div>
        </div>
    </div>

    <script>
        $('document').ready(function(){
            $('#table').DataTable({
                stateSave: true,
                responsive: true,
                serverSide: false,
            })

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

                var edit_id = $(this).attr('id');

                $.ajax({
                    url: "admin_conference_abstract/edit/" + edit_id,
                    method: "GET",
                    dataType: "JSON",
                    success: function(data){
                        $('.modal-title').text(data.result.title + '. ' + data.result.first_middle_name + ' ' + data.result.family_name)
                        $('#hidden_id').val(edit_id);
                        $('#title').val(data.result.title);
                        $('#first_middle_name').val(data.result.first_middle_name);
                        $('#family_name').val(data.result.family_name);
                        $('#institution').val(data.result.institution);
                        $('#postal_address').val(data.result.postal_address);
                        $('#city').val(data.result.city);
                        $('#country').val(data.result.country);
                        $('#mobile').val(data.result.mobile);
                        $('#fax').val(data.result.fax);
                        $('#email').val(data.result.email);
                        $('#session_chair').val(data.result.session_chair);
                        $('#abstract_title').val(data.result.abstract_title);
                        $('#sub_theme').val(data.result.sub_theme);
                        $('#authors').val(data.result.authors);
                        $('#presenter').val(data.result.presenter);
                        $('#type_of_presentation').val(data.result.type_of_presentation);
                        $('#abstract').val(data.result.abstract);
                        $('#editModal').modal('show');
                    }
                })
            })

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

            //declaring url
            var data_url = "{{route('admin_conference_abstract.update')}}";
            
            $.ajax({
                url: data_url,
                method: "POST",
                dataType: "JSON",
                data: $(this).serialize(),
                
                //--------------------------------------//
                beforeSend: function () {
                    // Show image container
                    $(".loader").show();
                },
                success: function (data) {

                    if (data.success) {
                        $('.loader').hide();
                        
                        var message = data.success;

                        $('#abstract_form')[0].reset();

                        $('#editModal').hide();

                        Swal.fire({
                            title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                            text: message,
                            icon: "success",
                            timer: 4500,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })

                        setTimeout(() => {
                            window.location.href = "{{url('admin_conference_abstract')}}";
                        }, 4500);

                    }

                    if (data.errors) {
                        var message = data.errors;
                        Swal.fire({
                            title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                            text: message,
                            icon: "warning",
                            timer: 6500,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })
                    }

                    if (data.info) {
                        var message = data.info;
                        Swal.fire({
                            title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                            text: message,
                            icon: "info",
                            timer: 8500,
                            showConfirmButton: false,
                            showCancelButton: false,
                            })
                        }
                    }
                })
            })

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

                                if(data.success){
                                    //alerting
                                    var result =data.success;
                                    Swal.fire({
                                        title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                                        text: result,
                                        icon: 'success',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 4000,
                                    });

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

                                if(data.errors){

                                    var result = data.errors;
                                    Swal.fire({
                                        title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                                        text: result,
                                        icon: 'warning',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 2000,
                                    });
                                }
                            }

                        });

                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        Swal.fire({
                            title: "<h4 class='text-primary'><b>Notification!</b></h4>",
                            text: 'Action cancelled.',
                            icon: 'info',
                            timer: 2000,
                            showCancelButton: false,
                            showConfirmButton: false,
                        })
                    }
                })

            });
        })
    </script>
@endsection