<form method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
    @if($contactList ?? ''  && $contactList->id)
        @method('PUT')
    @endif
    @csrf
    <div class="modal-header">
        <h1 class="modal-title fs-6" id="exampleModalLabel"> <i class="fal fa-user me-1"></i> {{$head ?? ''}} </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <div class="modal-form">
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group mb-3">
                        <div class="avatar-upload">
                            <div class="avatar-preview">
                                <div id="imagePreview" style="background-image: url({{asset($contactList->image ?? 'assets/admin/images/avatar.png')}});">
                                </div>
                            </div>
                            <div class="avatar-edit">
                                <input type='file' name="image" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                <label for="imageUpload">
                                    <i class="fal fa-upload me-2"></i> {{ __('contact_lists.image') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                @foreach($languages as $language)
                        <div class="form-group mb-3">
                            <label for="" class="d-block mb-2"> {{ __('contact_lists.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                            <input type="text" name="title_{{ $language->local }}" class="form-control" value="{{  $contactList[$language->local]->title ?? "" }}" placeholder=" {{ __('contact_lists.title') }}">
                        </div>
                        <div class="form-group mb-3">
                            <label for="" class="d-block mb-2"> {{ __('contact_lists.address') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                            <input type="text" name="address_{{ $language->local }}" class="form-control" value="{{  $contactList[$language->local]->address ?? "" }}" placeholder=" {{ __('contact_lists.address') }}">
                        </div>
                @endforeach
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.email') }} </label>
                    <input type="email" name="email" class="form-control" value="{{$contactList->email ?? ''}}" placeholder="example@gmail.com">
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.gender') }} </label>
                    <select name="gender" id="" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($genders as $row)
                            <option {{ ($contactList->gender ?? '' ) == $row ? 'selected' : '' }} value="{{ $row }}"> {{ __('contact_lists.genders.'.$row) }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.is_top_customer') }} </label>
                    <select name="is_top_customer" id="" class="form-control form-select">
                        <option {{ ($contactList->is_top_customer ?? '' ) == 0 ? 'selected' : '' }} value="0"> {{ __('contact_lists.no') }} </option>
                        <option {{ ($contactList->is_top_customer ?? '' ) == 1 ? 'selected' : '' }} value="1"> {{ __('contact_lists.yes') }} </option>
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.status') }} </label>
                    <select name="status" id="" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($statuses as $row)
                            <option {{ ($contactList->status ?? '' ) == $row ? 'selected' : '' }} value="{{ $row }}"> {{ __('contact_lists.statuses.'.$row) }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.employee_id') }} </label>
                    <select name="employee_id" id="" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($employees as $row)
                            <option {{ ($contactList->employee_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->name }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.country_id') }} </label>
                    <select name="country_id" id="" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($countries as $row)
                            <option {{ ($contactList->country_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->title }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.company_id') }} </label>
                    <select onchange="fetchCompany(this)" name="company_id" id="company_id" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($companies as $row)
                            <option {{ ($contactList->company_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->title }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12" id="sectors">

                </div>
                
                <div class="col-6">
                    <div class="form-group mb-3">
                        <label for="" class="d-block mb-2"> {{ __('contact_lists.budget') }} </label>
                        <input type="number" step=".01" onkeyup="fetchBudget()" id="budget" name="budget" class="form-control" value="{{$contactList->budget ?? ''}}" placeholder="{{ __('contact_lists.budget') }}">
                    </div>
                </div>
                <div class="col-6" id="categories">

                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.avg_stand_annual') }} </label>
                    <input type="number" step=".01" name="avg_stand_annual" class="form-control" value="{{$contactList->avg_stand_annual ?? ''}}" placeholder="{{ __('contact_lists.avg_stand_annual') }}">
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.avg_events_annual') }} </label>
                    <input type="number" step=".01" name="avg_events_annual" class="form-control" value="{{$contactList->avg_events_annual ?? ''}}" placeholder="{{ __('contact_lists.avg_events_annual') }}">
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.company_website') }} </label>
                    <input type="url" name="company_website" class="form-control" value="{{$contactList->company_website ?? ''}}" placeholder="{{ __('contact_lists.company_website') }}">
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.role') }} </label>
                    <input type="text" name="role" class="form-control" value="{{$contactList->role ?? ''}}" placeholder="{{ __('contact_lists.role') }}">
                </div>

                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('contact_lists.note') }} </label>
                    <textarea type="text" name="note" class="form-control" placeholder="{{ __('contact_lists.note') }}">{{$contactList->note ?? ''}}</textarea>
                </div>

                <div class="form-group mb-3 items" >
                    <h4>{{ __('contact_lists.phones') }}</h4>
                </div>
                <div class="form-group mb-3 items" id="phones">
                    @foreach($phones as $key => $phone)
                        @include('employee.contact_lists.phones.index',['phone'=>$phone,'key'=>$key])
                    @endforeach
                </div>
                <div class="form-group mb-3 items">
                    <a style="cursor: pointer;" data-id="{{count($phones)}}" onclick="addphone(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>{{__("contact_lists.add_phone")}}</a>
                </div>

            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="line-butn butn-st2 butn-md" data-bs-dismiss="modal" aria-label="Close"><span> {{ __('dashboard.cancel') }} </span></button>
        <button type="submit" class="blue-butn butn-st2 butn-md"><span> {{ __('dashboard.save') }} </span></button>
    </div>
</form>

<script src="{{url('')}}/assets/admin/js/custom/imageUpload.js"></script>

<script>

    function addphone(elem)
    {
        var num = $(elem).attr('data-id');
        var newrow = parseInt(num)+1;
        $(elem).attr('data-id', newrow);

        $.ajax({
            url : "{{ route('employee.add.phone') }}",
            type : 'GET',
            data : 'key='+num,
            success:function(data)
            {
                $('#phones').append(data);
            }
        })
    }


    function remove(elem)
    {
        $(elem).closest('.row').remove();
    }
    function fetchCompany()
    {
        let company_id = $('#company_id').val()
            $.ajax({
                url : "{{route('employee.fetch.company.sector')}}",
                type : 'GET',
                data : 'company_id='+company_id,
                success:function(data)
                {
                    $('#sectors').html(data);
                }
            })
    }
    $('#company_id').trigger('change');

    function fetchBudget()
    {
        let budget = $('#budget').val();
        if(budget)
        {
            $.ajax({
                url : "{{route('employee.fetch.budget')}}",
                type : 'GET',
                data : 'budget='+budget,
                success:function(data)
                {
                    $('#categories').html(data);
                }
            })
        }
        else
        {
            $('#categories').html('')
        }
    }
    $('#budget').trigger('keyup');
    function saveForm(elem)
    {
        event.preventDefault();
        $('.butn').attr('disabled','disabled');
        var action = $(elem).attr('action');
        $('.is-invalid').removeClass('is-invalid');
        let dataform = new FormData( $(elem)[0]);
        $.ajax
        ({
            url : action,
            type: 'POST',
            data: dataform,
            dataType:'json',
            contentType: false,
            processData: false,
            success:function(data)
            {
                $(elem).find(':submit').removeAttr('disabled');
                if(data.hasOwnProperty('errors'))
                {
                    $.each(data.errors, function(key,value)
                    {
                        if (key.indexOf('.') == 0)
                        {
                            $('input[name='+key+']').addClass('is-invalid');
                            $('select[name='+key+']').addClass('is-invalid');
                            $('textarea[name='+key+']').addClass('is-invalid');
                        }
                        else
                        {
                            var keys = key.replaceAll(".","_");

                            $('#'+keys).addClass('is-invalid');
                        }
                    });
                }
                else
                {
                    if('data' in data)
                    {
                        let status = data.data.status
                        if(status == 'question')
                        {
                            $('#modal-data').modal('hide')
                            setTimeout(
                                function()
                                {
                                    $('.modal-backdrop').remove();
                                }, 100);

                            $('#modal-check').modal('show')
                        }
                        else
                        {
                            toasterSuccess(data.message);
                            setTimeout(
                                function()
                                {
                                    window.location.href = data.data.url
                                }, 1000);
                        }
                    }
                    else
                    {
                        if (data.responseJSON) {
                            errors = data.responseJSON
                            toasterError(Object.values(errors.errors)[0]);
                        }
                        else
                        {
                            errors = JSON.parse(data.responseText)
                            toasterError(Object.values(errors.errors)[0][0]);
                        }
                    }
                }
            }
            ,error:function(data)
            {
                var errors = {}
                if (data.responseJSON) {
                    errors = data.responseJSON
                    toasterError(Object.values(errors.errors)[0]);
                }
                else
                {
                    errors = JSON.parse(data.responseText)
                    toasterError(Object.values(errors.errors)[0][0]);
                }
                $('.butn').removeAttr('disabled','disabled');

            }
        })
    }

</script>
