@extends('layouts.master')
@section('title',__('Create candidate'))
@section('breadcum')
<div class="breadcrumbbar">
    <div class="row align-items-center">
        <div class="col-md-8 col-lg-8">
            <h4 class="page-title">{{ __("Create candidate") }}</h4>
            <div class="breadcrumb-list">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __("Home") }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __("Create candidate") }}
                    </li>
                </ol>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="widgetbar">
                <a title="Back" href="{{ route('candidate.index') }}" class="btn btn-secondary"><i
                        class="feather icon-arrow-left mr-2"></i>{{ __('Back') }} </a>
            </div>
        </div>
    </div>
</div>
@endsection
@section('maincontent')
<!-- form to create candidate start -->
<form action="{{ route('candidate.store') }}" class="form" method="POST" novalidate enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">{{ __("Create a new candidate :") }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-3 col-md-12">
                            <input name="photo" type="file" id="imgupload" value="" />
                            <img id="imguploads" @error('photo') is-invalid @enderror
                                src="{{ url('media/images/default.jpg') }}" alt="profilephoto"
                                class="profilechoose img-thumbnail rounded img-fluid">
                            <input id="userphoto" name="autophoto" value="{{ old('autophoto') }}"
                                title="enter valid no." type="hidden" class="form-control">
                            @error('photo')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-lg-9 col-md-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-dark">{{ __("Mobile :") }}<span
                                                class="text-danger">*</span></label>
                                        <input id="usermobile" value="{{ old('mobile') }}" title="enter valid no."
                                            pattern="[0-9]+" type="text" class="form-control"
                                            placeholder="Please Enter Valid No." name="mobile" required="">
                                        <div id="mobileList"></div>
                                        {{ csrf_field() }}
                                        @error('mobile')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-dark">{{ __("Name :") }}<span
                                                class="text-danger">*</span></label>
                                        <input id="name" value="{{ old('name') }}" autofocus="" type="text"
                                            class="form-control @error('name') is-invalid @enderror"
                                            placeholder="Please Enter Name" name="name" required="">
                                        @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-dark">{{ __("Email :") }}<span
                                                class="text-danger">*</span></label>
                                        <input id="useremail" value="{{ old('email') }}" autofocus="" type="email"
                                            name="email" class="form-control @error('email') is-invalid @enderror"
                                            placeholder="Please Enter Email Id" required="">
                                        @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark" for="address">{{ __("Gender :") }}</label><br>
                                <div class="row">
                                    <div class="col-md-4">
                                        <input id="usergenderm" type="radio" id="male" name="gender" value="m">
                                        <label for="male">{{ __("Male") }}</label><br>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="usergenderf" type="radio" id="female" name="gender" value="f">
                                        <label for="female">{{ __("Female") }}</label><br>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="usergendero" type="radio" id="other" name="gender" value="o">
                                        <label for="other">{{ __("Other") }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark" for="address">{{ __("Address Line 1 :") }}<span
                                        class="text-danger">*</span></label>
                                <textarea required="" class="@error('address1') is-invalid @enderror form-control"
                                    id="address1" name="address1"
                                    placeholder="Please Enter Your Address 1">{{ old('address1') }}</textarea>
                                @error('address1')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark" for="address">{{ __("Address Line 2 :") }}</label>
                                <textarea class="form-control" id="address2" name="address2"
                                placeholder="Please Enter Your Address 2">{{ old('address2') }}</textarea>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark" for="address">{{ __("Select Country :") }}<span
                                        class="text-danger">*</span></label>
                                <select required="" name="country_id" id="country-dropdown"
                                    class="form-control @error('country_id') is-invalid @enderror select2">
                                    <option value="">Select country</option>
                                    @foreach($countries as $key=> $country)
                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                                @error('country_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror

                                <div class="invalid-feedback">
                                    {{ __('Please select country') }}
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark" for="address">{{ __("Select State :") }}<span
                                        class="text-danger">*</span></label>
                                <select name="state_id" id="state-dropdown"
                                    class="form-control @error('state_id') is-invalid @enderror select2">
                                    <option value="">Select country first</option>
                                </select>
                                @error('state_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror

                                <div class="invalid-feedback">
                                    {{ __('Please select state') }}
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark" for="address">{{ __("Select City :") }}<span
                                        class="text-danger">*</span></label>
                                <select name="city_id" id="city-dropdown"
                                    class="form-control @error('city_id') is-invalid @enderror select2">
                                    <option value="">Please select city</option>
                                </select>
                                @error('city_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                                <div class="invalid-feedback">
                                    {{ __('Please select city') }}
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark">{{ __("Date of Birth :") }}<span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input value="{{ old('dob') }}" name="dob" type="text" id="datepicker"
                                        class="datepicker-here form-control" placeholder="dd/mm/yyyy"
                                        aria-describedby="basic-addon2">
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="basic-addon2"><i
                                                class="feather icon-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark" for="address">{{ __("Election Type :") }}<span
                                        class="text-danger">*</span></label>
                                <select name="electiontype" id="electiontype-dropdown"
                                    class="form-control @error('electiontype') is-invalid @enderror select2"
                                    required="">
                                    <option value="">Choose Election Type</option>
                                    @foreach($electiontypes as $key=> $electiontype)
                                    <option value="{{ $electiontype->id }}">{{ $electiontype->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="form-group">
                                        <label class="text-dark" for="address">{{ __("Constituency :") }}<span
                                                class="text-danger">*</span></label>
                                        <select data-placeholder="Choose Election Type First" multiple="multiple"
                                            name="constituency[]" id="constituency-dropdown"
                                            class="form-control @error('constituency') is-invalid @enderror select2"
                                            required="">

                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3 col-md-3">
                                    <a onclick="SelectAllCountry2()" id="btn_sel"
                                        class="text-white btn btn-sm btn-info display-none" isSelected="no">
                                        <i class="fa fa-check-square-o"></i>
                                    </a>
                                    <a onclick="RemoveAllCountry2()" id="btn_rem"
                                        class="mt-1 text-white btn btn-sm btn-danger display-none" isSelected="yes">
                                        <i class="fa fa-window-close"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark">{{ __("Select Designation :") }}<span
                                        class="text-danger">*</span></label>
                                <select name="designation" id="designation-dropdown"
                                    class="form-control @error('designation') is-invalid @enderror select2" required="">
                                    <option value="">Choose Election Type First</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark">{{ __("Select Party :") }}<span
                                        class="text-danger">*</span></label>
                                <select name="party" id=""
                                    class="form-control @error('party') is-invalid @enderror select2" required="">
                                    <option value="">Choose Party</option>
                                    @foreach($party as $key=> $parties)
                                    <option value="{{ $parties->id }}">{{ $parties->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label class="text-dark">{{ __("Upload Documents :") }}</label>
                                <input value="{{ old('document') }}" type="file" name="document" class="form-control"
                                    placeholder="Select Document">
                                <small>{{ __("( Choose pdf file )") }}</small>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-md btn-success">{{ __("+ Create") }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<!-- form to create candidate end -->
@endsection
@section('scripts')
<!-- get country state city start  -->
<script>
    $(function () {
        $('#country-dropdown').on('change', function () {
            var country_id = this.value;
            $("#state-dropdown").html('');
            $.ajax({
                url: "{{ route('get.states.by.country') }}",
                type: "POST",
                data: {
                    country_id: country_id,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#state-dropdown').html('<option value="">Select State</option>');
                    $.each(result.states, function (key, value) {
                        $("#state-dropdown").append('<option value="' + value.id +
                            '">' + value.name + '</option>');
                    });
                    $('#city-dropdown').html(
                    '<option value="">Select State First</option>');
                }
            });
        });
        $('#state-dropdown').on('change', function () {
            var state_id = this.value;

            $("#city-dropdown").html('');
            $.ajax({
                url: "{{ route('get.cities.by.state') }}",
                type: "POST",
                data: {
                    state_id: state_id,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    $('#city-dropdown').html('<option value="">Select City</option>');
                    $.each(result.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value.id +
                            '">' + value.name + '</option>');
                    });
                }
            });
        });
    });
    // get country state city end
    // for search start
    $(function () {
        $('#usermobile').keyup(function () {
            var query = $(this).val();
            if (query != '') {
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('autocomplete.fetch') }}",
                    method: "POST",
                    data: {
                        query: query,
                        _token: _token
                    },
                    success: function (data) {
                        $('#mobileList').fadeIn();
                        $('#mobileList').html(data);
                    }
                });
            }
        });

        $(document).on('click', 'li', 'demo', function () {
            var _token = $('input[name="_token"]').val();
            $.ajax({
                url: "{{ route('autocomplete.getdata') }}",
                method: "POST",
                data: {
                    userdata: this.id,
                    _token: _token
                },
                success: function (data) {
                    $('#usermobile').val(data.mobile);
                    $('#username').val(data.name);
                    $('#useremail').val(data.email);
                    var imgfilename = data.photo;
                    $('#userphoto').val(imgfilename);
                    var imagepath = "{{ url('media/users/') }}";
                    var aa = imagepath + '/' + imgfilename;
                    if (imgfilename) {
                        $('#imguploads').attr("src", aa);
                    }

                    if (data.gender != '') {
                        if (data.gender == 'm') {
                            $("#usergenderm").attr('checked', true);
                        } else if (data.gender == 'f') {
                            $("#usergenderf").attr('checked', true);
                        } else {
                            $("#usergendero").attr('checked', true);
                        }
                    }
                    $('#mobileList').fadeOut();
                }
            });
        });
    });

    // for search end
    // get constituency and designation on electiontype start

    $(function () {
        $('#electiontype-dropdown').on('change', function () {
            var election_type_id = this.value;
            $("#constituency-dropdown").html('');
            $("#designation-dropdown").html('');
            $.ajax({
                url: "{{ route('get.constituency.by.electiontype') }}",
                type: "POST",
                data: {
                    election_type_id: election_type_id,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#constituency-dropdown').html('');
                    $.each(result.data.constituency, function (key, value) {

                        $("#constituency-dropdown").append('<option value="' + value
                            .constituency.id + '">' + value.constituency.name +
                            '</option>');
                    });

                    $('#designation-dropdown').html(
                        '<option value="">Select designation</option>');
                    $.each(result.datas.designation, function (keys, values) {

                        $("#designation-dropdown").append('<option value="' + values
                            .designation.id + '">' + values.designation.name +
                            '</option>');
                    });

                }
            });
        });
    });

    function RemoveAllCountry2() {
        var cou2 = $('#btn_rem').attr('isSelected');
        $(this).attr('isSelected', 'no');
        $('#constituency-dropdown').find('option').prop("selected", "");
        $('#constituency-dropdown').find('option').trigger("change");
    }

    function SelectAllCountry2() {
        var cou2 = $('#btn_sel').attr('isSelected');
        if (cou2 == 'no') {
            $(this).attr('isSelected', 'yes');
            $('#constituency-dropdown').find('option').prop("selected", "selected");
            $('#constituency-dropdown').find('option').trigger("change");
            $('#constituency-dropdown').find('option').on('click');
        } else {
            $(this).attr('isSelected', 'no');
            $('#constituency-dropdown').find('option').prop("selected", "");
            $('#constituency-dropdown').find('option').trigger("change");
        }
    }
</script>
<!-- get constituency and designation on electiontype end  -->
@endsection