@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">
                RECENT SUBMITTED DATA FOR ONLINE DATABASE
            </div>
            <div class="card-body">
                <table class="table w-100 table-sm text-xs" id="member_table">
                    <thead class="bg-gradient-light">
                        <th>S/N</th>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>TPHA #</th>
                        <th>Type</th>
                        <th>Fee</th>
                        <th>Phone</th>
                        <th>Action</th>
                    </thead>

                    <tbody>
                        @foreach ($members as $item)
                        <tr>
                            <td>{{$loop->index+1}}</td>
                            <td>{{$item->title}} {{$item->first_name}} {{$item->middle_name}} {{$item->last_name}}</td>
                            <td>{{$item->gender}}</td>
                            @if($item->membership_number == "")
                            <td>--</td>
                            @else
                            <td>{{$item->membership_number}}</td>
                            @endif

                            {{-- <td>{{Str::limit($item->institution,'10',$end='...')}}</td> --}}
                            
                            <td>{{$item->membership_type}}</td>
                            <td>{{$item->annual_fee_year}}</td>
                            <td>{{$item->phone}}</td>
                            <td>
                                <button id="{{$item->id}}" class="edit btn btn-sm bg-gradient-primary shadow"><i
                                    class="fas fa-fw fa-edit"></i></button>&nbsp;&nbsp;

                                <button id="{{$item->id}}" class="view btn btn-sm bg-gradient-warning shadow"><i
                                        class="fas fa-fw fa-eye"></i></button>&nbsp;&nbsp;
                                <button id="{{$item->id}}" class="delete btn btn-sm bg-gradient-danger shadow"><i
                                        class="fas fa-fw fa-trash"></i></button>
                            </td>

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

<!-- Modal -->
<div class="modal fade" id="editModal" 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="edit_form">
                    @csrf
                    <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">
                            </div>
                            <div class="col-md-3">
                                <label for="">First Name:</label>
                                <input type="text" name="first_name" id="first_name" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label for="">Middle Name:</label>
                                <input type="text" name="middle_name" id="middle_name" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label for="">Last Name:</label>
                                <input type="text" name="last_name" id="last_name" class="form-control">
                            </div>
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">Gender:</label>
                                <input type="text" name="gender" id="gender" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">TPHA #:</label>
                                <input type="text" name="membership_number" id="membership_number" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">Membership type:</label>
                                <input type="text" name="membership_type" id="membership_type" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">Annual Subscription Fee:</label>
                                <input type="text" name="annual_fee_year" id="annual_fee_year" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">Academic Qualification:</label>
                                <input type="text" name="qualification" id="qualification" class="form-control">

                            </div>
                            <div class="col-md-4">
                                <label for="">Occupation:</label>
                                <input type="text" name="occupation" id="occupation" class="form-control">

                            </div>
                            <div class="col-md-4">
                                <label for="">Area of Expertise Consultancy:</label>
                                <input type="text" name="experience" id="experience" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">Address/Emailing:</label>
                                <input type="text" name="address" id="address" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label for="">Email Address:</label>
                                <input type="email" name="email" id="email" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label for="">Mobile Phone:</label>
                                <input type="text" name="phone" id="phone" class="form-control">
                            </div>
                        </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>
                        <input type="hidden" name="hidden_data" id="hidden_data">
                        <input type="hidden" name="hidden_action" id="hidden_action">
                        <button type="submit" class="btn btn-primary">Update &nbsp;<i
                                class="fas fa-fw fa-save"></i></button>
                    </div>
                </form>
            </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" readonly id="title_v" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">First Name:</label>
                                <input type="text" name="first_name" readonly id="first_name_v" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label for="">Middle Name:</label>
                                <input type="text" name="middle_name" readonly id="middle_name_v" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label for="">Last Name:</label>
                                <input type="text" name="last_name" readonly id="last_name_v" class="form-control">
                            </div>
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">Gender:</label>
                                <input type="text" name="gender" id="gender_v" readonly class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">TPHA #:</label>
                                <input type="text" name="membership_number" readonly id="membership_number_v" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">Membership type:</label>
                                <input type="text" name="membership_type" readonly id="membership_type_v" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">Annual Subscription Fee:</label>
                                <input type="text" name="annual_fee_year" readonly id="annual_fee_year_v" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">Academic Qualification:</label>
                                <input type="text" name="qualification" readonly id="qualification_v" class="form-control">

                            </div>
                            <div class="col-md-4">
                                <label for="">Occupation:</label>
                                <input type="text" name="occupation" readonly id="occupation_v" class="form-control">

                            </div>
                            <div class="col-md-4">
                                <label for="">Area of Expertise Consultancy:</label>
                                <input type="text" name="experience" readonly id="experience_v" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">Address/Emailing:</label>
                                <input type="text" name="address" readonly id="address_v" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label for="">Email Address:</label>
                                <input type="email" name="email" readonly id="email_v" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label for="">Mobile Phone:</label>
                                <input type="text" name="phone" readonly id="phone_v" class="form-control">
                            </div>
                        </div>
                    </div>
                </form>
            </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>
            </div>
        </div>
    </div>
