@extends('layouts.admin')

@section('content')
@php $readonly=''; @endphp
@if($action=='View')
@php $readonly='readonly'; @endphp
@endif
<style>
  .image-container {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .image-container img {
    max-width: 100%;
    max-height: 100%;
  }
</style>
<div class="page-links">
  <a href="{{ route('dashboard') }}">Dashboard</a>
  <span> > </span>
  <a href="{{ route('categories.index') }}">Categories</a>
</div>
<div class="row">
  <div class="col-xxl-4 col-lg-6 col-12">
    <div class="card-main">

      <h2 class="iheading-man">{{ __($title) }}</h2>
      @if($action == 'Edit')
      <form class="form-data" id="edit_form" method="POST" action="{{ route('categories.update', [$record->id]) }}" enctype="multipart/form-data">
        {{ method_field('PUT') }}
        @else
        <form class="form-data" method="POST" id="add_form" action="{{ route('categories.store') }}" enctype="multipart/form-data">
          @endif
          @csrf
          <div class="row">
            <div class="col-12">
              <label>Name <small class="red">* </small></label>
              @if(old('name'))
              @php $name = old('name'); @endphp
              @elseif(isset($record->name) && $record->name != '')
              @php $name = $record->name; @endphp
              @else
              @php $name = ''; @endphp
              @endif
              <input type="text" id="name" name="name" value="{{ $name }}" class="form-control @error('name') is-invalid @enderror" placeholder="Enter Name" {{$readonly}}>
              @error('name')
              <span class="error">{{ $message }}</span>
              @enderror
            </div>


            <div class="col-12 mt-3">
              <label>Image </label>

              @if(isset($record->image) && $record->image != '')
              @php $image = $record->image; @endphp
              @else
              @php $image = ''; @endphp
              @endif
              <input type="file" id="fileInput" name="image" class="form-control @error('image') is-invalid @enderror" {{$readonly}}>
              <div class="image-container" id="imageContainer">
                @if($image!="")
                <img src="{{ asset(Storage::url('categories').'/'.$image) }}"  />
                @endif
              </div>
              @error('image')
              <span class="error">{{ $message }}</span>
              @enderror
            </div>

            <div class="col-12 mt-3">
              @if(isset($record->active))
              @php $active = $record->active; @endphp
              @else
              @php $active = 1; @endphp
              @endif
              <label for="name" class="control-label"> Active</label>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" name="active" id="flexSwitchCheckChecked"  value=1>
              </div>
            </div>

            <!-- new-card -->
            <div class="fix-button-main">
              <div class="save-fix">
                <div class="float-end">
                  @if($action!='View')
                  <button type="submit" class="btn save-b me-3" type="button">
                    Save
                  </button>
                  @endif
                  <a type="button" class="btn btn-light me-2 float-end save-draft" href="{{ route('categories.index') }}"> {!! ($action!='View') ? 'Cancel' : 'Back' !!}</a>
                </div>
              </div>
            </div>
          </div>
        </form>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script>
  $(document).ready(function() {
    $('#fileInput').on('change', function(event) {
      var file = event.target.files[0];
      if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
          $('#imageContainer').html('<img src="' + e.target.result + '" alt="Selected Image">');
        }
        reader.readAsDataURL(file);
      }
    });
  });
</script>
@endpush