@extends('layouts.admin', ['title' => 'Participants'])

@push('stylesheets')

<!--datatable css-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<!--datatable responsive css-->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />

<meta name="csrf-token" content="{{ csrf_token() }}">

@endpush

@section('content')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <h5 class="card-title mb-0">{{$farmer_group->farmer_group}} (Participants)</h5>
                            <a href="/export-data?type=participants&farmer_group={{$farmer_group->id}}{{$query_string}}" class="btn btn-outline-dark"><span class="ri ri-download-2-line"></span> Download</a>
                        </div>
                        <div class="card-body">
                            <table id="participants"
                                   class="table table-bordered dt-responsive nowrap table-striped align-middle"
                                   style="width:100%">
                                <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Name</th>
                                    <th style="display:none;">First Name</th>
                                    <th style="display:none;">Last Name</th>
                                    <th>Type of participant</th>
                                    <th>Contact</th>
                                    <th>Farmer group</th>
                                    <th>Village</th>
                                    <th>Approval</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div><!--end col-->
            </div><!--end row-->
        </div>
        <!-- container-fluid -->
    </div>
            <!-- End Page-content -->
@endsection

@push('scripts')

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>


////////////////////////////////INITIALISATION OF DATATABLE ///////////////////////////
    $(document).ready(function(){

        ///////////////////////////AJAX CSRF SET UP //////////////////////////////////////////////

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var farmer_group_id = "{{ $farmer_group->id }}";

        var table = $('#participants').DataTable({
            processing: true,
            serverSide: true,
            ajax: "/view-participants/"+farmer_group_id,
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable:false, searchable:false},
                { data: 'full_name', name: 'full_name'},
                { data: 'first_name', name: 'participants.first_name', orderable:false,  visible:false},
                { data: 'last_name', name: 'participants.last_name', orderable:false, visible:false},
                { data: 'participant_type', name: 'participant_types.participant_type'},
                { data: 'participant_contact', name: 'participants.participant_contact'},
                { data: 'farmer_group', name: 'farmer_groups.farmer_group'},
                { data: 'village', name: 'villages.village'},
                { data: 'approval', name: 'approval'},
                { data: 'actions', name: 'actions'},
            ]
        });

        $(document).on('click', '.btn-delete', function() {

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

            Swal.fire({
                title: 'Are you sure?',
                text: "This farmer will deleted",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({
                    type:'post',
                    url: '/delete-particpant/'+id,
                    success:function(response){
                        Swal.fire(
                            'Deleted!',
                            'Participant has been deleted.',
                            'success'
                        )
                        table.ajax.reload();
                    }
                });
                }

            });

        });
    });
</script>


@endpush