@extends('layouts.backend.app')
@section('content')
    <div class="main-panel">
        <div class="row grid-margin">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                      

                        <form class="dynamic-form" action="{{ route('products.import') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                              <div class="form-group">
                                    <label>Import File</label><br>
                                    <label class="btn btn-outline-secondary">
                                        Upload File 
                                        <input type="file" name="file" class="image-input" data-preview="#previewProduct">
                                    </label>
                                    <button type="submit" class="btn btn-primary">Import Products</button>
                                </div>
                            
                        </form>

                            <hr>
                        <h4 class="card-title">Product Add</h4>
                       <form class="dynamic-form" action="{{ route('products.storeOrUpdate') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" value="{{ $product->id ?? '' }}">

                            <div class="form-group">
                                <label>Category *</label>
                                <select class="form-control" name="category_id" id="category">
                                    <option value="">-- Select Category --</option>
                                    @foreach ($categories as $cat)
                                        <option value="{{ $cat->code }}" {{ old('thema_code', $product->thema_code ?? '') == $cat->parent_code ? 'selected' : '' }}>
                                            {{ $cat->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Sub Category *</label>
                                <select class="form-control" name="subcategory_id" id="subcategory">
                                    <option value="">-- Select Sub Category --</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Thema Code</label>
                                <input type="text" class="form-control" name="thema_code" id="thema_code" value="{{ old('thema_code', $product->thema_code ?? '') }}" readonly>
                            </div>

                            <div class="form-group">
                                <label>Title *</label>
                                <input type="text" class="form-control" name="title" value="{{ old('title', $product->title ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Slug *</label>
                                <input type="text" class="form-control" name="slug" value="{{ old('slug', $product->slug ?? '') }}" readonly>
                            </div>

                            <div class="form-group">
                                <label>Subtitle</label>
                                <input type="text" class="form-control" name="subtitle" value="{{ old('subtitle', $product->subtitle ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Contributor Full Name Inverted</label>
                                <input type="text" class="form-control" name="contributor_full_name_inverted" value="{{ old('contributor_full_name_inverted', $product->contributor_full_name_inverted ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Format</label>
                                <input type="text" class="form-control" name="format" value="{{ old('format', $product->format ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Publisher Name</label>
                                <input type="text" class="form-control" name="publisher_name" value="{{ old('publisher_name', $product->publisher_name ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Imprint Name</label>
                                <input type="text" class="form-control" name="imprint_name" value="{{ old('imprint_name', $product->imprint_name ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>ISBN</label>
                                <input type="text" class="form-control" name="isbn" value="{{ old('isbn', $product->isbn ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Available</label>
                                <input type="text" class="form-control" name="available" value="{{ old('available', $product->available ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Ships Within</label>
                                <input type="text" class="form-control" name="ships_within" value="{{ old('ships_within', $product->ships_within ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Series Name</label>
                                <input type="text" class="form-control" name="series_name" value="{{ old('series_name', $product->series_name ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Publishing Status</label>
                                <input type="text" class="form-control" name="publishing_status" value="{{ old('publishing_status', $product->publishing_status ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Publication Date</label>
                                <input type="date" class="form-control" name="publication_date" value="{{ old('publication_date', $product->publication_date ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Price Amount</label>
                                <input type="number" step="0.01" class="form-control" name="price_amount" value="{{ old('price_amount', $product->price_amount ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Discount Price</label>
                                <input type="number" step="0.01" class="form-control" name="discount_price" value="{{ old('discount_price', $product->discount_price ?? '') }}">
                            </div>
                        {{-- 
                            <div class="form-group">
                                <label>Discount Percent</label>
                                <input type="number" class="form-control" name="discount_percent" value="{{ old('discount_percent', $product->discount_percent ?? 0) }}">
                            </div> --}}

                            <div class="form-group">
                                <label>Title Long Description</label>
                                <textarea class="form-control" name="title_long_description">{{ old('title_long_description', $product->title_long_description ?? '') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label>Title Description</label>
                                <textarea class="form-control" name="title_description">{{ old('title_description', $product->title_description ?? '') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label>Keywords</label>
                                <textarea class="form-control" name="keywords">{{ old('keywords', $product->keywords ?? '') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label>Biographical Note</label>
                                <textarea class="form-control" name="biographical_note">{{ old('biographical_note', $product->biographical_note ?? '') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label>BISAC Description Main</label>
                                <textarea class="form-control" name="bisac_description_main">{{ old('bisac_description_main', $product->bisac_description_main ?? '') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label>BISAC Code Main</label>
                                <input type="text" class="form-control" name="bisac_code_main" value="{{ old('bisac_code_main', $product->bisac_code_main ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>BISAC Description Other</label>
                                <textarea class="form-control" name="bisac_description_other">{{ old('bisac_description_other', $product->bisac_description_other ?? '') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label>Reading Age</label>
                                <input type="text" class="form-control" name="reading_age" value="{{ old('reading_age', $product->reading_age ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Page Count</label>
                                <input type="text" class="form-control" name="page_count" value="{{ old('page_count', $product->page_count ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Language</label>
                                <input type="text" class="form-control" name="language" value="{{ old('language', $product->language ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Height</label>
                                <input type="text" class="form-control" name="height" value="{{ old('height', $product->height ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Width</label>
                                <input type="text" class="form-control" name="width" value="{{ old('width', $product->width ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Country of Manufacture</label>
                                <input type="text" class="form-control" name="country_of_manufacture" value="{{ old('country_of_manufacture', $product->country_of_manufacture ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Deal Start Date</label>
                                <input type="date" class="form-control" name="deal_start_date" value="{{ old('deal_start_date', $product->deal_start_date ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Deal End Date</label>
                                <input type="date" class="form-control" name="deal_end_date" value="{{ old('deal_end_date', $product->deal_end_date ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label>Primary Image</label>
                                <input type="file" class="form-control" name="primary_image[]" multiple>
                                @if(!empty($product->primary_image))
                                    @foreach(json_decode($product->primary_image) as $img)
                                        <img src="{{ asset('uploads/products/'.$img) }}" style="max-width:100px; margin-top:5px;">
                                    @endforeach
                                @endif
                            </div>

                            <button type="submit" class="btn btn-success mt-2">{{ isset($product) ? 'Update' : 'Create' }} Product</button>
                        </form>


                    </div>
                </div>
            </div>
        </div>
    </div>



@push('scripts')
<script>
$(document).ready(function () {
    var selectedCategory = "{{ old('category_id', $product->category_id ?? '') }}";
    var selectedSubCategory = "{{ old('subcategory_id', $product->subcategory_id ?? '') }}";

    if (selectedCategory) {
        loadSubcategories(selectedCategory, selectedSubCategory);
    }

    // Category Change Event
    $('#category').on('change', function () {
        var category_id = this.value;
        loadSubcategories(category_id, null);
    });

    // Subcategories Load Function
    function loadSubcategories(category_id, selectedSubCategory = null) {
        $('#subcategory').html('<option value="">Loading...</option>');
        if (category_id) {
            $.ajax({
                url: "{{ route('get.subcategories') }}",
                type: "GET",
                data: { category_id: category_id },
                success: function (res) {
                    $('#subcategory').html('<option value="">-- Select Sub Category --</option>');
                    $.each(res, function (key, value) {
                        var selected = (selectedSubCategory == value.id) ? 'selected' : '';
                        $('#subcategory').append('<option value="' + value.id + '" ' + selected + '>' + value.name + '</option>');
                    });
                }
            });
        } else {
            $('#subcategory').html('<option value="">-- Select Sub Category --</option>');
        }
    }
});

    
</script>

<script>
    // Fetch Subcategories and Thema code on Category change
    $('#category').on('change', function() {
        var categoryId = $(this).val();
        if(categoryId) {
            $.ajax({
                url: '/get-subcategories/'+categoryId,
                type: 'GET',
                success: function(data) {
                    $('#subcategory').html(data.options);
                    $('#thema_code').val('');
                }
            });
        } else {
            $('#subcategory').html('<option value="">-- Select Sub Category --</option>');
            $('#thema_code').val('');
        }
    });

    // Set Thema code on Subcategory change
    $('#subcategory').on('change', function() {
        var thema = $(this).find(':selected').data('thema');
        $('#thema_code').val(thema ?? '');
    });
</script>
@endpush
@endsection