@extends('layouts.customer')
@section('content')
<link rel="stylesheet" href="css/vendor/dropzone.min.css" />
<style type="text/css">
    .remove-image-profile {
        display: none;
        position: absolute;
        top: -10px;
        right: -10px;
        border-radius: 10em;
        padding: 2px 6px 3px;
        text-decoration: none;
        font: 700 21px/20px sans-serif;
        background: #555;
        border: 3px solid #fff;
        color: #FFF;
        box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.3);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        -webkit-transition: background 0.5s;
        transition: background 0.5s;
    }
    .remove-image-profile:hover {
        background: #E54E4E;
        padding: 3px 7px 5px;
        top: -11px;
        right: -11px;
    }
    .remove-image-profile:active {
        background: #E54E4E;
        top: -10px;
        right: -11px;
    }
</style>
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Profile</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="/">Home</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Profile</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Edit Profile</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    @if ($errors->any())
                        <div class="w-100 alert alert-danger">
                            <strong>Whoops!</strong> There were some problems with your input.<br><br>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-4">Edit Profile</h5>
                            @php
                             
                            
                            @endphp
                            <form action="{{secure_url('profiles/'. $location_user->id)}}" method="POST" enctype="multipart/form-data">

                                @csrf
                                @method('PUT')
                                 <input type="hidden" name="user_id" value="{{$location_user->id}}">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="first_name">First Name</label>
                                        <input type="text" class="form-control" value="{{ $location_user->first_name ?: '' }}" name="first_name" id="first_name" placeholder="Enter your first name">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="last_name">Last Name</label>
                                        <input type="text" class="form-control" value="{{ $location_user->last_name ?: '' }}" name="last_name" id="last_name"
                                            placeholder="Enter your last name">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="email">Email</label>
                                        <input type="email" class="form-control" value="{{ $location_user->email ?: '' }}" name="email" id="email" placeholder="Enter your email" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="username">Username</label>
                                        <input type="text" class="form-control" value="{{ $location_user->username ?: '' }}" name="username" id="username"
                                            placeholder="Enter username">
                                    </div>
                                </div>
                                 <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="profile_image">Profile Image</label>
                                        <div class="dropzone dropzone-profile" id="dropzone_food"></div>
                                        <input type="file" class="form-control" style="display:none;" name="image" id="profile_image">
	                                     
                                    </div>
                                    @php if(empty($location_user->profile_image)){ $profileImage = secure_url('default-image.png');}else{ $profileImage = $location_user->profile_image; }  @endphp
                                     <div class="form-group col-md-6">
                                        <label for="profile_image"></label>
                                          <img id="Pro_Img" src="{{ $profileImage }}" style="height: 106px;margin-top: 30px;width: 137px;object-fit: cover;">
                                          <a class="remove-image-profile" href="javascript:void(0)" style="display: inline;margin-right: 73%;margin-top: 24px;" data-toggle="modal" data-target="#modalDeleteFoodItemImage">×</a>
                                      </div>  
                                </div>
                              <div style="margin-left: 93%;">  
                                <button type="submit" class="btn btn-primary d-block mt-3 __savebtn">Save</button>
                               </div> 
                            </form>
                    </div>
                </div>
              </div>
            </div>

        <!-- change password -->
                        <div class="row"> 
                               <div class="col-12"> <hr></div>
                               <div class="col-12">
                                    <div class="card mb-4">
                                        <div class="card-body">
                                            <h5 class="mb-4">Change Password</h5>
                                      <div class="row mb-2">
                                            @if ($message = Session::get('password_success'))
                                                <div class="w-100 alert alert-success">
                                                    <p>{{ $message }}</p>
                                                </div>
                                            @endif
                                            @if ($message = Session::get('password_error'))
                                                <div class="w-100 alert alert-danger">
                                                    <p>{{ $message }}</p>
                                                </div>
                                            @endif
                                        </div>      
                                     <form action="{{ route('location-users.password.chnage',$account)}}" method="POST">
                                          @csrf
                                          @method('PUT')
                                           <div class="form-row">
                                                <div class="form-group col-md-4">
                                                    <label for="first_name">Current Password</label>
                                                    <input type="password" required class="form-control" name="current_password" id="current_password" placeholder="Current Password">
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label for="last_name">New Password</label>
                                                    <input type="password" required class="form-control" name="new_password" id="new_password"
                                                        placeholder="New Password">
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label for="last_name">Confirm New Password</label>
                                                    <input type="password" required class="form-control" name="confirm_new_password" id="confirm_new_password"
                                                        placeholder="Confirm Password">
                                                </div>
                                                <div class="form-group" style="margin-left: 85%;">
                                                    <button class="btn btn-primary" type="submit">Change Password</button>
                                                </div>

                                            </div>
                                          </form>
                                        </div>   
                                    </div> 
                           </div>
                        </div>
        <!-- passcode -->
                        <div class="row"> 
                               <div class="col-12"> <hr></div>
                               <div class="col-12">
                                    <div class="card mb-4">
                                        <div class="card-body">
                                            <h5 class="mb-4">Change Passcode</h5>
                                      <div class="row mb-2">
                                            @if ($message = Session::get('passcode_success'))
                                                <div class="w-100 alert alert-success">
                                                    <p>{{ $message }}</p>
                                                </div>
                                            @endif
                                            @if ($message = Session::get('passcode_error'))
                                                <div class="w-100 alert alert-danger">
                                                    <p>{{ $message }}</p>
                                                </div>
                                            @endif
                                        </div>      
                                     <form action="{{ secure_url('reset-passcode')}}" method="POST">
                                          @csrf
                                          @method('PUT')
                                           <div class="form-row">
                                                
                                                <div class="form-group col-md-4">
                                                    <label for="last_name">New Passcode</label>
                                                    <input onkeypress="return isNumber(event)" type="text" class="form-control __passcode" required name="new_passcode" id="new_passcode"
                                                        placeholder="New Passcode">
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label for="last_name">Confirm New Passcode</label>
                                                    <input onkeypress="return isNumber(event)" type="text" class="form-control __passcode" name="confirm_new_passcode" required id="confirm_new_passcode"
                                                        placeholder="Confirm Passcode">
                                                </div>
                                                <div class="form-group col-md-4" style="margin-top: 27px;">

                                                    <button class="btn btn-primary" type="submit">Reset Passcode</button>
                                                </div>

                                            </div>
                                          </form>
                                        </div>   
                                    </div> 
                           </div>
                          </div>
       <!-- restaurent setting -->
  @php 
     $restaurant = Auth::user()->restaurants()->first();
     $theme = null;
     if( $restaurant ) {
         $theme = App\Models\ThemeSettings::where('restaurant_id',$restaurant->id)->first(); 
     }
    
  @endphp
  @if( auth()->user()->hasRole('Admin') )
       <div class="row"> 
					<div class="col-12"> <hr></div>
					<div class="col-12">
					<div class="card mb-4">
					<div class="card-body">
					<h5 class="mb-4">Business Details</h5>
					<div class="row mb-2">
					@if ($message = Session::get('restaurant_success'))
					<div class="w-100 alert alert-success">
					<p>{{ $message }}</p>
					</div>
					@endif
					@if ($message = Session::get('restaurant_error'))
  					<div class="w-100 alert alert-danger">
  					   <p>{{ $message }}</p>
  					</div>
					@endif
					</div> 
                         
					<form action="{{ secure_url('update-restaurant/'.$restaurant->id)}}" method="POST" enctype="multipart/form-data">
					@csrf
					@method('PUT')
					<div class="form-row">

					<div class="form-group col-md-4">
					<label for="">Business Name</label>
					<input type="text" value="{{ old('business_name',$restaurant->name)}}" class="form-control" required name="business_name"
					placeholder="Business Name">
					</div>
					<div class="form-group col-md-4">
					<label for="">Logo</label>
                    <div class="dropzone dropzone-logo" id="dropzone-logo"></div>
					<input type="file" class="form-control" style="display:none;" name="logo" id="restaurant_logo"  accept="image/*">
					  <div class="image-preview-edit">
              @if( isset($theme) && !empty($theme->logo))
					  	   <img src="{{$theme->logo}}" style="height: 150px; width: 150px;object-fit: contain;">
              @else
                  <img src="img/profiles/default.png" style="height: 150px; width: 150px;object-fit: contain;">
              @endif   
					  </div>
					</div>
					<div class="form-group col-md-4" style="margin-top: 27px;">

					<button class="btn btn-primary" type="submit">Update</button>
					</div>
					


					</div>
					</form>
					</div>   
					</div> 
					</div>
					</div>
                    @endif

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="//geodata.solutions/includes/statecity.js"></script>
 <script src="js/vendor/dropzone.min.js"></script>
