@extends('admin.layouts.app')

@section('title', $title)

@push('head')
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet" />
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <!-- mount point for Vue app -->
            <div id="product-manager-app"></div>
        </div>
    </div>
    @php
        $currencyConfig = [
            'symbol'   => html_entity_decode(ch_currency_symbol(setting('currency', 'USD'))),
            'code'     => setting('currency', 'USD'),
            'format'   => setting('price_format', '1'),
            'position' => setting('currency_position', 'left'),
        ];
    @endphp
    <script>
        window.ChargePandaConfig = {
            categories: @json($categories),
            constants: @json($constants),
            product: @json($product ?? null),
            routes: @json($routes ?? []),
            gallery: @json($gallery ?? []),
            available_products: @json($available_products ?? []),
            currency: @json($currencyConfig)
        };
    </script>
@endsection

@push('scripts')
    <script src="{{ url('assets/backend/js/vendors/ckeditor.js') }}"></script>
    <script src="{{ asset('assets/backend/js/product_v3.js') }}"></script>
@endpush