@extends('layouts.admin.master')
@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Tambah Kategori Baru</h5>
    </div>
    <div class="card-body">
        <form id="CategoryForm" action="{{ route('admin.leaflet.categories.store') }}" method="POST">
            @csrf
            <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" 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 }}">{{ Str::title($type) }}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Input Ikon (Dinamis) -->
                <div class="col-md-6 mb-3" id="icon_input_wrapper">
                    <!-- Akan diisi JS berdasarkan tipe -->
                </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="{{ $default_values['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="{{ $default_values['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="{{ $default_values['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="0">
                </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">Aktif</option>
                        <option value="0">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">
                        <p class="text-muted mb-0">Pilih tipe ikon untuk melihat preview</p>
                    </div>
                </div>
                <!-- Submit -->
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Simpan</button>
                    <a href="{{ route('admin.leaflet.categories.index') }}" class="btn btn-secondary">Batal</a>
                </div>
            </div>
        </form>
    </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/create.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 icon_types = @json(App\Models\Leaflet\Category::ICON_TYPES);
        const default_icon = "{{ asset('assets/leaflet/markers/icons/default.png') }}";
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/categories/create.js') }}"></script>
@endsection