@extends('admin.layout')
@section('content')
    @php
    $rtl = App\Language::where('code', App::getLocale())->first()->rtl == true ? 'rtl' : 'ltr';
    @endphp
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Customers') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Customers') }}</li>

                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <link rel="stylesheet" href="{{ url('./Panel/main-semidark/css/file_custom/customer_page_' . $rtl . '.css') }}">
    <section class="content">
        <div class="box" style="box-shadow: none !important;">
            <div class="box-body annually">
                <div class="row">
                    <div class="col-md-3" style="text-align: start;">
                        <h3 style="color: #fb753d">
                            {{ $customer->name }}
                        </h3>
                        <h5>
                            <span>{{ translate('User ID') }}</span>: # {{ $customer->id }}
                        </h5>
                        <h5>
                            <span>{{ translate('Phone') }}</span>: # {{ $customer->phone }}
                        </h5>
                    </div>
                    <div class="col-md-6" style="text-align: start;">
                        <h4 style="text-align: center; line-height: 2;">
                            <span>{{ translate('Last login') }}</span>: {{ $customer->last_login }}
                        </h4>
                    </div>
                    {{-- <div class="col-md-3"></div> --}}

                    <div class="col-md" style="text-align: end;">
                        <div
                            style="text-align: center;color: #FFFFFF;background-color: #2A3042;padding: 1em 2em 1em 2em;border-radius: 2em;margin-top: 2em">
                            {{ translate('Balance') }}
                            :
                            <span id="user_balance"> {{ $customer->balance }} </span> {{ currency_sympol()['name'] }}
                        </div>
                        <br>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="translate-box theme-setting-box">
            <ul class="nav nav-tabs justify-content-center" role="tablist">
                <li class="nav-item">
                    <a id="customer-data" class="nav-link basic-nav-link active" href="#">
                        <span>{{ translate('Customer data') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a id="customer-orders" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('customer orders') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a id="transaction-history" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('Transaction history') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a id="add-credit" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('Add credit') }}</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="customer-data-container basic-tabs-container">
            <div class="box box-slided-up box box-solid bg-warning orang-bg">
                <div class="box-header with-border with-border orang-bg">
                    <h4 class="box-title">
                        {{ translate('Customer data') }}
                    </h4>
                    <ul class="box-controls pull-right">
                        <li><a class="box-btn-slide" href="#"></a></li>

                    </ul>
                </div>

                <div class="box-body" style="display: block;">
                    {!! Form::open(['method' => 'Patch', 'action' => ['Admin\CustomerController@update', $customer->id], 'files' => true, 'class' => 'form_to_submit']) !!}
                    <div class="row">
                        <div class="col-md">
                            <div class="form-group">
                                <label for="f_name">{{ translate('First Name') }}
                                </label>
                                <div>
                                    {!! Form::text('f_name', $customer->f_name, ['class' => 'form-control', 'placeholder' => translate('First name')]) !!}
                                </div>
                                @error('f_name')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <label for="l_name">{{ translate('Last Name	') }}
                                </label>
                                <div>
                                    {!! Form::text('l_name', $customer->l_name, ['class' => 'form-control', 'placeholder' => translate('Last name')]) !!}
                                </div>
                                @error('l_name')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md">
                            <div class="form-group">
                                <label for="email">{{ translate('Email') }}
                                </label>
                                <div>
                                    {!! Form::email('email', $customer->email, ['class' => 'form-control', 'placeholder' => translate('Email')]) !!}
                                </div>
                                @error('email')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md">
                            <div class="form-group">
                                <label for="phone">{{ translate('Phone') }}
                                </label>
                                <div>
                                    {!! Form::text('phone', $customer->phone, ['class' => 'form-control', 'placeholder' => translate('Phone')]) !!}
                                </div>
                                @error('phone')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-md">
                            <div class="form-group">
                                <label for="name">{{ translate('Password') }}
                                </label>
                                <div>
                                    <input type="password" class="form-control"
                                        placeholder="{{ translate('Password') }}">
                                </div>
                                @error('password')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="label-gender" style="margin-bottom: 1em;">
                                <span>{{ translate('Gender') }}</span>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <input name="gender" m-div="male" value="male" type="radio" id="radio_30"
                                        class="with-gap radio-col-primary"
                                        {{ $customer->gender == 'male' ? 'checked' : '' }} />
                                    <label for="radio_30">{{ translate('Male') }}</label>
                                </div>
                                <div class="col">
                                    <input name="gender" m-div="femal" value="female" type="radio" id="radio_32"
                                        class="with-gap radio-col-primary"
                                        {{ $customer->gender == 'female' ? 'checked' : '' }} />
                                    <label for="radio_32">{{ translate('Female') }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md">
                            <div class="form-group">
                                <label for="fax">{{ translate('Fax') }}
                                </label>
                                <div>
                                    {!! Form::text('fax', $customer->fax, ['class' => 'form-control', 'placeholder' => translate('Fax')]) !!}
                                </div>
                                @error('fax')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md">
                            <div class="form-group">
                                <label for="birth_date">{{ translate('Birth date') }}
                                </label>
                                <div>
                                    {!! Form::date('birth_date', $customer->birth_date, ['class' => 'form-control', 'placeholder' => translate('birth_date')]) !!}
                                </div>
                                @error('birth_date')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md">
                            <div class="form-group">
                                <div class="checkbox">
                                    {!! Form::checkbox('active', null, $customer->active, ['id' => 'Checkbox_1']) !!}
                                    <label for="Checkbox_1">{{ translate('Active') }}</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <div class="checkbox">
                                    {!! Form::checkbox('subscribtion_list', null, $customer->subscribtion_list, ['id' => 'Checkbox_2']) !!}
                                    <label for="Checkbox_2">{{ translate('Mail list') }}</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>
                    <div class="row">
                        <div class="col-md-8"></div>
                        <div class="col-md" style="text-align: end">
                            <button type="submit"
                                class="waves-effect waves-light btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg"
                                style="width: 100%;"> {{ translate('Save') }}
                            </button>
                        </div>
                    </div>
                    {!! Form::Close() !!}
                </div>
            </div>
            <div class="box box-slided-up box box-solid bg-warning orang-bg">
                <div class="box-header with-border with-border orang-bg">
                    <h4 class="box-title">
                        {{ translate('Addresses') }}
                    </h4>
                    <ul class="box-controls pull-right">
                        <li><a class="box-btn-slide" href="#"></a></li>

                    </ul>
                </div>

                <div class="box-body" style="display: block;">
                    <div class="user-adresses-container">
                    </div>
                </div>
            </div>
        </div>
        <div class="customer-orders-container basic-tabs-container">

            <div class="box">
                <div class="box-body">
                    <div class="table-responsive">
                        <table id="complex_header" class="table table-lg table-separated" style="width:100%">
                            <thead>
                                <tr class="bg-dark">
                                    <th class="text-center">{{ translate('view') }}</th>
                                    <th class="text-center">#</th>
                                    <th class="text-center">{{ translate('Order Code') }}</th>
                                    <th class="text-center">{{ translate('Delivery Status') }}</th>
                                    <th class="text-center">{{ translate('Payment Method') }}</th>
                                    <th class="text-center">{{ translate('Payment Status') }}</th>
                                    <th class="text-center">{{ translate('Total amount') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($customer->orders as $key => $order)
                                    <tr>
                                        <td><a href="{{ route('Order.show', encrypt($order->id)) }}"><i
                                                    style="font-size: 1.5em;" class="mdi mdi-magnify"></i></a>
                                        </td>
                                        <td>{{ $order->id }}</td>
                                        <td>{{ $order->code }}</td>
                                        <td>
                                            @if ($order->delivery_status == 'pending')
                                                <div class="badge badge-primary">
                                                    {{ translate($order->delivery_status) }} </div>
                                            @elseif($order->delivery_status == 'on_review')
                                                <div class="badge badge-primary">
                                                    {{ translate($order->delivery_status) }} </div>
                                            @elseif($order->delivery_status == 'ready_to_delever')
                                                <div class="badge badge-primary">
                                                    {{ translate($order->delivery_status) }} </div>
                                            @elseif($order->delivery_status == 'on_delivery')
                                                <div class="badge badge-success">
                                                    {{ translate($order->delivery_status) }} </div>
                                            @elseif($order->delivery_status == 'delivered')
                                                <div class="badge badge-success">
                                                    {{ translate($order->delivery_status) }} </div>
                                            @endif

                                        </td>

                                        <td>{{ translate($order->payment_type) }}</td>
                                        <td class="text-center">
                                            <span class="badge badge--2 mr-4">
                                                @if ($order->payment_status == 1)
                                                    <i class="bg-green"></i> {{ translate('Paid') }}
                                                @else
                                                    <i class="bg-red"></i> {{ translate('UnPaid') }}
                                                @endif
                                            </span>
                                        </td>
                                        <td>
                                            {{ single_price($order->total_price) }}
                                            {{ currency_sympol()['symbol'] }}
                                        </td>
                                    </tr>
                                @empty
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12 ">
                                                <div
                                                    class="flex-grow-1 bg-img-dashbord-nodata p-30 flex-grow-1 bg-img card-dashbord-nodata-table  card-dashbord-nodata-table-Order">
                                                    <div class="row">
                                                        <div class="col-8 col-md-8">
                                                            <h4>  {{ translate('Our records indicate that this user does not have any previous requests') }}</h4>
                                                            <h5>  {{ translate('Do you have any request or inquiries about e-marketing') }}</h5>
                                                            <p class="text-white-60 my-10 font-size-14">
                                                                {{ translate('Marketing expert advice') }}
                                                                <button type="button"
                                                                class="waves-effect waves-light btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg">
                                                                {{ translate('Book a free consultation') }}
                                                            </button>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                        </div>
                                    </div>
                                @endforelse

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="transaction-history-container basic-tabs-container">
            <div class="user-wallet-hist-container">
                
            </div>
        </div>
        <div class="add-credit-container basic-tabs-container">
            <div class="box">
                <div class="box-body">
                    {!! Form::open(['method' => 'post', 'action' => 'Admin\WalletController@store', 'files' => true, 'id' => 'wallet_form']) !!}
                    <div class="row">
                        <div class="col-md">
                            <div class="form-group">
                                <label for="phonr">{{ translate('Description') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::hidden('customer_id', $customer->id) !!}
                                    {!! Form::text('payment_details', null, ['id' => 'payment_details', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Description')]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <label for="phonr">{{ translate('Amount') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::number('amount', null, ['id' => 'amount', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Amount')]) !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md"></div>
                        <div class="col-md" style="text-align: end">
                            <button type="button" onclick="submitAjaxAddBalance()"
                                class="waves-effect waves-light btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg"
                                style="width: fit-content%;margin-top: 2em;">{{ translate('Save') }}
                            </button>
                        </div>
                    </div>
                    {!! Form::Close() !!}
                </div>
            </div>
        </div>
        <div class="box box-slided-up box box-solid bg-warning orang-bg">
            <div class="box-header with-border with-border orang-bg">
                <h4 class="box-title">
                    {{ translate('Internal notes') }}
                </h4>
                <ul class="box-controls pull-right">
                    <li><a class="box-btn-slide" href="#"></a></li>

                </ul>
            </div>
            <div class="box-body" style="display: block;padding: 3em">
                <h5>{{ translate('Internal notes is only available to store managers and is never shown to customers') }}
                </h5>
                <br>
                <div class="not-div">
                    {!! Form::textarea('note', null, ['id' => 'note_id', 'class' => 'form-control', 'placeholder' => translate('Write your comments here')]) !!}
                </div>
                <br>
                <div class="row">
                    <div class="col-md-8"></div>
                    <div class="col-md-4" style="text-align: end">
                        <button type="button" onclick="AdduserNote()" style="padding: 1em 2em 1em 2em;"
                            class="waves-effect waves-light btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg">
                            {{ translate('Add note') }}
                        </button>
                    </div>
                </div>
                <hr style="border-top: 8px solid rgb(240 240 241)!important;">
                <br>
                <div class="customer-notes-container">
                    @foreach ($customer->notes as $oneNote)
                        <div class="note-container">
                            <h6>{{ date('Y-m-d H:i', strtotime($oneNote->created_at)) }}</h6>
                            <p>
                                {{ $oneNote->note }} 
                            </p>
                        </div>
                        <br>
                        <hr style="border-top: 8px solid rgb(240 240 241)!important;">
                        <br>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection
@section('modal')
    <div id="add_address-model" class="modal fade bs-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="margin-top: 15em;">
                <button style="width: fit-content;margin: .5em;" type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×</button>
                <div class="modal-body" style="padding: 2em;">
                    {!! Form::open(['method' => 'post', 'action' => 'Admin\AddressController@store', 'files' => true, 'id' => 'address_form']) !!}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">{{ translate('Country') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::select('country_id', $countries, null, ['id' => 'country_id', 'required' => 'required', 'onchange' => 'getprovices(this)', 'id' => 'country_id', 'style' => 'width:100%', 'class' => 'form-control select2', 'placeholder' => translate('Country')]) !!}
                                    {!! Form::hidden('customer_id', $customer->id) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ translate('Province') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::select('province_id', [], null, ['id' => 'province_id', 'required' => 'required', 'onchange' => 'getcities(this)', 'id' => 'province_id', 'style' => 'width:100%', 'class' => 'form-control select2', 'data-placeholder' => translate('Province')]) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ translate('City') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::select('city_id', [], null, ['id' => 'city_id', 'required' => 'required', 'onchange' => 'getregions(this)', 'id' => 'city_id', 'style' => 'width:100%', 'class' => 'form-control select2', 'data-placeholder' => translate('City')]) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ translate('Region') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::select('region_id', [], null, ['id' => 'region_id', 'required' => 'required', 'id' => 'region_id', 'style' => 'width:100%', 'class' => 'form-control select2', 'data-placeholder' => translate('Region')]) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="phonr">{{ translate('Phone') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::text('phone', null, ['id' => 'phone', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Phone')]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="address">{{ translate('Adress') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::text('address', null, ['id' => 'address', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Adress')]) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ translate('Name') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::text('name', null, ['id' => 'name', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Name')]) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="postal_code">{{ translate('Postal code') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::text('postal_code', null, ['id' => 'postal_code', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Postal code')]) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lat">{{ translate('Latitude') }}
                                </label>
                                <div>
                                    {!! Form::text('lat', null, ['id' => 'lat', 'class' => 'form-control', 'placeholder' => translate('Latitude')]) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lon">{{ translate('Longtude') }}
                                </label>
                                <div>
                                    {!! Form::text('lon', null, ['id' => 'lon', 'class' => 'form-control', 'placeholder' => translate('Longtude')]) !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            {!! Form::checkbox('default_adress', null, 0, ['id' => 'default_adress_1']) !!}
                            <label for="default_adress_1">{{ translate('Default address') }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md"></div>
                        <div class="col-md" style="text-align: end">
                            <button type="button" onclick="submitAjaxAddAddress()"
                                class="waves-effect waves-light btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg"
                                style="width: fit-content%;margin-top: 2em;">{{ translate('Add address') }}
                            </button>
                        </div>
                    </div>
                    {!! Form::Close() !!}
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection
@section('script')
    <script>
        $('.select2').select2();

        function addAddress() {
            $('#add_address-model').modal();
        }
        $.ajax({
            type: "POST",
            url: `{{ route('Address.getUserAdresses') }}`,
            data: {
                _token: '{{ csrf_token() }}',
                customer_id: {{ $customer->id }},
            },
            success: function(data) {
                $('.user-adresses-container').html(data);
            }
        });

        $.ajax({
            type: "POST",
            url: `{{ route('Wallet.getUserWallet') }}`,
            data: {
                _token: '{{ csrf_token() }}',
                customer_id: {{ $customer->id }},
            },
            success: function(data) {
                $('.user-wallet-hist-container').html(data);
            }
        });

        function submitAjaxAddBalance() {
            if ($('#amount').val() == '' || $('#payment_details').val() == '') {
                if ($('#amount').val() == '') {
                    $('#amount').css('background-color', 'red')
                    $('#amount').css('color', '#FFFFFF')
                } else {
                    $('#amount').css('background-color', '#FFFFFF')
                    $('#amount').css('color', '#333333')
                }
                if ($('#payment_details').val() == '') {
                    $('#payment_details').css('background-color', 'red')
                    $('#payment_details').css('color', '#FFFFFF')
                } else {
                    $('#payment_details').css('background-color', '#FFFFFF')
                    $('#payment_details').css('color', '#333333')
                }
            } else {
                $('#amount').css('background-color', '#FFFFFF')
                $('#payment_details').css('background-color', '#FFFFFF')
                $('#amount').css('color', '#333333')
                $('#payment_details').css('color', '#333333')
                var form_data = $('#wallet_form').serialize()
                var url = $('#wallet_form').attr('action')
                $.ajax({
                    type: "POST",
                    url: url,
                    data: form_data,
                    success: function(data) {
                        $('#amount').val('')
                        $('#payment_details').val('')
                        $('#user_balance').text(data.balance);
                        showAjaxsToast(data.message);
                    }
                });
            }

        }

        function submitAjaxAddAddress() {
            if ($('#country_id').val() == '' ||
                $('#province_id').val() == null ||
                $('#city_id').val() == null ||
                $('#region_id').val() == null ||
                $('#phone').val() == '' ||
                $('#address').val() == '' ||
                $('#name').val() == '' ||
                $('#postal_code').val() == ''
            ) {
                if ($('#country_id').val() == '') {
                    $('#select2-country_id-container').parent('span').css('background-color', 'red')
                } else {
                    $('#select2-country_id-container').parent('span').css('background-color', '#FFFFFF')
                }
                if ($('#province_id').val() == null) {
                    $('#select2-province_id-container').parent('span').css('background-color', 'red')
                } else {
                    $('#select2-province_id-container').parent('span').css('background-color', '#FFFFFF')
                }
                if ($('#city_id').val() == null) {
                    $('#select2-city_id-container').parent('span').css('background-color', 'red')
                } else {
                    $('#select2-city_id-container').parent('span').css('background-color', '#FFFFFF')
                }
                if ($('#region_id').val() == null) {
                    $('#select2-region_id-container').parent('span').css('background-color', 'red')
                } else {
                    $('#select2-region_id-container').parent('span').css('background-color', '#FFFFFF')
                }
                if ($('#phone').val() == '') {
                    $('#phone').css('background-color', 'red')
                    $('#phone').css('color', '#FFFFFF')
                } else {
                    $('#phone').css('background-color', '#FFFFFF')
                    $('#phone').css('color', '#333333')
                }
                if ($('#address').val() == '') {
                    $('#address').css('background-color', 'red')
                    $('#address').css('color', '#FFFFFF')
                } else {
                    $('#address').css('background-color', '#FFFFFF')
                    $('#address').css('color', '#333333')
                }
                if ($('#name').val() == '') {
                    $('#name').css('background-color', 'red')
                    $('#name').css('color', '#FFFFFF')
                } else {
                    $('#name').css('background-color', '#FFFFFF')
                    $('#name').css('color', '#333333')
                }
                if ($('#postal_code').val() == '') {
                    $('#postal_code').css('background-color', 'red')
                    $('#postal_code').css('color', '#FFFFFF')
                } else {
                    $('#postal_code').css('background-color', '#FFFFFF')
                    $('#postal_code').css('color', '#333333')
                }
            } else {
                $('#select2-country_id-container').parent('span').css('background-color', '#FFFFFF')
                $('#select2-province_id-container').parent('span').css('background-color', '#FFFFFF')
                $('#select2-city_id-container').parent('span').css('background-color', '#FFFFFF')
                $('#select2-region_id-container').parent('span').css('background-color', '#FFFFFF')
                $('#phone').css('background-color', '#FFFFFF')
                $('#phone').css('color', '#333333')
                $('#address').css('background-color', '#FFFFFF')
                $('#address').css('color', '#333333')
                $('#name').css('background-color', '#FFFFFF')
                $('#name').css('color', '#333333')
                $('#postal_code').css('background-color', '#FFFFFF')
                $('#postal_code').css('color', '#333333')
                var form_data = $('#address_form').serialize()
                var url = $('#address_form').attr('action')
                $.ajax({
                    type: "POST",
                    url: url,
                    data: form_data,
                    success: function(data) {
                        $.ajax({
                            type: "POST",
                            url: `{{ route('Address.getUserAdresses') }}`,
                            data: {
                                _token: '{{ csrf_token() }}',
                                customer_id: {{ $customer->id }},
                            },
                            success: function(data) {
                                $('.user-adresses-container').html(data);
                            }
                        });
                        $('#add_address-model').modal('toggle');
                        showAjaxsToast(data);
                    }
                });
            }
        }
        $('.customer-data-container').show();
        $('.basic-nav-link').click(function() {
            var id = $(this).attr('id');
            var thisElement = $(this);
            form_to_submit = $('#' + id + '-container');
            $('.basic-nav-link').removeClass('active');
            thisElement.addClass('active');
            $('.basic-tabs-container').hide();
            $('.' + id + '-container').show();

        })

        function makeDefault(id) {
            var url = "{{ route('Address.makeAdressDefault') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    customer_id: {{ $customer->id }},
                },
                success: function(data) {
                    $.ajax({
                        type: "POST",
                        url: `{{ route('Address.getUserAdresses') }}`,
                        data: {
                            _token: '{{ csrf_token() }}',
                            customer_id: {{ $customer->id }},
                        },
                        success: function(data) {
                            $('.user-adresses-container').html(data);
                        }
                    });

                    showAjaxsToast("{{ translate('Successfully make it as default address') }}");
                }
            });
        }

        function getprovices(e) {
            getprovicesAjax(e.value)
        }

        function getcities(e) {
            getcitiesAjax(e.value)
        }

        function getregions(e) {
            getregionsAjax(e.value)
        }

        function getprovicesAjax(id) {
            var url = "{{ route('Country.getProvinceiesByCountry') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $('#province_id').html(null);
                    $.each(data, function(i, item) {
                        $('#province_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                    if (data.length != 0) {
                        getcitiesAjax($('#province_id').val())
                    } else {
                        $('#city_id').html(null);
                        $('#region_id').html(null);
                    }
                }
            });
        }

        function getcitiesAjax(id) {
            var url = "{{ route('Country.getCitiesByProvince') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $('#city_id').html(null);
                    $.each(data, function(i, item) {
                        $('#city_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                    if (data.length != 0) {
                        getregionsAjax($('#city_id').val())
                    } else {
                        $('#region_id').html(null);
                    }
                }
            });
        }

        function getregionsAjax(id) {
            var url = "{{ route('Country.getRegionByCity') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $('#region_id').html(null);
                    $.each(data, function(i, item) {
                        $('#region_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });

                }
            });
        }

        function AdduserNote() {
            if ($('#note_id').val() == '') {
                swal({
                    title: `{{ translate('Please write your note first') }}`,
                    confirmButtonText: "{{ translate('Okey') }}",
                });
            } else {
                var url = "{{ route('User.addUserNote') }}"
                $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        _token: '{{ csrf_token() }}',
                        note: $('#note_id').val(),
                        user_id: {{ $customer->id }},
                    },
                    success: function(data) {
                        $('.customer-notes-container').prepend(data);
                        $('#note_id').val('')
                    }
                });
            }

        }
    </script>
@endsection