@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 text-center">
                REGISTERED MEMBERS FOR 39<sup>th</sup> ANNUAL CONFERENCE
            </div>
            <div class="card-body">
                <table class="table w-100 table-sm text-xs" id="online_table">
                    <thead class="bg-gradient-light">
                        <th>S/N</th>
                        <th>Name</th>
                        <th>Occupation</th>
                        <th>Institution</th>
                        <th>TPHA #</th>
                        <th>Payment</th>
                        <th>Town</th>
                        <th>Phone</th>
                        <!--<th>Email</th>-->
                        <th>Action</th>
                    </thead>

                    <tbody>
                        @foreach ($admin_online_services as $item)
                        <tr>
                            <td>{{$loop->index+1}}</td>
                            <td title="{{$item->title}} {{$item->full_name}}">{{$item->title}} {{Str::limit($item->full_name,'25',$end='..')}}</td>
                            <td title="{{$item->occupation}}">{{Str::limit($item->occupation,'15',$end='..')}}</td>
                            <td>{{Str::limit($item->institution,'10',$end='...')}}</td>
                            @if($item->membership_number == "")
                            <td>--</td>
                            @else
                            <td>{{$item->membership_number}}</td>
                            @endif

                            @if($item->payment_mode == "mobile")
                            <td>{{$item->mobile_agent}}</td>
                            @elseif($item->payment_mode == "bank")
                            <td><a href="{{url('uploads/conference_slips/'.$item->bank_slip)}}" target ="_blank">View</a></td>
                            @else
                            <td>--</td>
                            @endif
                            <td>{{$item->town}}</td>
                            <td>{{$item->telephone}}</td>
                            {{-- {{Str::limit($item->email),'10',$end='...'}}</td> --}}
                            <td>
                                <button id="{{$item->id}}" class="view btn btn-sm bg-gradient-warning shadow ml-1"><i
                                        class="fas fa-fw fa-eye"></i></button>
                                <button id="{{$item->id}}" class="delete btn btn-sm bg-gradient-danger shadow ml-1"><i
                                        class="fas fa-fw fa-trash"></i></button>
                            </td>

                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gradient-primary text-white">
                <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="online_form">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">Title:</label>
                                <input type="text" name="title" id="title" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-3">
                                <label for="">Name:</label>
                                <input type="text" name="full_name" id="full_name" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-3">
                                <label for="">Occupation/Designation:</label>
                                <input type="text" name="occupation" id="occupation" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-3">
                                <label for="">Institution/Organization:</label>
                                <input type="text" name="institution" id="institution" class="form-control form-control-sm">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            
                            <div class="col-md-3">
                                <label for="">TPHA #:</label>
                                <input type="text" name="membership_number" id="membership_number" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-3">
                                <label for="">Mailing/Postal Address:</label>
                                <input type="text" name="mailing" id="mailing" class="form-control form-control-sm">
                            </div>

                            <div class="col-md-3">
                                <label for="">Hotel Address:</label>
                                <input type="text" name="hotel" id="hotel" class="form-control form-control-sm">
                            </div>

                            <div class="col-md-3">
                                <label for="">Payment mode:</label>
                                <input type="text" name="payment_mode" id="payment_mode" class="form-control form-control-sm">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">Agent/Mobile:</label>
                                <input type="text" name="agent_mobile" id="agent_mobile" class="form-control form-control-sm">

                            </div>

                            <div class="col-md-3">
                                <label for="">Town:</label>
                                <input type="text" name="town" id="town" class="form-control form-control-sm">

                            </div>
                            <div class="col-md-3">
                                <label for="">Country:</label>
                                <input type="text" name="country" id="country" class="form-control form-control-sm">

                            </div>
                            <div class="col-md-3">
                                <label for="">Telephone:</label>
                                <input type="text" name="telephone" id="telephone" class="form-control form-control-sm">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">Fax #:</label>
                                <input type="text" name="fax" id="fax" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-4">
                                <label for="">Email Address:</label>
                                <input type="text" name="email" id="email" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-4">
                                <label for="">TPHA Member:</label>
                                <input type="text" name="member_confirm" id="member_confirm" class="form-control form-control-sm">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">Paper Confirmation:</label>
                                <input type="text" name="paper_confirm" id="paper_confirm" class="form-control form-control-sm">

                            </div>
                            <div class="col-md-8">
                                <label for="">Paper Titles:</label>
                                <input type="text" name="paper_title" id="paper_title" class="form-control form-control-sm">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn bg-gradient-warning" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

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

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

        //viewing
        $(document).on('click', '.view', function (event) {
            var view_id = $(this).attr('id');

            $.ajax({
                url: "/online_services/" + view_id + "/edit",
                success: function (data) {
                    $('.modal-title').text(data.result.title + " " + data.result.full_name +
                        " Details.");
                    $('#title').val(data.result.title);
                    $('#full_name').val(data.result.full_name);
                    $('#occupation').val(data.result.occupation);
                    $('#institution').val(data.result.institution);
                    $('#membership_number').val(data.result.membership_number);
                    $('#mailing').val(data.result.mailing);
                    $('#town').val(data.result.town);
                    $('#country').val(data.result.country);
                    $('#telephone').val(data.result.telephone);
                    $('#hotel').val(data.result.hotel);
                    $('#payment_mode').val(data.result.payment_mode);
                    $('#mobile_agent').val(data.result.mobile_agent);
                    $('#fax').val(data.result.fax);
                    $('#email').val(data.result.email);
                    $('#member_confirm').val(data.result.member_confirm);
                    $('#paper_confirm').val(data.result.paper_confirm);
                    $('#paper_title').val(data.result.paper_title);
                    $('#viewModal').modal('show');
                }
            })
        })

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

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

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

                            if (data.errors) {

                                var result = data.errors;
                                Swal.fire({
                                    title: 'Notification!',
                                    text: result,
                                    icon: 'warning',
                                    showCancelButton: false,
                                    showConfirmButton: false,
                                    timer: 2000,
                                });
                            }
                        }

                    });

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

        });
    })
</script>
@endsection