@php
    $configData = appClasses();
@endphp

@extends('layouts/contentNavbarLayout')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/select2/select2.scss'])
    @vite(['resources/assets/vendor/libs/dropzone/dropzone.scss'])
    @vite(['resources/assets/vendor/libs/quill/typography.scss', 'resources/assets/vendor/libs/highlight/highlight.scss', 'resources/assets/vendor/libs/quill/katex.scss', 'resources/assets/vendor/libs/quill/editor.scss'])
@endsection

@section('title', 'Create New Product')

@section('content')
    <div class="container-fluid px-0">
        <div class="d-flex align-items-center mb-4">
            <a href="{{ route('products.index') }}" class="btn btn-icon btn-outline-secondary me-2"
                style="border-radius: 12px;">
                <i class="icon-base ti tabler-arrow-left"></i>
            </a>
            <h4 class="mb-0">Create New Product</h4>
        </div>

        <div class="card shadow-sm" style="border-radius: 16px;">
            <div class="card-body">
                <h5 class="fw-semibold mb-4">Product Information</h5>
                <form id="create-products-form" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="id" value="{{ $product->id ?? '' }}">
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-2 col-form-label">Product Name</label>
                        <div class="col-md-10">
                            <input type="text" name="name" class="form-control" value="{{ $product->name ?? '' }}"
                                placeholder="Enter Product Name">
                            <label class="text-danger error_name"></label>
                        </div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-2 col-form-label" for="level">Level</label>
                        <div class="col-md-10">
                            <select class="form-select select2" name="level_id[]" id="level" multiple>
                                <option value="">Select Level</option>
                                @foreach ($levels as $level)
                                    <option value="{{ $level->id }}"
                                        {{ isset($product) && $product->levels->contains($level->id) ? 'selected' : '' }}>
                                        {{ $level->title }}</option>
                                @endforeach
                            </select>
                            <label class="text-danger error_level_id"></label>
                        </div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-2 col-form-label" for="category">Category</label>
                        <div class="col-md-10">
                            <select class="form-select select2" name="category_id" id="category">
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ isset($product) && $product->category_id == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            <label class="text-danger error_category_id"></label>
                        </div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-2 col-form-label" for="level">Course</label>
                        <div class="col-md-10">
                            <select class="form-select select2" name="course_id[]" id="course" multiple>
                                <option value="">Select Course</option>
                                @foreach ($courses as $course)
                                    <option value="{{ $course->id }}"
                                        {{ isset($product) && $product->courses->contains($course->id) ? 'selected' : '' }}>
                                        {{ $course->name }}
                                    </option>
                                @endforeach
                            </select>
                            <label class="text-danger error_course_id"></label>
                        </div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-2 col-form-label">Price</label>
                        <div class="col-md-10">
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" name="price" class="form-control" placeholder="Enter Amount"
                                    aria-label="Amount (to the nearest dollar)" value="{{ $product->price ?? '' }}">
                                <span class="input-group-text">.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-2 col-form-label">Description</label>
                        <div class="col-md-10">
                            <div class="snow-editor"></div>
                            <textarea name="description" class="form-control d-none" placeholder="Enter Description">{{ $product->description ?? '' }}</textarea>
                            <label class="text-danger error_description"></label>
                        </div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-2 col-form-label">Image</label>
                        <div class="col-md-10">
                            <div class="col-md-12">
                                <input type="hidden" name="image" id="image" class="document_id"
                                    value="{{ $product->document->id ?? null }}">
                                <input type="hidden" name="media_url" id="media_url" class="document_url"
                                    value="{{ $product->document->url ?? null }}">
                                <input type="hidden" name="thumbnail_url" id="thumbnail_url" class="thumbnail_url"
                                    value="{{ $product->document->thumbnail_url ?? ($product->document->url ?? null) }}">
                                <input type="hidden" name="media_name" id="media_name" class="document_name"
                                    value="{{ $product->document->name ?? null }}">
                                <div action="{{ route('upload-file') }}" class="dropzone needsclick" id="dropzone">
                                    @csrf
                                    <div class="dz-message needsclick">
                                        Drop files here or click to upload
                                    </div>
                                </div>
                                <label class="text-danger error_document_id"></label>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <a href="{{ route('products.index') }}" class="btn btn-outline-secondary me-2">Cancel</a>
                        <button type="submit" class="btn" style="background: #ff6a00; color: #fff;">Save
                            Product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('page-script')
    @vite(['resources/assets/vendor/libs/quill/katex.js', 'resources/assets/vendor/libs/highlight/highlight.js', 'resources/assets/vendor/libs/quill/quill.js'])
    @vite(['resources/assets/js/product-create.js'])
    <script>
        window.emailCheckUrl = "{{ route('check.email.unique') }}";
        window.uploadUrl = "{{ route('upload-file') }}";
        window.createUrl = "{{ route('products.create') }}";
        window.storeUrl = "{{ route('products.store') }}";
        window.indexUrl = "{{ route('products.index') }}";
        window.bulkUpdateUrl = "{{ route('products.bulk-update') }}";
        window.csrfToken = "{{ csrf_token() }}";
        window.productImage = "{{ $product->image_path ?? '' }}";
        window.productImageId = "{{ $product->image ?? '' }}";
    </script>
@endsection