@extends('admin.layouts.main')
@php
  $page_name = 'Brand';
@endphp
@section('content')
  <div class="card">
    <div class="card-body">
      <h4 class="mb-4">Add {{ $page_name }}</h4>
      <div class="mb-3">
        <form id="category_form" enctype="multipart/form-data">
          @if ($edit)
            <input type="hidden" name="edit_id" value="{{ enc($ebrand['id'] ?? '') }}">
          @endif
          @csrf
          <div class="row m-0">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="brand">Brand name</label>
                <input type="text" name="brand" value="{{ $ebrand['name'] ?? '' }}" id="brand"
                  placeholder="Brand Name" class="form-control" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="logo">Brand Logo (Optional)</label>
                <input type="file" name="logo" id="logo" class="form-control" accept="image/png">
                <small class="text-danger">Max size: 2MB, Format: PNG, Ratio: 1:1</small>
                <div class="progress mt-2" style="display: none;">
                  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0"
                    aria-valuemax="100"></div>
                </div>
                <img id="preview_image"
                  src="{{ isset($ebrand['logo']) ? route('image', ['brandimage', $ebrand['logo']]) : '#' }}"
                  alt="Preview" class="img-thumbnail mt-2 {{ isset($ebrand['logo']) ? '' : 'd-none' }}"
                  style="max-width: 150px; max-height: 150px;">
              </div>
            </div>
            <div class="col-12">
              <button class="btn btn-sm btn-primary" type="submit" id="submit_button">Submit</button>
            </div>
          </div>
        </form>
      </div>
      <div class="mb-3">
        <h5>{{ $page_name }} List</h5>
        <div class="table-responsive" id="brand_table">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>Brand Name</th>
                <th>Logo</th>
                <th>Active</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($brands as $key => $brand)
                <tr>
                  <td>{{ $key + 1 }}</td>
                  <td>{{ $brand->name }}</td>
                  <td>
                    @if ($brand->logo != '')
                      <img src="{{ route('image', ['brandimage', $brand->logo]) }}" alt="Logo"
                        style="max-width: 50px; max-height: 50px;">
                    @else
                      N/A
                    @endif
                  </td>
                  <td>{{ $brand->active ? 'Yes' : 'No' }}</td>
                  <td>
                    <a href="{{ route('admin.editbrand', enc($brand->id)) }}" class="btn btn-sm btn-warning">Edit</a>
                    <button type="submit" class="btn btn-sm btn-danger delete-button"
                      value="{{ enc($brand->id) }}">Delete</button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          <div class="mt-3">
            {{ $brands->links() }}
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    $(document).ready(function() {
      $('#logo').on('change', function(e) {
        const file = this.files[0];
        if (file) {
          if (file.size > 2 * 1024 * 1024) {
            showAlert('File size must not exceed 2MB.', 'danger', "");
            $(this).val('');
            return;
          }
          const img = new Image();
          img.onload = function() {
            if (this.width < this.height) {
              showAlert('Image width must be greater than or equal to its height.', 'danger', "");
              $('#logo').val('');
              $('#preview_image').hide();
              return;
            }
            const reader = new FileReader();
            reader.onload = function(e) {
              $('#preview_image').attr('src', e.target.result).show();
            };
            reader.readAsDataURL(file);
          };
          img.src = URL.createObjectURL(file);
        } else {
          $('#preview_image').hide();
        }
      });

      $('#category_form').on('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        $('.progress').show();
        $.ajax({
          url: "{{ route('admin.savebrand') }}",
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          xhr: function() {
            const xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
              if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                $('.progress-bar').css('width', percentComplete + '%').attr('aria-valuenow',
                  percentComplete);
              }
            });
            xhr.upload.addEventListener('load', function() {
              $('.progress').hide();
              $('.progress-bar').css('width', '0%').attr('aria-valuenow', '0');
            });
            return xhr;
          },
            success: function(response) {
            showAlert('Upload successful!', 'success', "");
            $('#category_form')[0].reset();
            $('#preview_image').hide();
            setTimeout(function() {
              location.href = "{{route('admin.addbrand')}}"; // Reload the page after 2 seconds
            }, 2000);
            },
          error: function() {
            showAlert('An error occurred while uploading.', 'danger', "");
          }
        });
      });
    });
  </script>
@endsection