@extends('admin.layouts.app')
@section('content')
@section('page-name', __('Product Colors'))



<div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <!-- Add New Button -->
        @if (auth()->user()->hasRole('admin') || auth()->user()->hasPermission('productcolor-create'))
        <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">
            {{ __('Add New') }}
        </a>
        @endif


        <div class="card mb-4">
          <div class="card-header pb-0">
            <h6>{{ __('Product Colors Table') }}</h6>

          </div>
          <div class="card-body px-0 pt-0 pb-2">
            <div class="table-responsive p-0">
                {{ $dataTable->table() }}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>


  @if (auth()->user()->hasRole('admin') || auth()->user()->hasPermission('productcolor-create'))
  @include('admin.productcolors.create')
  @endif

  @if (auth()->user()->hasRole('admin') || auth()->user()->hasPermission('productcolor-update'))
  @include('admin.productcolors.update')
  @endif

@endsection
@push('scripts')

{{ $dataTable->scripts(attributes: ['type' => 'module']) }}

<script src="{{ asset('admin/ajax/productcolors.js') }}?v={{ time() }}"></script>
<script>
       let routes = {
            store: "{{ route('productcolors.store') }}",
            edit: "{{ route('productcolors.edit') }}", // Dynamic route for edit
            update: "{{ route('productcolors.update') }}", // Dynamic route for update
            destroy: "{{ route('productcolors.destroy') }}" ,
        };
</script>


<script>
    $('#product_id').select2({
        dropdownParent: $('#addModal')
    });

    $('#color_id').select2({
        dropdownParent: $('#addModal')
    });

    $('#edit-product_id').select2({
        dropdownParent: $('#editModal')
    });
    $('#edit-color_id').select2({
        dropdownParent: $('#editModal')
    });
</script>


@endpush