@extends('backend.layouts.app')
@section('backend_title','Admin Brand Create')

@section('backend_content')

<div class="row">
    <div class="col-7 col-lg-offset-5">
      <div class="card">
          <div class="card-body">
            <form action="{{ Route('intro_sliderUpdate',$introEdit->id) }}" method="POST" enctype="multipart/form-data">
              @csrf
              <h5 class="font-weight-bolder">Slider Edit</h5>
              <div class="row">

                  <div class="col-6 mb-2">
                    <label>Title</label>
                    <input class="form-control" type="text" name="title" placeholder="title" value="{{ $introEdit->title }}" />
                    @error('title')
                        <div class="form-text text-danger">{{ $message }}</div>
                    @enderror
                  </div>

                  <div class="col-6 mb-2">
                    <label>Product Link</label>
                    <input class="form-control" type="text" name="product_link" placeholder="product link" value="{{ $introEdit->product_link }}" />
                    @error('product_link')
                        <div class="form-text text-danger">{{ $message }}</div>
                    @enderror
                  </div>

                <div class="col-12">
                  <label>Image (For large screen)</label>
                    <div>
                      <input name="slider_img" id="single_image" type="file" onchange="singlePreviewImages()" class="mt-1">
                      <div id="singlepreviewContainer"></div>
                      @error('slider_img')
                      <div class="form-text text-danger">{{ $message }}</div>
                      @enderror
                      <img id="img" src="{{ $introEdit->slider_img}}" class="img-thumbnail" alt=""  width="780" height="200">
                    </div>
                </div>

                <div class="col-12">
                  <label>Image (For mobile)</label>
                    <div>
                      <input name="slider_img" id="single_image2" type="file" onchange="singlePreviewImages2()" class="mt-1">
                      <div id="singlepreviewContainer2"></div>
                      @error('slider_img')
                      <div class="form-text text-danger">{{ $message }}</div>
                      @enderror
                      <img id="img2" src="{{ $introEdit->slider_img}}" class="img-thumbnail" alt=""  width="480" height="200">
                    </div>
                </div>

                <div class="col-12 mt-2">
                    <div>
                        <label>Status</label>
                    </div>
                    <div>
                      <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="status" id="status1" value="1" {{ $introEdit->status == 1 ? 'checked' : '' }}>
                          <label class="form-check-label" for="status1">Active</label>
                      </div>
                      <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="status" id="status0" value="0" {{ $introEdit->status == 0 ? 'checked' : '' }}>
                          <label class="form-check-label" for="status0">Inactive</label>
                      </div>
                  </div>

                </div>

              </div>
              <div class="mt-2">
                <button type="submit" class="btn btn-primary">Update</button>
                <a href="{{ route('intro_slider_list')}}" class="btn btn-info">Return List</a>
              </div>
            </form>
          </div>
      </div>
    </div>
</div>


{{-- single image preview and received from DB --}}
<script>
  function singlePreviewImages() {
      var previewContainer = document.getElementById('singlepreviewContainer');
      previewContainer.innerHTML = ''; // Clear any existing previews

      var file = document.getElementById('single_image').files[0]; // Assuming only one file can be selected

      var existingImg = document.getElementById('img');

      if (file) {
          var reader = new FileReader();

          reader.onload = function(e) {
              existingImg.src = e.target.result;
          }

          reader.readAsDataURL(file);
      }
  }

  function singlePreviewImages2() {
      var previewContainer = document.getElementById('singlepreviewContainer2');
      previewContainer.innerHTML = ''; // Clear any existing previews

      var file = document.getElementById('single_image2').files[0]; // Assuming only one file can be selected

      var existingImg = document.getElementById('img2');

      if (file) {
          var reader = new FileReader();

          reader.onload = function(e) {
              existingImg.src = e.target.result;
          }

          reader.readAsDataURL(file);
      }
  }


</script>


@endsection

@section('beackend_scripts')

@endsection