@extends('layouts.app')
@section('title', ___('Customers'))

@push('css')
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ ___('Customers') }}
                </div>
                <h2 class="page-title">
                    {{ @$edit ? ___("Edit Customer") : ___("Add Customer") }}
                </h2>
            </div>
        </div>
    </div>

    <form id="customerForm" action="{{ @$edit ? route('panel.customers.update', $module->id) : route('panel.customers.add') }}" method="post">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">

                        <div class="row">
                            {{--<div class="col-md-4 mb">
                                <label class="form-label">{{ ___('Title') }}</label>
                                <select name="title" id="title" class="form-control" required>
                                    <option value=""></option>
                                    @foreach(\App\Customer::Titles as $title)
                                        <option {{ $module->title == $title ? 'selected' : '' }} value="{{ $title }}">{{ $title }}</option>
                                    @endforeach
                                </select>
                            </div>--}}
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ ___('Customer Name') }}</label>
                                <input name="name" class="form-control" value="{{ $module->name }}" placeholder="{{ ___('Customer Name') }}" required>
                            </div>
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ ___('Company Name') }}</label>
                                <input name="company" class="form-control" value="{{ $module->company }}" placeholder="{{ ___('Company Name') }}">
                            </div>
                            {{--<div class="col-md-4 mb">
                                <label class="form-label">{{ ___('First Name') }}</label>
                                <input name="first_name" class="form-control" value="{{ $module->first_name }}" placeholder="{{ ___('First Name') }}">
                            </div>
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ ___('Middle Name') }}</label>
                                <input name="middle_name" class="form-control" value="{{ $module->middle_name }}" placeholder="{{ ___('Middle Name') }}">
                            </div>
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ ___('Last Name') }}</label>
                                <input name="last_name" class="form-control" value="{{ $module->last_name }}" placeholder="{{ ___('Last Name') }}">
                            </div>--}}
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ ___('Phone 1') }}</label>
                                <input id="phone_1" name="phone_1" class="form-control" value="{{ $module->phone_1 }}" placeholder="{{ ___('Phone 1') }}">
                            </div>
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ ___('Phone 2') }}</label>
                                <input id="phone_2"  name="phone_2" class="form-control" value="{{ $module->phone_2 }}" placeholder="{{ ___('Phone 2') }}">
                            </div>
{{--                            <div class="col-md-4 mb">--}}
{{--                                <label class="form-label">{{ ___('Fax') }}</label>--}}
{{--                                <input name="fax" class="form-control" value="{{ $module->fax }}" placeholder="{{ ___('Fax') }}">--}}
{{--                            </div>--}}
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ ___('Website') }}</label>
                                <input name="website" class="form-control" value="{{ $module->website }}" placeholder="{{ ___('Website') }}">
                            </div>
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ ___('Email') }}</label>
                                <input name="email" class="form-control" value="{{ $module->email }}" placeholder="{{ ___('Email') }}">
                            </div>

                            {{--<div class="col-md-6 mb">
                                <h3 class="">{{ __('Target Keywords') }}</h3>
                                <input type="text" name="targeted_keywords" id="targeted_keywords" class="form-control inputTags" placeholder="Target Keywords" value="{{ $module->targeted_keywords }}">
                            </div>
                            <div class="col-md-6 mb">
                                <h3 class="">{{ __('Target Radius Mile') }}</h3>
                                <input type="text" name="targeted_radius" class="form-control" placeholder="Target Radius Mile" value="{{ $module->targeted_radius }}">
                            </div>
                            <div class="col-md-12 mb">
                                <h3 class="">{{ __('Yelp Profile Link') }}</h3>
                                <input type="url" name="yelp_profile" class="form-control" placeholder="Yelp Profile Link" value="{{ $module->yelp_profile }}">
                            </div>--}}
                            <div class="col-md-12 mb">
                                <h3 class=" required">{{ __('Additional Notes / Description') }}</h3>
                                <textarea name="description" id="description" rows="4" class="form-control" placeholder="Enter Additional Notes / Description">{{ $module->description }}</textarea>
                            </div>

                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12 mb">
                                <label class="form-label">{{ ___('Address') }}</label>
                                <textarea name="address" class="form-control" rows="4" placeholder="{{ __('Address') }}">{{ $module->address }}</textarea>
                            </div>
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ ___('City') }}</label>
                                <input name="city" class="form-control" value="{{ $module->city }}" placeholder="{{ __('City') }}">
                            </div>
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ ___('State') }}</label>
                                <input name="state" class="form-control" value="{{ $module->state }}" placeholder="{{ __('State') }}">
                            </div>
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ ___('Zip') }}</label>
                                <input name="zip" class="form-control" value="{{ $module->zip }}" placeholder="{{ __('Zip') }}">
                            </div>
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ ___('Country') }}</label>
                                <input name="country" class="form-control" value="{{ $module->country }}" placeholder="{{ __('Country') }}">
                            </div>

                            @if(!@$edit)
                            <div class="col-md-6 b-3">
                                <label class="form-label">{{ __('Status') }}</label>
                                <select name="status" id="status" class="form-select">
                                    @foreach(\App\Customer::StatusColors as $status => $color)
                                        <option value="{{ $status }}">{{ $status }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <a href="{{ route('panel.customers')}}" class="btn btn-danger">{{ __('Cancel') }}</a>
                <button type="submit" class="btn btn-primary submission">{{ __('Submit') }}</button>
            </div>
        </div>
    </form>


@stop

@push('script')

    <script !src="">
        $('.inputTags').selectize({
            delimiter: ',',
            persist: false,
            create: function(input) {
                return {
                    value: input,
                    text: input
                }
            }
        });

        {{--$('#title').selectize({--}}
        {{--    placeholder: '{{ ___('Select Title') }}'--}}
        {{--});--}}

        $('#customerForm').submit(function (e) {
            let form = this;
            e.preventDefault();
            $(form).find('.submission').btnloading();

            $.confirm({
                title: "Are you sure?",
                content: "You won't be able to revert this!",
                type: 'red',
                buttons: {
                    close: function () {
                        $(form).find('.submission').btnreset();
                    },
                    Proceed: {
                        text: 'Proceed',
                        btnClass: 'btn-danger',
                        action: function(){
                            formHandler({form, e, params: { moduleID: '{{ $module->id }}'} }).then(function (r) {
                                notify('success', r.data.message);
                                $('#commandModal').modal('hide');

                                setTimeout(function(){
                                    window.location = '{{ route('panel.customers') }}';
                                }, 1000);

                            }).catch(function (e) {
                                notify('error', e.response.data.message);
                            }).then(function () {
                                $(form).find('.submission').btnreset();
                            })
                        }
                    }
                }
            });
        });

        //format phone for second phone by id

      function formatPhoneNumber(value) {
        if (!value) return value;
        const phoneNumber = value.replace(/[^\d]/g, '');
        const phoneNumberLength = phoneNumber.length;
        if (phoneNumberLength < 4) return phoneNumber;
        if (phoneNumberLength < 7) {
          return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
        }
        return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
          3,
          6
        )}-${phoneNumber.slice(6, 9)}`;
      }

      
      $('#phone_1').keydown(function(){
        const inputField = document.getElementById('phone_1');
        const formattedInputValue = formatPhoneNumber(inputField.value);
        inputField.value = formattedInputValue;
    });

       //format phone for second phone by id

      function formatPhoneNumber2(value) {
        if (!value) return value;
        const phoneNumber = value.replace(/[^\d]/g, '');
        const phoneNumberLength = phoneNumber.length;
        if (phoneNumberLength < 4) return phoneNumber;
        if (phoneNumberLength < 7) {
          return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
        }
        return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
          3,
          6
        )}-${phoneNumber.slice(6, 9)}`;
      }

      
      $('#phone_2').keydown(function(){
        const inputField = document.getElementById('phone_2');
        const formattedInputValue = formatPhoneNumber2(inputField.value);
        inputField.value = formattedInputValue;
    });
    </script>

@endpush