@extends('backend.layouts.master')

@section('main-content')
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif
<div class="card">
    <h5 class="card-header">Edit Settings</h5>
    <div class="card-body">
    <form method="post" action="{{route('settings.update')}}" enctype="multipart/form-data">
        @csrf 
        <div class="form-group">
          <label for="short_des" class="col-form-label">Short Description <span class="text-danger">*</span></label>
          <textarea class="form-control" id="quote" name="short_des">{{$data->short_des}}</textarea>
          @error('short_des')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>
        <div class="form-group">
          <label for="description" class="col-form-label">Description <span class="text-danger">*</span></label>
          <textarea class="form-control" id="description" name="description">{{$data->description}}</textarea>
          @error('description')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="logo" class="col-form-label">Logo</label>
          <div class="input-group">
              <input type="file" class="form-control" id="logo" name="logo" accept="image/*" onchange="previewImage(this, 'logo-preview')">
          </div>
          <div id="logo-preview" style="margin-top:15px;max-height:100px;">
            @if($data->logo)
                <img src="{{ asset($data->logo) }}" style="height:100px;">
                <input type="hidden" name="existing_logo" value="{{$data->logo}}">
            @endif
          </div>
          @error('logo')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="photo" class="col-form-label">Photo</label>
          <div class="input-group">
              <input type="file" class="form-control" id="photo" name="photo" accept="image/*" onchange="previewImage(this, 'photo-preview')">
          </div>
          <div id="photo-preview" style="margin-top:15px;max-height:100px;">
            @if($data->photo)
                <img src="{{ asset($data->photo) }}" style="height:100px;">
                <input type="hidden" name="existing_photo" value="{{$data->photo}}">
            @endif
          </div>
          @error('photo')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="address" class="col-form-label">Address <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="address" required value="{{$data->address}}">
          @error('address')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>
        <div class="form-group">
          <label for="email" class="col-form-label">Email <span class="text-danger">*</span></label>
          <input type="email" class="form-control" name="email" required value="{{$data->email}}">
          @error('email')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>
        <div class="form-group">
          <label for="phone" class="col-form-label">Phone Number <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="phone" required value="{{$data->phone}}">
          @error('phone')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group mb-3">
           <button class="btn btn-success" type="submit">Update</button>
        </div>
      </form>
    </div>
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="{{asset('backend/summernote/summernote.min.css')}}">
@endpush

@push('scripts')
<script src="{{asset('backend/summernote/summernote.min.js')}}"></script>

<script>
// Image preview function
function previewImage(input, previewId) {
    var preview = document.getElementById(previewId);
    
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        reader.onload = function(e) {
            // Clear existing content
            preview.innerHTML = '';
            
            // Create new image
            var img = document.createElement('img');
            img.src = e.target.result;
            img.style.height = '100px';
            img.style.marginTop = '15px';
            img.style.border = '1px solid #ddd';
            img.style.borderRadius = '4px';
            img.style.padding = '5px';
            
            preview.appendChild(img);
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

// Summernote initialization
$(document).ready(function() {
    $('#quote').summernote({
        placeholder: "Write short Quote.....",
        tabsize: 2,
        height: 100
    });
    
    $('#description').summernote({
        placeholder: "Write detail description.....",
        tabsize: 2,
        height: 150
    });
});
</script>
@endpush