@extends('layouts.admin.master')
@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Edit Kategori: {{ $category->name }}</h5>
    </div>
    <div class="card-body">
        <form id="CategoryForm" action="{{ route('admin.leaflet.categories.update', $category->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="row">
                <!-- Nama Kategori -->
                <div class="col-md-6 mb-3">
                    <label for="name" class="form-label">Nama Kategori <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name"
                           value="{{ old('name', $category->name) }}" required>
                </div>
                <!-- Parent Kategori -->
                <div class="col-md-6 mb-3">
                    <label for="parent_id" class="form-label">Parent Kategori</label>
                    <select class="form-select select2" id="parent_id" name="parent_id">
                        <option value="">-- Tanpa Parent --</option>
                        @foreach ($categories as $id => $label)
                            <option value="{{ $id }}" {{ old('parent_id', $category->parent_id ?? '') == $id ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <!-- Tipe Ikon -->
                <div class="col-md-6 mb-3">
                    <label for="icon_type" class="form-label">Tipe Ikon <span class="text-danger">*</span></label>
                    <select class="form-select" id="icon_type" name="icon_type" required>
                        @foreach (App\Models\Leaflet\Category::ICON_TYPES as $type)
                            <option value="{{ $type }}" {{ $category->icon_type == $type ? 'selected' : '' }}>
                                {{ Str::title($type) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <!-- Dynamic Icon Input -->
                <div class="col-md-6 mb-3" id="icon_input_wrapper">
                    @if ($category->icon_type == 'html')
                        <label for="icon_html" class="form-label">Kode HTML <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="icon_html" name="icon_html" rows="3" required>{{ old('icon_html', is_array($category->icon_html) ? '' : $category->icon_html) }}</textarea>
                    @else
                        <label for="icon" class="form-label">Pilih Ikon <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="icon" name="icon" value="{{ old('icon', $category->icon) }}" required>
                            <button type="button" class="btn btn-outline-secondary" id="btn_browse_icon">
                                <i class="fas fa-folder-open"></i>
                            </button>
                        </div>
                    @endif
                </div>
                <!-- Warna & Styling -->
                <div class="col-md-4 mb-3">
                    <label for="color" class="form-label">Warna Border <span class="text-danger">*</span></label>
                    <input type="color" class="form-control form-control-color" id="color" name="color"
                           value="{{ old('color', $category->color) }}" required>
                </div>
                <div class="col-md-2 mb-3">
                    <label for="opacity" class="form-label">Opacity</label>
                    <input type="number" class="form-control" id="opacity" name="opacity"
                           min="0.1" max="1" step="0.1" value="{{ old('opacity', $category->opacity) }}" required>
                </div>
                <div class="col-md-2 mb-3">
                    <label for="weight" class="form-label">Weight</label>
                    <input type="number" class="form-control" id="weight" name="weight"
                           min="1" max="10" value="{{ old('weight', $category->weight) }}" required>
                </div>
                <!-- Sort Order -->
                <div class="col-md-2 mb-3">
                    <label for="sort_order" class="form-label">Urutan</label>
                    <input type="number" class="form-control" id="sort_order" name="sort_order"
                           min="0" value="{{ old('sort_order', $category->sort_order) }}">
                </div>
                <!-- Status -->
                <div class="col-md-2 mb-3">
                    <label for="is_active" class="form-label">Status</label>
                    <select class="form-select" id="is_active" name="is_active">
                        <option value="1" {{ $category->is_active ? 'selected' : '' }}>Aktif</option>
                        <option value="0" {{ !$category->is_active ? 'selected' : '' }}>Nonaktif</option>
                    </select>
                </div>
                <!-- Preview Ikon -->
                <div class="col-12 mb-3">
                    <label class="form-label">Preview Ikon</label>
                    <div id="icon_preview" class="border p-3 text-center bg-light">
                        @if ($category->icon_type == 'html')
                            {!! $category->icon_html !!}
                        @elseif ($category->icon)
                            <img src="{{ asset('assets/leaflet/icons/' . $category->icon) }}" style="max-height: 50px;">
                        @else
                            <p class="text-muted mb-0">Tidak ada preview</p>
                        @endif
                    </div>
                </div>
                <!-- Submit -->
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                    <a href="{{ route('admin.leaflet.categories.index') }}" class="btn btn-secondary">Batal</a>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="modal-icon-picker" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pilih Ikon</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3">
          @foreach ($icons as $icon)
            <div class="col-2">
              <img src="{{ asset('assets/leaflet/icons/' . $icon) }}"
                   class="img-fluid border rounded icon-item cursor-pointer"
                   data-icon="{{ $icon }}" title="{{ $icon }}">
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/categories/edit.css') }}">
@endsection
@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script>    
        const current_icon_type = "{{ $category->icon_type }}";
        const current_icon = "{{ $category->icon }}";
        const current_icon_html = `{!! $category->icon_html !!}`;
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/categories/edit.js') }}"></script>
@endsection