@extends('front.pages.account.index')
@section('account_title')
   {{__('My Account')}}
@endsection

@section('account_css')
@endsection

@section('account_content')
<main>
<div class="content">
    <h4 class="pb-3 title_heading">{{__('Account setting')}}</h4> 
    <form action="{{route('account_update')}}" method="POST" id="account_update" enctype="multipart/form-data">
    @csrf

    <div class="form-group">
        <div class="row">
            <div class="col-lg-12 text-center">
                <label>{{__('Personal Photo')}}</label><br>
                <img class="img-responsive m-2" src="{{user_photo(Auth::user()->photo)}}" alt="" width="100" height="100">
                <input type="file" class="form-control" name="photo" accept="image/*">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-lg-12">
                <label>{{__('Name')}}</label>
                <input type="text" class="form-control" name="name" value="{{Auth::user()->name}}" required>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-lg-12">
                <label>{{__('Email')}}</label>
                <input type="email" class="form-control" name="email" value="{{Auth::user()->email}}" required> 
            </div>
        </div>
    </div>
    <div class="form-group">
            <div class="row">
                <div class="col-lg-12">
                    <label>{{__('Phone')}}</label>
                    <input type="text" class="form-control" name="phone" value="{{Auth::user()->phone}}" required readonly>
                </div>
            </div>
        </div>
   
        <div class="form-group">
            <div class="row">
                <div class="col-lg-12">
                    <label>{{__('State')}}</label>
                    <select class="form-control"  name="state_id" id="state" required>
                        @foreach($states as $state)
                          <option value="{{$state->id}}">{{$state->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-lg-12">
                    <label>{{__('City')}}</label>
                    <select class="form-control"  name="city_id" id="city" required>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-lg-12">
                    <label>{{__('Address')}}</label>
                    <textarea class="form-control" rows="4" name="address" required>{{Auth::user()->address}}</textarea>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-lg-12">
                    <label>{{__('Marketer Brand')}}</label> 
                    <input type="text" name="brand" value="{{Auth::user()->brand}}" data-role="tagsinput" class="form-control" id="" required>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-lg-12">
                    <input type="submit" class="btn_1 form-control" value="{{__('Save')}}">
                </div>
            </div>
        </div>
    </form>
    
</div>
</main>
@endsection
@section('account_scripts')
<script>
  $(document).ready(function(){
      $('#account').addClass('active');
      $('#state').change(function(){
        html='';
        city_id=$(this).val();
        $.ajax({
            type:"get",
            url:"{{url('get_user_cities')}}"+'/'+city_id,
            success:function(cities)
            {
              for(i=0;i<cities.length;i++)
              {
                html+='<option value="'+cities[i]['id']+'">'+cities[i]['name']+'</option>';
              }

              $('#city').html(html);
            }
        });
      });

      $('#state').val('{{Auth::user()->state_id}}').trigger('change');
  });

  $(document).ajaxStop(function(){
   $('#city').val('{{Auth::user()->city_id}}');
  });

</script>
@endsection