@extends('layouts.admin', ['title' => 'Create Employment Record'])

@push('stylesheets')

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    {{--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">--}}
    {{--    <link rel="stylesheet" href="{{ asset('/assets/libs/nouislider/nouislider.min.css') }} ">--}}

@endpush

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

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{url('/employment')}}">Employment</a></li>
                                <li class="breadcrumb-item active" aria-current="page">New Employment record</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="col-md-6 col-12">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Add Employment Record</h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="{{route("employment.store")}}">
                                        @csrf
                                        <div class="form-group mb-3">
                                            <label>Farmer Group</label>
                                            <select class="form-control" id="group_select" name="farmer_group" required>
                                                <option value="">Select Group</option>
                                                @foreach($groups as $group)
                                                    @if(old('farmer_group') == $group->id)
                                                        <option value="{{$group->id}}" selected>{{$group->farmer_group}}</option>
                                                    @else
                                                        <option value="{{$group->id}}">{{$group->farmer_group}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-3" id="participants_div" style="display: none;">
                                            <label>Participant</label>
                                            <select class="form-control" name="participant_id" id="participant_select" required>
                                            </select>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Employment Type</label>
                                            <select name="type" class="form-control" id="type_select">
                                                <option value=""></option>
                                                @if(old('type') == 'self')
                                                    <option value="self" selected>Self Employment</option>
                                                @else
                                                    <option value="self">Self Employment</option>
                                                @endif
                                                @if(old('type') == 'employed')
                                                    <option value="employed" selected>Employed</option>
                                                @else
                                                    <option value="employed">Employed</option>
                                                @endif
                                            </select>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Employment Level</label>
                                            <select name="level" class="form-control" id="employment_level">
                                                <option value=""></option>
                                                @foreach(Config::get('constants.employment_levels') as $item)
                                                    @if(old('level') == $item)
                                                        <option value="{{$item}}" selected>{{$item}}</option>
                                                    @else
                                                        <option value="{{$item}}">{{$item}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-3 d-none employed">
                                            <label>Employer Name</label>
                                            <input type="text" class="form-control" name="employer_name" placeholder="Employer's name" value="{{old('employer_name')}}">
                                        </div>
                                        <div class="form-group mb-3 d-none self">
                                            <label>Enterprise</label>
                                            <select name="enterprise_id" id="enterprise_select">
                                                <option value=""></option>
                                                @foreach($enterprises as $enterprise)
                                                    <option value="{{$enterprise->id}}">{{$enterprise->enterprise}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Job title</label>
                                            <input type="text" class="form-control" name="job_title" placeholder="Job title" value="{{old('job_title')}}">
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Payment Mode</label>
                                            <select class="form-control" name="payment_mode" id="mode_select" required>
                                                <option value=""></option>
                                                <option value="daily">Daily</option>
                                                <option value="weekly">Weekly</option>
                                                <option value="monthly">Monthly</option>
                                            </select>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Employment Date</label>
                                            <input type="date" name="employment_date" class="form-control" value="{{old('employment_date')}}">
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Support offered by the project</label>
                                            <select class="form-control" name="support_id[]" id="support_select" multiple>
                                                @foreach($support as $sp)
                                                    <option value="{{$sp->id}}">{{$sp->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <button class="btn btn-primary" type="submit">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div>
            <!-- container-fluid -->
        </div>


        <!-- End Page-content -->


        @endsection

        @push('scripts')
            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
            <script>
                $(document).ready(function () {
                    const old_farmer_group = {{Js::from(old('farmer_group'))}};
                    const old_participant = {{Js::from(old('participant_id'))}};
                    console.log('old participant :: ', old_participant);
                    if (old_farmer_group != null) {
                        farmerGroupChange(old_farmer_group);
                    }
                    $('#group_select')
                        .select2({placeholder: 'Select group'})
                        .change(function(){
                            var id = $(this).val();
                            farmerGroupChange(id);
                        });

                    function farmerGroupChange(id) {
                        const container = $('#participants_div');

                        $.ajax({
                            url: '/farmerGroupParticipants/' + id,
                            type: 'get',
                            dataType: 'json',
                            success: function(response) {
                                container.show();
                                let ptc = $('#participant_select');
                                ptc.empty();

                                if (response.data.length > 0) {
                                    first_option_line = '<option value="">Select participant</option>'
                                    ptc.append(first_option_line);
                                    for (var i = 0; i < response.data.length; i++) {
                                        var id = response.data[i].id;
                                        var name = response.data[i].first_name + " " + response.data[i].last_name;

                                        if (old_participant == null) {
                                            var option = "<option value='" + id + "'>" + name + "</option>";
                                        } else {
                                            if (old_participant == id) {
                                                var option = "<option value='" + id + "' selected>" + name + "</option>";
                                            } else {
                                                var option = "<option value='" + id + "'>" + name + "</option>";
                                            }
                                        }

                                        ptc.append(option);
                                    }
                                    ptc.select2({placeholder: 'Select Participant'});
                                }
                            }
                        })
                    }

                    $('#type_select')
                        .select2({placeholder: 'Select Employment type'})
                        .change(function (){
                            const type = $(this).val();
                            var self = $('.self');
                            var employed = $('.employed');

                            if (type == "self") {
                                self.addClass('d-block');
                                self.removeClass('d-none');
                                employed.addClass('d-none');
                                employed.removeClass('d-block');
                            } else if(type == "employed") {
                                self.addClass('d-none');
                                self.removeClass('d-block');
                                employed.addClass('d-block');
                                employed.removeClass('d-none');
                            } else {
                                self.addClass('d-none');
                                self.removeClass('d-block');
                                employed.addClass('d-none');
                                employed.removeClass('d-block');
                            }
                        });
                    $('#enterprise_select').select2({placeholder: 'Select enterprises'});
                    $('#mode_select').select2({placeholder: 'Select payment mode'});
                    $('#support_select').select2({placeholder: 'Select support offered'});
                    $('#employment_level').select2({placeholder: 'Select employment level'});

                });
            </script>
    @endpush