@extends('admin.layouts.main')

@section('title')
Employee - Payroll
@endsection

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

        @include("admin.common.sidebar")

        <div class="right-sec">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @if(Session::get('panel') == 'payroll-admin')
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('payroll.employees') }}</li>
                    @else
                        <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('company.directory') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <a href="{{ route('admin.companies.indexpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('company.company') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('admin.companies.detail',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('candidate.detail') }}</a> </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('payroll.employee') }}</li>
                    @endif
                </ol>
            </nav>

            <div class="form-sec">

                @include('payroll::employee_payroll.modules.store.common.form-step')

                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-8 offset-lg-1">
                            <div class="step-box">
                                <form method="POST" id="employeeContactDetails" action="{{ route('admin.payroll.storeContactDetails',['panel' => Session::get('panel')]) }}">

                                    @csrf
                                    <input name="user_id" id="user_id" value="{{$user_id}}" type="hidden">
                                    <input name="type_of_address" id="type_of_address" value="home" type="hidden">
                                    <input name="company_id" id="company_id" value="{{$id}}" type="hidden">
                                    <input type="hidden" name="edit" value="@if(isset($edit) && $edit == true) {{$edit ?? ''}} @endif" />

                                    <input type="hidden" id="get_country_id" name="get_country_id" class="form-control" value="@if(isset($employeeContactDetails)){{ $employeeContactDetails->country_id }}@endif" placeholder="{{ @trans('payroll.address_2') }}">
                                    <input type="hidden" id="get_state_id" name="get_state_id" class="form-control" value="@if(isset($employeeContactDetails)){{ $employeeContactDetails->state_id }}@endif" placeholder="{{ @trans('payroll.address_2') }}">
                                    <input type="hidden" id="get_city_id" name="get_city_id" class="form-control" value="@if(isset($employeeContactDetails)){{ $employeeContactDetails->city_id }}@endif" placeholder="{{ @trans('payroll.address_2') }}">
                                    <div class="tab">
                                        <h2 class="form-sec-title">{{ @trans('payroll.address') }}</h2>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.address_1') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="address1" name="address1" class="form-control" value="@if(isset($employeeContactDetails)){{ $employeeContactDetails->address1 }}@endif" placeholder="{{ @trans('payroll.address_1') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.address_2') }}<span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="address2" name="address2" class="form-control" value="@if(isset($employeeContactDetails)){{ $employeeContactDetails->address2 }}@endif" placeholder="{{ @trans('payroll.address_2') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label" for="country">{{ @trans('payroll.country') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select class="form-control" id="country" name="country_id">
                                                        <option value="" hidden="">{{ @trans('payroll.select_country') }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label" for="state">{{ @trans('payroll.state') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select class="form-control" id="state" name="state_id">
                                                        <option value="" hidden="">{{ @trans('payroll.select_state') }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label" for="city">{{ @trans('payroll.city') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select class="form-control" id="city" name="city_id">
                                                        <option value="" hidden="">{{ @trans('payroll.select_city') }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.zipcode') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" class="form-control" id="zip_code" name="zip_code" value="@if(isset($employeeContactDetails)){{ $employeeContactDetails->zip_code }}@endif" placeholder="{{ @trans('payroll.zipcode') }}" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class=" tab-btn">

                                            @if (isset($edit) && $edit == true)
                                                @if(Session::get('panel') == 'payroll-admin')
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('payrollAdmin.employees.index',['panel' => Session::get('panel'), 'id' => $user_id, 'type' => 'details']) }}">{{ @trans('project::project.cancel') }}</a>
                                                    </div>
                                                @else
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.tabs',['panel' => Session::get('panel'), 'id' => $id,'user_id' => $user_id, 'type' => 'detail']) }}">{{ @trans('project::project.cancel') }}</a>
                                                    </div>
                                                @endif

                                                <div style="float:right;">
                                                    <button type="submit" id="employeeContactBtn" class="btn step-btn employeeContactBtn">{{ @trans('project::project.save') }}</button>
                                                </div>
                                            @else
                                                @if(Session::get('panel') == 'payroll-admin')
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.admin.employee.personal_details',['panel' => Session::get('panel'), 'id' => $id, 'user_id' => $user_id]) }}">{{ @trans('project::project.prev') }}</a>
                                                    </div>
                                                    <div style="float:right;">
                                                        <button type="submit" id="employeeContactBtn" class="btn step-btn employeeContactBtn">{{ @trans('project::project.save_next') }}</button>
                                                    </div>
                                                @else
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.employee.personal_details',['panel' => Session::get('panel'), 'id' => $id, 'user_id' => $user_id]) }}">{{ @trans('project::project.prev') }}</a>
                                                    </div>
                                                    <div style="float:right;">
                                                        <button type="submit" id="employeeContactBtn" class="btn step-btn employeeContactBtn">{{ @trans('project::project.save_next') }}</button>
                                                    </div>
                                                @endif
                                            @endif
                                        </div>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@push('pageJs')
{!! JsValidator::formRequest('Modules\Payroll\Http\Requests\StoreEmployeeContactRequest', '#employeeContactDetails') !!}

<script src="{{ asset('js/vendor/select2.customSelectionAdapter.js') }}"></script>
<script src="{{ asset('js/vendor/jquery.alphanum.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $(".numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 2,
            allowThouSep: false,
            min: 1,
            max: 30
        })
        $(".age-numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 3,
            allowThouSep: false,
            min: 1,
            max: 100
        })
        $('#project_importance').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 10
        });
        $('#actualization').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 100
        });

        $('#country').on('change', function() {
            // Your code to handle the change event goes here
            $('#state').empty();
            var selectedValue = $(this).val();
            state(selectedValue);
        });

        $('#state').on('change', function() {
            console.log('hello on change');
            // Your code to handle the change event goes here
            $('#city').empty();
            var selectedValue = $(this).val();
            city(selectedValue);
        });

        country()

        if ($('#get_country_id').val() != "") {
            state($('#get_country_id').val())
        }

        if ($('#get_state_id').val() != "") {
            city($('#get_state_id').val())
        }


        function country() {

            var company_id = $('#company_id').val();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                url: '{{ route("admin.payroll.country", ["panel" => session("panel")]) }}',
                method: 'GET',
                data: {},
                success: function($response) {
                    // Handle the response from the server

                    // Append new HTML content to the element with ID 'container'

                    $.each($response.data, function(index, item) {
                        $('#country').append('<option value="' + item.id + '">' + item.name + '</option>')
                    });

                    const country = $('#get_country_id').val()

                    $('#country').val(country)

                },
                error: function(xhr, status, error) {}
            });
        }

        function state(country_id) {

            var company_id = $('#company_id').val();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                url: '{{ route("admin.payroll.state", ["panel" => session("panel")]) }}',
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: {
                    'country_id': country_id
                },
                success: function($response) {
                    // Handle the response from the server
                    console.log();

                    $('#state').empty();

                    // Append new HTML content to the element with ID 'container'
                    $('#state').append('<option value="" hidden="">Select State</option>')
                    $.each($response.data, function(index, item) {
                        $('#state').append('<option value="' + item.id + '">' + item.name + '</option>')
                    });

                    const state = $('#get_state_id').val()
                    $('#state').val(state)

                    if ($('#get_city_id').val() == "") {
                        city($response.data[0].id)
                    }

                },
                error: function(xhr, status, error) {}
            });
        }

        function city(state_id) {

            var company_id = $('#company_id').val();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                url: '{{ route("admin.payroll.city", ["panel" => session("panel")]) }}',
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: {
                    'state_id': state_id
                },
                success: function($response) {
                    // Handle the response from the server
                    $('#city').empty();

                    // Append new HTML content to the element with ID 'container'
                    $('#city').append('<option value="" hidden="">Select City</option>')
                    $.each($response.data, function(index, item) {
                        $('#city').append('<option value="' + item.id + '">' + item.name + '</option>')
                    });

                    const city = $('#get_city_id').val()
                    $('#city').val(city)
                },
                error: function(xhr, status, error) {}
            });
        }

    });

    $(document).on('click', '.employeeContactBtn', function(e) {
        if ($('#employeeContactDetails').valid()) {
            $('.employeeContactBtn').text('Please wait...');
            $('.employeeContactBtn').attr('disabled', 'disabled');
            $('#employeeContactDetails').submit();
        }
    });
</script>
@endpush

@push('pageCss')
<link rel="stylesheet" href="{{ asset('css/vendor/select2.customSelectionAdapter.css') }}">
<link rel="stylesheet" href="{{ asset('css/admin/project/store.css') }}">
{{--<script src="{{ mix('js/employees.js') }}"></script>--}}
@endpush