<script type="text/javascript">
    Dropzone.autoDiscover = false;
    if ($().dropzone && !$(".dropzone").hasClass("disabled")) {
        $(".dropzone.dropzone-profile").dropzone(
            {
                url: "{{secure_url('profile-upload')}}",
                maxFiles: 1,
                headers: {
                'x-csrf-token': "{{ csrf_token()}}",
            },
            init: function () {
                this.on("success", function (file, response) {
                $('.__savebtn').prop('disabled', false);
                $("#Pro_Img").attr('src',response.data);
                    $("#headers-profile").attr('src',response.data);
                
                });
                this.on("removedfile", function(file) {
                $('.__savebtn').prop('disabled', false);
                $.ajax({
                    type:'POST',
                    url:"{{secure_url('/profile-image/remove')}}",
                    data:{_token: "{{csrf_token()}}"},
                    success:function(data) {
                        if(data.status == true){
                            var defaultImageUrl = "{{secure_url('default-image.png')}}";
                            $("#Pro_Img").attr('src',defaultImageUrl);
                        }
                    }
                });
                    
                });
                this.on("maxfilesexceeded", function(file){
                    alert("No more files please!");
                });
                this.on("addedfiles", function(files) {
                $('.__savebtn').prop('disabled', true);
                    console.log(files.length + ' files added');
                });
            },
            thumbnailWidth: 160,
            previewTemplate: '<div class="dz-preview dz-file-preview mb-3"><div class="d-flex flex-row "><div class="p-0 w-30 position-relative"><div class="dz-error-mark"><span><i></i></span></div><div class="dz-success-mark"><span><i></i></span></div><div class="preview-container"><img data-dz-thumbnail class="img-thumbnail border-0" /><i class="simple-icon-doc preview-icon" ></i></div></div><div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"><div><span data-dz-name></span></div><div class="text-primary text-extra-small" data-dz-size /><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div></div><a href="#/" class="remove" data-dz-remove><i class="glyph-icon simple-icon-trash"></i></a></div>'
        });

        $(".dropzone.dropzone-logo").dropzone({
            url: "#",
            maxFiles: 1,
            autoProcessQueue: false,
            acceptedFiles: "image/*",
            init: function () {
                const dz = this;
                const fileInput = $("#restaurant_logo");
                const dataTransfer = new DataTransfer();
                
                dz.on("addedfile", function (file) {
                    if (dz.files.length > dz.options.maxFiles) {
                        // dz.removeFile(file);
                    } else {
                        dataTransfer.items.add(file);
                        fileInput[0].files = dataTransfer.files;
                    }
                });
                
                dz.on("removedfile", function () {
                    fileInput[0].files = dataTransfer.files;
                });
            },
            thumbnailWidth: 160,
            previewTemplate: '<div class="dz-preview dz-file-preview mb-3"><div class="d-flex flex-row "><div class="p-0 w-30 position-relative"><div class="dz-error-mark"><span><i></i></span></div><div class="dz-success-mark"><span><i></i></span></div><div class="preview-container"><img data-dz-thumbnail class="img-thumbnail border-0" /><i class="simple-icon-doc preview-icon" ></i></div></div><div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"><div><span data-dz-name></span></div><div class="text-primary text-extra-small" data-dz-size /><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div></div><a href="#/" class="remove" data-dz-remove><i class="glyph-icon simple-icon-trash"></i></a></div>'
        });
    }
     $(document).on('click','.remove-image-profile',function(){ alert();
         $.ajax({
               type:'POST',
               url:"{{secure_url('/profile-image/remove')}}",
               data:{_token: "{{csrf_token()}}"},
               success:function(data) {
                  if(data.status == true){
                        var defaultImageUrl = "{{secure_url('default-image.png')}}";
                        $("#Pro_Img").attr('src',defaultImageUrl);
                        $("#headers-profile").attr('src','img/profiles/default.png');
                  }
               }
            });
     })
	function isNumber(evt) {
     var charCode = (evt.which) ? evt.which : event.keyCode
     if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
     return true;
  	}
      // $('.__passcode').on('keyup',function(e){
      //     if($(this).val().length >= 5){
      //        // $(this).val($(this).val());
      //        e.preventDefault();
      //        return false;
      //     }
      // });

      $('#restaurant_logo').change(function(){
	        const file = this.files[0];
	        console.log(file);
	        if (file){
	          let reader = new FileReader();
	          reader.onload = function(event){
	            $('.image-preview-edit img').attr('src', event.target.result);
	          }
	          reader.readAsDataURL(file);
	        }
      });

      @if(Session::has('password_success') || Session::has('password_error'))
          $("html, body").animate({ scrollTop: $(document).height() -1500 }, 1000);
      @endif
      @if(Session::has('passcode_success') || Session::has('passcode_error') || Session::has('restaurant_success') || Session::has('restaurant_error'))
          $("html, body").animate({ scrollTop: $(document).height() -700 }, 1000);
      @endif
</script>
@endsection