</div>

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

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

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

            $.ajax({
                url: "/membership_record_update/" + edit_id + "/edit",
                success: function (data) {
                    $('.modal-title').text(data.result.title + " " + data.result.first_name + " " + data.result.middle_name + " " + data.result.last_name + " Details.");
                    $('#title').val(data.result.title);
                    $('#first_name').val(data.result.first_name);
                    $('#middle_name').val(data.result.middle_name);
                    $('#last_name').val(data.result.last_name);
                    $('#membership_number').val(data.result.membership_number);
                    $('#gender').val(data.result.gender);
                    $('#membership_type').val(data.result.membership_type);
                    $('#annual_fee_year').val(data.result.annual_fee_year);
                    $('#qualification').val(data.result.qualification);
                    $('#occupation').val(data.result.occupation);
                    $('#experience').val(data.result.experience);
                    $('#address').val(data.result.address);
                    $('#phone').val(data.result.phone);
                    $('#email').val(data.result.email);
                    $('#hidden_data').val(edit_id);
                    $('#hidden_action').val('Edit');
                    $('#editModal').modal('show');
                }
            })
        })


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

            $.ajax({
                url: "/membership_record_update/" + view_id + "/edit",
                success: function (data) {
                    $('.modal-title').text(data.result.title + " " + data.result.first_name + " " + data.result.middle_name + " " + data.result.last_name + " Details.");
                    $('#title_v').val(data.result.title);
                    $('#first_name_v').val(data.result.first_name);
                    $('#middle_name_v').val(data.result.middle_name);
                    $('#last_name_v').val(data.result.last_name);
                    $('#membership_number_v').val(data.result.membership_number);
                    $('#gender_v').val(data.result.gender);
                    $('#membership_type_v').val(data.result.membership_type);
                    $('#annual_fee_year_v').val(data.result.annual_fee_year);
                    $('#qualification_v').val(data.result.qualification);
                    $('#occupation_v').val(data.result.occupation);
                    $('#experience_v').val(data.result.experience);
                    $('#address_v').val(data.result.address);
                    $('#phone_v').val(data.result.phone);
                    $('#email_v').val(data.result.email);
                    $('#viewModal').modal('show');
                }
            })
        })

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

            var data_url = '';

            //assigning the routes
            if ($('#hidden_action').val() == "Edit") {
                data_url = "{{route('membership_record_update.update_data')}}";
            }

            //ajax part now
            $.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();
                        $('#editModal').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('membership_record_update')}}";
                        }, 2000);
                    }
                }
            })
        })

        //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: "/membership_record_update/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('membership_record_update')}}";
                                }, 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