@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <section class="profile-pg">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="prof-side">
                        <div class="profile-picture">
                            <img src="{{asset($user->photo ?? 'assets/web/images/profile-pic.png')}}" alt="">
                        </div>
                        <h5 class="username text-center mt-3">{{$user->name}}</h5>
                        <div class="nav flex-column nav-pills mt-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-selected="true"><img src="{{asset('assets/web/images/icons/profile/user.svg')}}" class="icon" alt=""> {{__('members.my_profile')}}</a>
                            <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/bookmark.svg')}}" class="icon" alt=""> {{__('members.my_address')}}</a>
                            <a class="nav-link d-flex align-items-center" id="v-pills-tab5-tab" data-toggle="pill" href="#v-pills-tab5" role="tab" aria-controls="v-pills-tab5" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/bookmark.svg')}}" class="icon" alt="">{{__('members.notifications')}}
                                @if($notificationsCount)
                                    <div style="width: 25px;height:25px;border-radius:50%" class="bg-danger text-white ml-3 d-flex justify-content-center notifications_count_alert">{{$notificationsCount}}</div>
                                @endif
                            </a>
                            <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/list.svg')}}" class="icon" alt=""> {{__('members.my_orders')}}</a>
                            <a class="nav-link" href="{{route('user.logout')}}" aria-controls="v-pills-tab4" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/power.svg')}}" class="icon" alt="">{{__('main.logout')}}</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 m-auto">
                    <div class="profile-inner">
                        <div class="tab-content" id="v-pills-tabContent">
                            {{---Profile--}}
                            <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-tab1-tab">
                                <div class="tab-wrapper info">
                                    <div class="sec-heading mb-5 wow fadeInDown" data-wow-duration="2s">
                                        <div class="content">
                                            <span>{{__('members.my_profile')}}</span>
                                            <h1>{{__('members.my_profile')}}</h1>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <span class="label"> {{__('members.name')}} </span>
                                        <p class="content"> {{$user->name}} </p>
                                    </div>
                                    <div class="item">
                                        <span class="label"> {{__('members.email')}} </span>
                                        <p class="content">{{$user->email}} </p>
                                    </div>
                                    <div class="item">
                                        <span class="label"> {{__('members.phone')}} </span>
                                        <p class="content"> {{$user->phone}} </p>
                                    </div>
                                    <div class="item">
                                        <span class="label"> {{__('members.gender')}} </span>
                                        <p class="content"> {{$user->gender ? __('members.'.$user->gender) : ''}}</p>
                                    </div>
                                    <div class="btns-wrapper mt-4">
                                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}" class="btn text-uppercase">{{__('members.back_to_home')}}</a>
                                        <button class="btn active" type="button" data-toggle="modal" data-target="#infoModal">{{__('members.edit_profile')}}</button>
                                    </div>
                                </div>
                            </div>
                            {{---Address--}}
                            <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">
                                <div class="tab-wrapper info">
                                    <div class="sec-heading mb-5 wow fadeInDown" data-wow-duration="2s">
                                        <div class="content">
                                            <span>{{__('members.my_address')}}</span>
                                            <h1>{{__('members.my_address')}}</h1>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <span class="label"> {{__('members.city')}} </span>
                                        <p class="content"> {{$user->city ?? ''}} </p>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="item">
                                                <span class="label"> {{__('members.state_id')}} </span>
                                                <p class="content"> {{$state ? $state->name : ''}} </p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="item">
                                                <span class="label"> {{__('members.zip_code')}} </span>
                                                <p class="content"> {{$user->zip_code}} </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <span class="label"> {{__('members.country_id')}} </span>
                                        <p class="content"> <img src="{{$country ? asset($country->image) : asset('assets/web//images/flag.png')}}" alt="" class="flag"> {{$country ? $country->name : ''}} </p>
                                    </div>
                                    <div class="item">
                                        <span class="label"> {{__('members.address')}} </span>
                                        <p class="content"> {{$user->address}} </p>
                                    </div>
                                    <div class="btns-wrapper mt-4">
                                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}" class="btn text-uppercase">{{__('members.back_to_home')}}</a>
                                        <button class="btn active" type="button" data-toggle="modal" data-target="#addressModal">{{__('members.edit_address')}}</button>
                                    </div>
                                </div>
                            </div>
                            {{---Notifications--}}
                            <div class="tab-pane fade" id="v-pills-tab5" role="tabpanel" aria-labelledby="v-pills-tab5-tab">
                                <div class="tab-wrapper notification-tab">
                                    <div class="sec-heading mb-5 wow fadeInDown" data-wow-duration="2s">
                                        <div class="content">
                                            <span>{{__('members.notifications')}}</span>
                                            <h1>{{__('members.notifications')}}</h1>
                                        </div>
                                    </div>
                                    @if(count($notifications))
                                        <div class="form-group col-md-12 text-right">
                                            <a href="#" class="mark_as_read_link"><i class="fa fa-envelope-open"></i> {{__('members.mark_as_read')}}</a>
                                        </div>
                                        @foreach($notifications as $notification)
                                            <div class="notifi-item done">
                                                <img src="{{asset('assets/web/images/icons/notification-1.svg')}}" alt="" class="icon">
                                                <p class="dec">
                                                    {{$notification->message}}
                                                </p>
                                                <span class="time">{{date('h:i A', strtotime($notification->create_at))}}</span>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="alert alert-secondary text-danger text-center">
                                            {{__('members.no_notifications')}}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            {{--Orders--}}
                            <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">
                                <div class="tab-wrapper orders">
                                    <div class="sec-heading mb-5 wow fadeInDown" data-wow-duration="2s">
                                        <div class="content">
                                            <span>{{__('members.my_orders')}}</span>
                                            <h1>{{__('members.my_orders')}}</h1>
                                        </div>
                                    </div>
                                    <ul class="nav nav-pills pt-4 mb-4" id="pills-tab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active" id="pills-all-tab" data-toggle="pill" href="#pills-all" role="tab" aria-controls="pills-all" aria-selected="true">{{__('members.all_orders')}}</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-completed-tab" data-toggle="pill" href="#pills-completed" role="tab" aria-controls="pills-completed" aria-selected="false">{{__('products.complete')}}</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-pinding-tab" data-toggle="pill" href="#pills-pinding" role="tab" aria-controls="pills-pinding" aria-selected="false">{{__('products.pending')}}</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-canceled-tab" data-toggle="pill" href="#pills-canceled" role="tab" aria-controls="pills-canceled" aria-selected="false">{{__('products.cancelled')}}</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content" id="pills-tabContent">
                                        <div class="tab-pane fade show active" id="pills-all" role="tabpanel" aria-labelledby="pills-all-tab">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>{{__('members.order_id')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.product_name')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.date')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.status')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @if(count($carts))
                                                        @foreach($carts as $mode => $cart)
                                                            @foreach($cart as $item)
                                                                @php
                                                                    /** @var TYPE_NAME $item */
                                                                    /**get selected product image*/
                                                                    $colors = json_decode($item['colors'], true);
                                                                    $colors = array_keys($colors);
                                                                    $imageIndex = array_search($item['color'], $colors);
                                                                    $image = json_decode($item['images'], true)[$imageIndex];
                                                                @endphp
                                                                <tr>
                                                                    <td>{{$loop->iteration}}</td>
                                                                    <td class="order_id_td">#{{$item['product_id']}}</td>
                                                                    <td class="prod_td">
                                                                        <img src="{{asset($image)}}" alt="" class="prod-img">
                                                                        <p class="prod">{{$item['name']}}</p>
                                                                    </td>
                                                                    <td>{{date('d/m/Y', strtotime($item['created_at']))}}
                                                                    <td>
                                                                        @if($mode == 'cart_mode') <span class="badge bg-warning">{{__('products.cart_mode')}}</span> @endif
                                                                        @if($mode == 'complete') <span class="badge badge_completed">{{__('products.complete')}}</span> @endif
                                                                        @if($mode == 'pending') <span class="badge badge_pending">{{__('products.pending')}}</span> @endif
                                                                        @if($mode == 'canceled') <span class="badge badge_canceled">{{__('products.cancelled')}}</span>@endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="10">
                                                                <div class="alert alert-secondary text-danger text-center">
                                                                    <a class="text-danger" href="{{route('product.index')}}">{{__('products.no_products')}}{{__('products.products')}}</a>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="pills-completed" role="tabpanel" aria-labelledby="pills-completed-tab">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>{{__('members.order_id')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.product_name')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.date')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.status')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @if(array_key_exists('complete', $carts))
                                                        @foreach($carts['complete'] as $complete)
                                                            @php
                                                                /** @var TYPE_NAME $complete */
                                                                /**get selected product image*/
                                                                $colors = json_decode($complete['colors'], true);
                                                                $colors = array_keys($colors);
                                                                $imageIndex = array_search($complete['color'], $colors);
                                                                $image = json_decode($complete['images'], true)[$imageIndex];
                                                            @endphp
                                                            <tr>
                                                                <td>{{$loop->iteration}}</td>
                                                                <td class="order_id_td">#{{$complete['product_id']}}</td>
                                                                <td class="prod_td">
                                                                    <img src="{{asset($image)}}" alt="" class="prod-img">
                                                                    <p class="prod">{{$complete['name']}}</p>
                                                                </td>
                                                                <td>{{date('d/m/Y', strtotime($complete['created_at']))}}
                                                                <td>
                                                                    <span class="badge badge_completed">{{__('products.complete')}}</span>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="10">
                                                                <div class="alert alert-secondary text-danger text-center text-danger">
                                                                    {{__('members.no_complete_products')}}
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="pills-pinding" role="tabpanel" aria-labelledby="pills-pinding-tab">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th> {{__('members.order_id')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th> {{__('members.product_name')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th> {{__('members.date')}}<button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.status')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @if(array_key_exists('pending', $carts))
                                                        @foreach($carts['pending'] as $pending)
                                                            @php
                                                                /** @var TYPE_NAME $pending */
                                                                /**get selected product image*/
                                                                $colors = json_decode($pending['colors'], true);
                                                                $colors = array_keys($colors);
                                                                $imageIndex = array_search($pending['color'], $colors);
                                                                $image = json_decode($pending['images'], true)[$imageIndex];
                                                            @endphp
                                                            <tr>
                                                                <td>{{$loop->iteration}}</td>
                                                                <td class="order_id_td">#{{$pending['product_id']}}</td>
                                                                <td  class="prod_td">
                                                                    <img src="{{asset($image)}}" alt="" class="prod-img">
                                                                    <p class="prod"> {{$pending['name']}}</p>
                                                                </td>
                                                                <td>{{date('d/m/Y', strtotime($pending['created_at']))}}
                                                                <td>
                                                                    <span class="badge badge_pending">{{__('products.pending')}}</span>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="10">
                                                                <div class="alert alert-secondary text-danger text-center text-danger">
                                                                    {{__('members.no_pending_products')}}
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="pills-canceled" role="tabpanel" aria-labelledby="pills-canceled-tab">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th> {{__('members.order_id')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th> {{__('members.product_name')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th> {{__('members.date')}}<button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                        <th>{{__('members.status')}} <button class="sort-btn"><i class="fas fa-sort"></i></button></th>
                                                    </thead>
                                                    <tbody>
                                                    @if(array_key_exists('canceled', $carts))
                                                        @foreach($carts['canceled'] as $cancelled)
                                                            @php
                                                                /** @var TYPE_NAME $cancelled */
                                                                /**get selected product image*/
                                                                $colors = json_decode($cancelled['colors'], true);
                                                                $colors = array_keys($colors);
                                                                $imageIndex = array_search($cancelled['color'], $colors);
                                                                $image = json_decode($cancelled['images'], true)[$imageIndex];
                                                            @endphp
                                                            <tr>
                                                                <td>{{$loop->iteration}}</td>
                                                                <td class="order_id_td">#{{$cancelled['product_id']}}</td>
                                                                <td class="prod_td">
                                                                    <img src="{{asset($image)}}" alt="" class="prod-img">
                                                                    <p class="prod"> {{$cancelled['name']}}</p>
                                                                </td>
                                                                <td>{{date('d/m/Y', strtotime($cancelled['created_at']))}}
                                                                <td>
                                                                    <span class="badge badge_canceled">{{__('products.cancelled')}}</span>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="10">
                                                                <div class="alert alert-secondary text-danger text-center text-danger">
                                                                    {{__('members.no_canceled_products')}}
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Info Modal-->
    <div class="modal info-modal fade" id="infoModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">{{__('members.edit_profile')}}</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <form action="{{route('user.updateProfile', $user)}}" method="post" class="update_profile_form">
                    <div class="modal-body">
                        <div class="image-container" id="imagePreview" style="background-image: url({{asset($user->photo ?? 'assets/web/images/profile-pic.png')}});">
                            <input name="photo" type="file" class="custom-file-input" id="imageUpload" required="" capture="">
                            <button><i class="far fa-edit"></i></button>
                        </div>
                        <div class="row mt-5">
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.full_name')}}</span>
                                    </div><input name="name" type="text" class="form-control enable-input" value="{{$user->name}}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.email')}}</span>
                                    </div><input name="email" type="email" class="form-control enable-input" value="{{$user->email}}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.phone')}}</span></div>
                                    <input name="phone" type="tel" class="form-control enable-input" value="{{str_replace('00966', '', $user->phone)}}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.gender')}}</span>
                                    </div>
                                    <select name="gender" class="form-control enable-input">
                                        <option {{$user->gender == 'male' ? 'selected' : ''}} value="male">{{__('members.male')}}</option>
                                        <option {{$user->gender == 'female' ? 'selected' : ''}} value="female"> {{__('members.female')}} </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span> {{__('members.password')}} </span>
                                    </div><input name="password" type="password" class="form-control enable-input" value="">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.retype_password')}}</span>
                                    </div><input name="password_confirmation" type="password" class="form-control enable-input" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('members.close')}}</button>
                    <button type="button" class="main-butn update_profile_button">{{__('members.save_change')}}</button>
                </div>

            </div>

        </div>

    </div>
    <!--address Modal-->
    <div class="modal info-modal fade" id="addressModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">{{__('members.edit_address')}}</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <form action="{{route('user.updateProfile', $user)}}" method="post" class="update_address_form">
                    <div class="modal-body">
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.city')}}</span></div>
                                    <input name="city" type="text" class="form-control enable-input" value="{{$user->city}}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.state_id')}}</span></div>
                                    <select name="state_id" class="form-control enable-input">
                                        @if(count($states))
                                            @foreach($states as $state)
                                                <option {{$user->state_id == $state->id ? 'selected' : ''}} value="{{$state->id}}">{{$state->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.zip_code')}}</span></div>
                                    <input name="zip_code" type="text" class="form-control enable-input" value="{{$user->zip_code}}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.country_id')}}</span></div>
                                    <select name="country_id" class="form-control enable-input">
                                        @if(count($countries))
                                            @foreach($countries as $country)
                                                <option {{$user->country_id == $country->id ? 'selected' : ''}} value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.address')}}</span></div>
                                    <input name="address" type="text" class="form-control enable-input" value="{{$user->address}}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('members.close')}}</button>
                        <button type="button" class="main-butn update_profile_button update_address">{{__('members.save_change')}}</button>
                    </div>
                </form>

            </div>

        </div>

    </div>

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script>
        let refreshNotificationRoute = "{{route('user.refreshNotification')}}",
            markAsReadRoute = "{{route('user.markAsRead')}}",
            getStateRoute = "{{route('user.getState')}}";

    </script>
    <script>

    </script>
    <script src="{{ asset('assets/web/js/users.profile.js') }}"></script>

    <script>
        $('select[name="country_id"]').change(async function (e) {
            e.preventDefault();

            let data = {country_id: $(this).val()},
                url = getStateRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.states){
                $('select[name="state_id"]').html(`<option value="">{{ meta('state_id', getCurrentLocale()) ?? __('members.state_id') }}</option>`);
                for(let i = 0; i < response.states.length; i++){
                    $('select[name="state_id"]').append(`<option value="`+response.states[i].id+`">`+response.states[i].name+`</option>`)
                }
            }
        });
    </script>

@endsection