@extends('layouts.app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle)</h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">@lang('app.menu.home')</a></li>
                <li><a href="{{ route('clients.index') }}">@lang($pageTitle)</a></li>
                <li class="active">@lang('app.addNew')</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/summernote/dist/summernote.css') }}">
    <style>
        .salutation .form-control {
            padding: 2px 2px;
        }
    </style>
@endpush

@section('content')

{!! $smtpSetting->set_smtp_message !!}
<div class="dash_panel">
    <div class="customCard">
        <div class="panel-heading"> @lang('modules.client.createTitle')</div>
        <div class="panel-wrapper collapse in" aria-expanded="true">
            <div class="panel-body">
                <form id="createClient" class="ajax-form" method="POST" autocomplete="off">
                    @csrf
                @if(isset($leadDetail->id))
                    <input type="hidden" name="lead" value="{{ $leadDetail->id }}">
                @endif
                    <div class="form-body">
                    <h4 class="p-t-15 fw-medium">@lang('modules.client.clientBasicDetails')</h4>
                        <hr>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="d-flex gap-2">
                                    <div class="form-group w-25">
                                        <label class="required">Title</label> 
                                        <select name="salutation" id="salutation" class="form-control">
                                            <option value="">--</option>
                                            <option value="mr">@lang('app.mr')</option>
                                            <option value="ms">@lang('app.ms')</option>
                                        </select>
                                    </div>
                                
                                    <div class="form-group w-100">
                                        <label class="required">@lang('modules.client.clientName')</label>
                                        <input type="text" name="name" id="name"
                                            value="{{ $leadDetail->client_name ?? '' }}" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>@lang('modules.client.clientEmail')</label>
                                    <input style="opacity: 0;position: absolute;">
                                    <input type="email" name="email" readonly="readonly"
                                        onfocus="this.removeAttribute('readonly');" id="email"
                                        value="{{ $leadDetail->client_email ?? '' }}"
                                        class="form-control auto-complete-off">
                                    <span class="help-block">@lang('modules.client.emailNote')</span>
                                </div>
                            </div>
                            <!--/span-->


                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>@lang('modules.client.password')</label>
                                    <input type="password" style="opacity: 0;position: absolute;">
                                    <input type="password" name="password" id="password" autocomplete="off"
                                        class="form-control">
                                    <span class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    <span class="help-block"> @lang('modules.client.passwordNote')</span>
                                </div>
                                <div class="form-group">
                                    <div class="checkbox themeCheckbox">
                                        <input id="random_password" name="random_password" value="true"
                                            type="checkbox">
                                        <label for="random_password" class="text-info box_check">@lang('modules.client.generateRandomPassword')</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4 ">
                                    <div class="d-flex">
                                        <div>
                                            <label>@lang('app.mobile')</label>
                                            <div class="form-group">
                                                <select class="select2 form-control phone_country_code" name="phone_code">
                                                    @foreach ($countries as $item)
                                                        <option value="{{ $item->id }}">
                                                            +{{ $item->phonecode . ' (' . $item->iso . ')' }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                
                                        <div class="w-100">
                                            <label>@lang('app.mobile')</label>
                                            <div class="form-group">
                                                <input type="tel" name="mobile" id="mobile" class="form-control"
                                                    autocomplete="nope" value="{{ $leadDetail->mobile ?? '' }}">
                                            </div>
                                        </div>
                                    </div>
                            </div>

                            <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">@lang('modules.client.clientCategory')
                                            <a href="javascript:;" id="addClientCategory" class="text-info"><i
                                                    class="ti-settings text-info"></i> </a>
                                        </label>
                                        <select class="select2 form-control" data-placeholder="@lang('modules.client.clientCategory')"
                                            id="category_id" name="category_id">
                                            <option value="">@lang('messages.pleaseSelectCategory')</option>
                                            @forelse($categories as $category)
                                                <option value="{{ $category->id }}">
                                                    {{ ucwords($category->category_name) }}</option>
                                            @empty
                                                <option value="">@lang('messages.noCategoryAdded')</option>
                                            @endforelse

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

                            <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="">@lang('modules.client.clientSubCategory')
                                            <a href="javascript:;" id="addClientSubCategory" class="text-info"><i
                                                    class="ti-settings text-info"></i> </a>
                                        </label>
                                        <select class="select2 form-control" data-placeholder="@lang('modules.client.clientSubCategory')"
                                            id="sub_category_id" name="sub_category_id">
                                            <option value="" id="defaultSubcategoryText">@lang('messages.selectSubCategory')</option>
                                            @forelse($subcategories as $subcategory)
                                                <option value="{{ $subcategory->id }}">
                                                    {{ ucwords($subcategory->category_name) }}</option>
                                            @empty
                                                <option value="">@lang('messages.noCategoryAdded')</option>
                                            @endforelse

                                        </select>
                                    </div>
                            </div>
                        </div>
                        <h4 class="p-t-15 fw-medium">@lang('modules.client.clientOtherDetails')</h4>
                        <hr>
                        <div class="row">

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Skype</label>
                                    <input type="text" name="skype" id="skype"
                                        class="form-control">
                                </div>
                            </div>
                            <!--/span-->

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Linkedin</label>
                                    <input type="text" name="linkedin" id="linkedin"
                                        class="form-control">
                                </div>
                            </div>
                            <!--/span-->

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Twitter</label>
                                    <input type="text" name="twitter" id="twitter"
                                        class="form-control">
                                </div>
                            </div>
                            <!--/span-->

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Facebook</label>
                                    <input type="text" name="facebook" id="facebook"
                                        class="form-control">
                                </div>
                            </div>
                            <!--/span-->

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="gst_number">@lang('app.gstNumber')</label>
                                    <input type="text" id="gst_number" name="gst_number"
                                        class="form-control" value="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>@lang('app.login')</label>
                                    <select name="login" id="login" class="form-control">
                                        <option value="enable">@lang('app.enable')</option>
                                        <option value="disable">@lang('app.disable')</option>
                                    </select>
                                </div>
                            </div>
                
                            <!-- <div class="col-md-3">
                                <div class="form-group">
                                    <div class="m-b-10">
                                        <label class="control-label">@lang('modules.client.sendCredentials')</label>
                                        <a class="mytooltip" href="javascript:void(0)"> <i
                                                class="fa fa-info-circle"></i><span
                                                class="tooltip-content5"><span class="tooltip-text3"><span
                                                        class="tooltip-inner2">@lang('modules.client.sendCredentialsMessage')</span></span></span></a>
                                    </div>
                                    <div class="radio radio-inline">
                                        <input type="radio" checked name="sendMail" id="sendMail1"
                                            value="yes">
                                        <label for="sendMail1" class="">
                                            @lang('app.yes') </label>

                                    </div>
                                    <div class="radio radio-inline ">
                                        <input type="radio" name="sendMail" id="sendMail2" value="no">
                                        <label for="sendMail2" class="">
                                            @lang('app.no') </label>
                                    </div>
                                </div>
                            </div> -->
                            <!-- <div class="col-md-3">
                                <div class="form-group">
                                    <div class="m-b-10">
                                        <label class="control-label">@lang('modules.emailSettings.emailNotifications')</label>
                                    </div>
                                    <div class="radio radio-inline">
                                        <input type="radio" checked name="email_notifications"
                                            id="email_notifications1" value="1">
                                        <label for="email_notifications1" class="">
                                            @lang('app.enable') </label>

                                    </div>
                                    <div class="radio radio-inline ">
                                        <input type="radio" name="email_notifications"
                                            id="email_notifications2" value="0">
                                        <label for="email_notifications2" class="">
                                            @lang('app.disable') </label>
                                    </div>
                                </div>
                            </div>
                            </div> -->
                            <!--/row-->

                        
                            @if (isset($fields))
                                @foreach ($fields as $field)
                                    <div class="col-md-4">
                                        <label>{{ ucfirst($field->label) }}</label>
                                        <div class="form-group">
                                            @if ($field->type == 'text')
                                                <input type="text"
                                                    name="custom_fields_data[{{ $field->name . '_' . $field->id }}]"
                                                    class="form-control" placeholder="{{ $field->label }}"
                                                    value="{{ $editUser->custom_fields_data['field_' . $field->id] ?? '' }}">
                                            @elseif($field->type == 'password')
                                                <input type="password"
                                                    name="custom_fields_data[{{ $field->name . '_' . $field->id }}]"
                                                    class="form-control" placeholder="{{ $field->label }}"
                                                    value="{{ $editUser->custom_fields_data['field_' . $field->id] ?? '' }}">
                                            @elseif($field->type == 'number')
                                                <input type="number"
                                                    name="custom_fields_data[{{ $field->name . '_' . $field->id }}]"
                                                    class="form-control" placeholder="{{ $field->label }}"
                                                    value="{{ $editUser->custom_fields_data['field_' . $field->id] ?? '' }}">
                                            @elseif($field->type == 'textarea')
                                                <textarea name="custom_fields_data[{{ $field->name . '_' . $field->id }}]" class="form-control"
                                                    id="{{ $field->name }}" cols="3">{{ $editUser->custom_fields_data['field_' . $field->id] ?? '' }}</textarea>
                                            @elseif($field->type == 'radio')
                                                <div class="radio-list">
                                                    @foreach ($field->values as $key => $value)
                                                        <label
                                                            class="radio-inline @if ($key == 0) p-0 @endif">
                                                            <div class="radio radio-info">
                                                                <input type="radio"
                                                                    name="custom_fields_data[{{ $field->name . '_' . $field->id }}]"
                                                                    id="optionsRadios{{ $key . $field->id }}"
                                                                    value="{{ $value }}"
                                                                    @if (isset($clientDetail) && $clientDetail->custom_fields_data['field_' . $field->id] == $value) checked @elseif($key == 0) checked @endif>>
                                                                <label
                                                                    for="optionsRadios{{ $key . $field->id }}">{{ $value }}</label>
                                                            </div>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            @elseif($field->type == 'select')
                                                <select class="form-control gender"
                                                    name="custom_fields_data[field_{{ $field->id }}]">
                                                    @foreach ($field->values as $value)
                                                        <option value="{{ $value }}"
                                                            @if (isset($editUser) && $editUser->custom_fields_data['field_{{ $field->id }}'] == $value) selected @endif>
                                                            {{ $value }}</option>
                                                    @endforeach
                                                </select>
                                            @elseif($field->type == 'checkbox')
                                                <div class="mt-checkbox-inline">
                                                    @foreach ($field->values as $key => $value)
                                                        <label class="mt-checkbox mt-checkbox-outline">
                                                            <input
                                                                name="custom_fields_data[{{ $field->name . '_' . $field->id }}][]"
                                                                type="checkbox" value="{{ $key }}">
                                                            {{ $value }}
                                                            <span></span>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            @elseif($field->type == 'date')
                                                <input type="text"
                                                    class="form-control form-control-inline date-picker"
                                                    size="16"
                                                    name="custom_fields_data[{{ $field->name . '_' . $field->id }}]"
                                                    value="{{ isset($editUser->dob) ? Carbon\Carbon::parse($editUser->dob)->format('Y-m-d') : Carbon\Carbon::now()->format('m/d/Y') }}">
                                            @endif
                                            <div class="form-control-focus"> </div>
                                            <span class="help-block"></span>

                                        </div>
                                    </div>
                                @endforeach
                            @endif
                
                            <div class="col-md-12">
                                <label>@lang('app.shippingAddress')</label>
                                <div class="form-group">
                                    <textarea name="shipping_address" id="shipping_address" class="form-control" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <label>@lang('app.note')</label>
                                <div class="form-group">
                                    <textarea name="note" id="note" class="form-control summernote" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        <h4 class="p-t-15 fw-medium">@lang('modules.client.companyDetails')</h4>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">@lang('modules.client.companyName')</label>
                                    <input type="text" id="company_name" name="company_name"
                                        value="{{ $leadDetail->company_name ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">@lang('modules.client.website')</label>
                                    <input type="text" id="website" name="website"
                                        value="{{ $leadDetail->website ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <!--/span-->
                    
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">@lang('app.address')</label>
                                    <textarea name="address" id="address" rows="3" value="{{ $leadDetail->address ?? '' }}" class="form-control"></textarea>
                                </div>
                            </div>
                            <!--/span-->

                            <div class="col-md-3 ">
                                <div class="form-group">
                                    <label>@lang('modules.client.officePhoneNumber')</label>
                                    <input type="tel" name="office" id="office"
                                        value="{{ $leadDetail->office ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3 ">
                                <div class="form-group">
                                    <label>@lang('modules.stripeCustomerAddress.city')</label>
                                    <input type="text" name="city" id="city"
                                        value="{{ $leadDetail->city ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3 ">
                                <div class="form-group">
                                    <label>@lang('modules.stripeCustomerAddress.state')</label>
                                    <input type="text" name="state" id="state"
                                        value="{{ $leadDetail->country ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3 ">
                                <div class="form-group">
                                    <label>@lang('modules.stripeCustomerAddress.postalCode')</label>
                                    <input type="text" name="postal_code" id="postalCode"
                                        value="{{ $leadDetail->postal_code ?? '' }}" class="form-control">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <div class="d-flex justify-content-start align-items-center gap-2 m-t-15">
                        <button type="submit" id="save-form" class="themeBtn"> @lang('app.save')</button>
                        <button type="reset" class="themeBtnOutline">@lang('app.reset')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    {{-- Ajax Modal --}}
    <div class="modal fade bs-modal-md in" id="clientCategoryModal" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn blue">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{-- Ajax Modal Ends --}}

@endsection

@push('footer-script')
    <script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/summernote/dist/summernote.min.js') }}"></script>


    <script>

        if($('#category_id').val()==0)
        {
            $('#sub_category_id').prop('disabled', true);
            $('#defaultSubcategoryText').text('Please select a category first');
            $('#sub_category_id').val('').trigger('change.select2');
        }

        var subCategories = @json($subcategories);
        $('#category_id').change(function(e) {
            // get projects of selected users
            if($(this).val()!='' && $(this).val()!=0)
            {
                var opts = '';

                var subCategory = subCategories.filter(function(item) {
                    return item.category_id == e.target.value
                });
                $('#sub_category_id').prop('disabled',false);
                subCategory.forEach(project => {
                    console.log(project);
                    opts += `<option value='${project.id}'>${project.category_name}</option>`
                })

                $('#sub_category_id').html('<option value="">Select Sub Category...</option>' + opts)
                $("#sub_category_id").select2({
                    formatNoMatches: function() {
                        return "{{ __('messages.noRecordFound') }}";
                    }
                });
            }
            else
            {
                $('#sub_category_id').prop('disabled', true);
                $('#sub_category_id option[value=""]').text('Please select a category first');
                $('#sub_category_id').val('').trigger('change.select2');
            }
        });
        $(".date-picker").datepicker({
            todayHighlight: true,
            autoclose: true
        });
        $(".select2").select2({
            formatNoMatches: function() {
                return "{{ __('messages.noRecordFound') }}";
            }
        });

        $('#save-form').click(function() {
            $.easyAjax({
                url: '{{ route('clients.store') }}',
                container: '#createClient',
                type: "POST",
                redirect: true,
                data: $('#createClient').serialize()
            })
        });

        $('#random_password').change(function() {
            var randPassword = $(this).is(":checked");

            if (randPassword) {
                // $('#password').val('{{ str_random(8) }}');
                $('#password').val(generateRandomPassword(8));
                $('#password').attr('readonly', 'readonly');
            } else {
                $('#password').val('');
                $('#password').removeAttr('readonly');
            }
        });

        // Function to generate a random password of specified length
        function generateRandomPassword(length) {
            var charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
            var password = "";
            for (var i = 0; i < length; i++) {
                var randomIndex = Math.floor(Math.random() * charset.length);
                password += charset.charAt(randomIndex);
            }
            return password;
        }

        $('.summernote').summernote({
            height: 200, // set editor height
            minHeight: null, // set minimum height of editor
            maxHeight: null, // set maximum height of editor
            focus: false,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough']],
                ['fontsize', ['fontsize']],
                ['para', ['ul', 'ol', 'paragraph']],
                ["view", ["fullscreen"]]
            ]
        });

        $('#addClientCategory').click(function() {
            var url = '{{ route('clientCategory.create') }}';
            $('#modelHeading').html('...');
            $.ajaxModal('#clientCategoryModal', url);
        })
        $('#addClientSubCategory').click(function() {
            var url = '{{ route('clientSubCategory.create') }}';
            $('#modelHeading').html('...');
            $.ajaxModal('#clientCategoryModal', url);
        })
    </script>
@endpush