@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" />
{{--<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />--}}

<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">Participants</h5>
                                    <a href="/export-data?type=participants&{{$query_string}}"
                                       class="btn btn-dark"><span class="ri ri-download-2-line"></span> Download</a>
                                </div>
                                <div class="card-body">
                                    <div class="row py-3 mb-2 d-flex align-items-center bg-light">
                                        <div class="col-auto"><h5>Filters</h5></div>
                                        <form class="row align-items-end">
                                            <div class="col-auto">
                                                <label>Start Date</label>
                                                <input type="date" name="start_date" class="form-control" placeholder="start date" value="{{request()->get('start_date')}}">
                                            </div>
                                            <div class="col-auto">
                                                <label>End Date</label>
                                                <input type="date" name="end_date" class="form-control" placeholder="end date" value="{{request()->get('end_date')}}">
                                            </div>
                                            <div class="col-auto">
                                                <label>Gender</label>
                                                <select name="gender" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(Config::get('constants.genders') as $gender)
                                                        @if(request()->get('gender') == $gender)
                                                            <option value="{{$gender}}" selected>{{$gender}}</option>
                                                        @else
                                                            <option value="{{$gender}}">{{$gender}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <label>Status</label>
                                                <select name="status" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(Config::get('constants.statuses') as $status)
                                                        @if(request()->get('status') == $status)
                                                            <option value="{{$status}}" selected>{{$status}}</option>
                                                        @else
                                                            <option value="{{$status}}">{{$status}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <label>Consent Form</label>
                                                <select name="consent_form" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(['present','absent'] as $item)
                                                        @if(request()->get('consent_form') == $item)
                                                            <option value="{{$item}}" selected>{{$item}}</option>
                                                        @else
                                                            <option value="{{$item}}">{{$item}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <label>Active Status</label>
                                                <select name="active_status" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(Config::get('constants.active_statuses') as $item)
                                                        @if(request()->get('active_status') == $item)
                                                            <option value="{{$item}}" selected>{{$item}}</option>
                                                        @else
                                                            <option value="{{$item}}">{{$item}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <label>Districts</label>
                                                <select name="district" class="form-control" id="districts_filter">
                                                    <option value="">All</option>
                                                    @foreach($districts as $item)
                                                        @if(request()->get('district') == $item->id)
                                                            <option value="{{$item->id}}" selected>{{$item->district}}</option>
                                                        @else
                                                            <option value="{{$item->id}}">{{$item->district}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-auto" id="subcounties-filter-div" style="display: none;">
                                                <label>Subcounties</label>
                                                <select name="subcounty" id="subcounties_filter">
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                            <div class="col-auto pt-3">
                                                <button type="submit" class="btn btn-dark">Apply</button>
                                            </div>
                                            <div class="col-auto pt-3">
                                                <a href="{{url()->current()}}" type="button" class="btn btn-danger">Clear</a>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-4">
                                            <form action="{{url('bulk-approve-participant')}}" method="post">
                                                @csrf
                                                <input type="text" id="approval_input" name="participant_ids" class="d-none">
                                                <button class="btn btn-info" id="approve_btn" type="submit" disabled>Approve selected</button>
                                            </form>
                                        </div>
                                    </div>
                                    <table id="participants" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>No.</th>
                                                <th>Select</th>
                                                <th>Name</th>
                                                <th style="display:none;">First Name</th>
                                                <th style="display:none;">Last Name</th>
                                                <th>Contact</th>
                                                <th>Farmer group</th>
                                                <th>District</th>
                                                <th>Village</th>
                                                <th>Approval</th>
                                                <th>Participant Code</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>

                                    </table>
                                    <a href="/export-data?type=participants&{{$query_string}}"
                                       class="btn btn-outline-light"><span class="ri ri-download-2-line"></span></a>
                                </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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>


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

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

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

        var table = $('#participants').DataTable({
            processing: true,
            serverSide: true,
            // ajax: `/view-participants?filter_by=${filter_by}&value=${filter_value}`,
            ajax: `/view-participants?${createQueryString()}`,
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable:false, searchable:false},
                { data: 'select', name: 'select'},
                { 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_contact', name: 'participants.participant_contact'},
                { data: 'farmer_group', name: 'farmer_groups.farmer_group'},
                { data: 'district', name: 'participant_types.district', orderable: false, searchable: false},
                { data: 'village', name: 'villages.village'},
                { data: 'approval', name: 'approval', orderable: true},
                { data: 'participant_code', name: 'participant_code'},
                { 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-participant/'+id,
                    success:function(response){
                        Swal.fire(
                            'Deleted!',
                            'farmer has been deleted.',
                            'success'
                        )
                        table.ajax.reload();
                    }
                });
                }

            });

        });

        let for_approvals = [];
        $(document).on('change', '.approval_select', function (){
            const btn = $('#approve_btn');
            if (this.checked) {
                for_approvals.push(this.value);
            } else {
                for_approvals.splice(for_approvals.indexOf(this.value),1);
            }
            if (for_approvals.length > 0) {
                btn.attr('disabled', false);
            } else {
                btn.attr('disabled', true);
            }
            $('#approval_input').val(for_approvals);
        });
    });
</script>


@endpush