@extends('layouts.main')
@section('content')
  @push('style')
    <link rel="stylesheet" href="{{asset('assets/css/auto_style.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/toastr.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/themify-icons.css')}}">
  @endpush

  <div class="preloader" id="preloader" >
    <div class="loading">
      <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
      <p>Harap Tunggu</p>
    </div>
  </div>
  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
          <li class="breadcrumb-item" aria-current="page">{{ $titleMenu }}</li>
          <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
        </ol>
      </nav>
      <!-- END : Breadcrumb -->
      <h1 class="page-title mb-0 mt-2">{{ $titleMenu }} {{$title}}</h1>
      <p class="lead"></p>
    </div>
  </div>

  <div class="content__boxed">
    <div class="content__wrap">
      <div class="row">
        <div class="col-sm-12 mt-2">
          <div class="card">
            <div class="card bg-info" style="min-height:5px; border-radius:1px;"></div>
            <div class="card-body">
              <h5 class="card-title fs-4">Input Data</h5>
                <form id="form_member" name="form_member" action="{{ route('master-product-save') }}" class="mt-3 row g-1 needs-validation" onsubmit="return validateForm()" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="col-md-1" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">ID Produk</label>
                            <input type="text" class="form-control" name="kd_product" id="kd_product" value="" readonly>
                        </div>
                        <div class="col-md-2" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Nama Produk *</label>
                            <input type="text" class="form-control" name="product_name" id="product_name">
                        </div>
                        <div class="col-md-2" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Tipe *</label>
                            <select class="form-control" name="tipe_produk_id" id="tipe_produk_id">
                                <option value="">-- Pilih Tipe --</option>
                                @foreach ($tipeProduk as $tp)
                                    <option value="{{ $tp->type_id }}">
                                        {{ $tp->type_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Satuan *</label>
                            <select class="form-control" name="satuan_produk_id" id="satuan_produk_id">
                                <option value="">- Pilih -</option>
                                @foreach ($satuanProduk as $sp)
                                    <option value="{{ $sp->unit_id }}">
                                        {{ $sp->unit_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Material *</label>
                            <select class="form-select select2" name="material_produk_id" id="material_produk_id">
                                <option value=""></option> <!-- important -->
                                @foreach ($materialProduk as $mp)
                                    <option value="{{ $mp->material_id }}">
                                        {{ $mp->material_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Stok</label>
                            <input type="number" class="form-control" name="stock_product" id="stock_product">
                        </div>
                        <div class="col-md-3" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Harga *</label>
                            <div class="input-group">
                                <span class="input-group-text">Rp</span>
                                <input type="number" class="form-control" name="price" id="price" onkeyup="formatRupiah(this)" pattern="[0-9]{1,15}">
                            </div>
                        </div>
                        <div class="col-md-5" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Deskripsi Produk</label>
                            <textarea
                                class="form-control"
                                name="product_description"
                                id="product_description"
                                rows="3"
                                placeholder="Masukkan deskripsi produk..."></textarea>
                        </div>
                        <div class="col-md-5" style="margin-top:1em">
                            <label class="form-label fs-6 fw-bold">Gambar Produk</label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror"
                                  name="image" id="image" accept="image/*" required>
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Format: JPG, PNG, max 2MB</small>

                            <!-- Optional: Live preview -->
                            <div class="mt-2">
                                <img id="imagePreview" src="#" alt="Preview Gambar"
                                    style="max-width:200px; max-height:200px; display:none; border-radius:8px; border:1px solid #ddd;">
                            </div>
                        </div>
                <hr>
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                       <button type="submit" class="btn btn-sm btn-primary col-md-3 fs-6">Simpan</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-sm-12 mt-2">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title fs-4">List Data</h5>
              <div class="table-responsive">
                <table id="table-product" class="table table-striped display">
                  <thead>
                    <tr>
                      <th class="text-center">No</th>
                      <th class="text-center">ID</th>
                      <th class="text-center">Nama Produk</th>
                      <th class="text-center">Tipe</th>
                      <th class="text-center">Satuan</th>
                      <th class="text-center">Stok</th>
                      <th class="text-center">Harga</th>
                      <th class="text-center">Gambar</th>
                      <th class="text-center">Deskripsi</th>
                      <th class="text-center">Barcode</th>
                      <th class="text-center"><i class="demo-psi-gear"></i></th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  {{-- Image Preview Modal --}}
    <div class="modal fade" id="modal-image-preview" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Product Image</h5>
                <div class="d-flex align-items-center gap-2 ms-auto me-3">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="zoomImage(-0.2)" title="Zoom Out">
                        <i class="pli-maximize-2"></i>
                    </button>
                    <span id="zoom-level" class="text-muted small">100%</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="zoomImage(0.2)" title="Zoom In">
                        <i class="pli-minimize-2"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="resetZoom()" title="Reset">
                        <i class="pli-repeat-2"></i>
                    </button>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center"
                style="overflow:auto; min-height:65vh; background:#f8f9fa; display:flex; align-items:center; justify-content:center;">
                <img id="preview-img" src="" alt="Product Image"
                    style="max-width:100%; max-height:65vh; object-fit:contain; transition: transform 0.2s ease; transform-origin: center center; cursor: grab;">
            </div>
        </div>
    </div>
</div>

@include('master::product.modal-edit')
@include('master::product.js')

@endsection