@extends('admin.layouts.master')

@section('subcategory', 'active')
@section('title') {{ $data['title'] ?? 'Manage Subcategories' }} @endsection
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">{{ $data['title'] ?? '' }}</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">{{ $data['title'] ?? '' }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h3 class="card-title">Manage {{ $data['title'] ?? '' }} </h3>
                                    </div>
                                    <div class="col">
                                        <form action="" class="row justify-content-center">
                                            <div class="form-group mx-2 m-0">
                                                <select name="category" id="" class="form-control">
                                                    <option value="">Filter by Category</option>
                                                    @foreach ($data['categories'] as $category)
                                                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                                            {{ $category->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="mx-1">
                                                <button class="btn btn-info mx-2">Filter</button>
                                                <a href="{{ route('admin.subcategory.index') }}"
                                                    class="btn btn-danger mx-2">Reset</a>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col">
                                        <div class="float-right">
                                            @if (Auth::user()->can('admin.subcategory.view'))
                                                <a href="javascript:void(0)" data-toggle="modal" data-target="#addCategoryModal"
                                                    class="btn btn-primary">Add New</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body table-responsive p-0">
                                <table id="dataTables" class="table table-hover text-nowrap table-bordered jsgrid-table">
                                    <thead class="thead-light">
                                        <tr>
                                            <th width="5%">#</th>
                                            <th width="20%">Category</th>
                                            <th width="20%">Subcategory</th>
                                            <th width="10%">Order</th>
                                            <th width="10%">Status</th>
                                            <th width="20%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data['rows'] as $key => $row)
                                            <tr data-id="{{ $row->id }}" data-category-id="{{ $row->category_id }}"
                                                data-name="{{ $row->name }}" data-image="{{ asset($row->image) }}"
                                                data-order="{{ $row->order_number }}" data-status="{{ $row->status }}">
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $row->category->name ?? '' }}</td>
                                                <td>{{ $row->name }}</td>
                                                <td>{{ $row->order_number }}</td>
                                                <td>{!! $row->status ? '<span class="badge bg-success">Published</span>' : '<span class="badge bg-danger">Unpublished</span>' !!}</td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-secondary dropdown-toggle btn-sm" type="button"
                                                            id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            Action
                                                        </button>
                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                                            @if (Auth::user()->can('admin.subcategory.edit'))
                                                                <button class="dropdown-item edit"><i class="fas fa-edit"></i> Edit</button>
                                                           
                                                                <button class="dropdown-item manage-fields" data-id="{{ $row->id }}" data-name="{{ $row->name }}">
                                                                    <i class="fas fa-list"></i> Manage Fields
                                                                </button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ================= Add Modal ================= --}}
    <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('admin.subcategory.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Add Subcategory</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Category</label>
                            <select name="category_id" class="form-control select2" required>
                                <option value="">Select</option>
                                @foreach ($data['categories'] as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Subcategory Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Image <small class="text-success">(50x50px recommended)</small></label>
                            <input type="file" name="image" class="form-control" accept="image/*" required>
                        </div>
                        <div class="form-group">
                            <label>Order Number</label>
                            <input type="number" name="order_number" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Status</label>
                            <select name="status" class="form-control">
                                <option value="1">Published</option>
                                <option value="0">Unpublished</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ================= Edit Modal ================= --}}
    <div class="modal fade" id="editCategoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form id="editCategoryForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Subcategory</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="edit_category_id">
                        <div class="form-group">
                            <label>Category</label>
                            <select name="category_id" id="edit_category_select" class="form-control select2"></select>
                        </div>
                        <div class="form-group">
                            <label>Subcategory Name</label>
                            <input type="text" name="name" id="edit_name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Image <small><a href="#" id="edit_image_link" target="_blank">(View current)</a></small></label>
                            <input type="file" name="image" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Order Number</label>
                            <input type="number" name="order_number" id="edit_order_number" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Status</label>
                            <select name="status" id="edit_status" class="form-control">
                                <option value="1">Published</option>
                                <option value="0">Unpublished</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ================= Manage Fields Modal ================= --}}
    <div class="modal fade" id="manageFieldsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form id="manageFieldsForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Manage Fields for <span id="fieldsSubcategoryName"></span></h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="subcategory_id" id="fields_subcategory_id">
                        
                        <h5 class="mb-3">Dynamic Fields</h5>
                        <div id="fieldsContainer"></div>
                        <button type="button" class="btn btn-sm btn-primary mt-2" id="addFieldBtn">
                            <i class="fas fa-plus"></i> Add Field
                        </button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Save Fields</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

 {{-- Hidden Field Template --}}
<div id="fieldTemplate" class="d-none">
    <div class="card mb-2 field-row border shadow-sm">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong>Field</strong>
                <button type="button" class="btn btn-danger btn-sm remove-field"><i class="fas fa-trash"></i></button>
            </div>
            <input type="hidden" name="fields[][id]" class="field-id">
            <div class="form-group">
                <label>Field Name</label>
                <input type="text" name="fields[][name]" class="form-control" placeholder="Field Name" required>
            </div>
            <div class="form-group">
                <label>Field Type</label>
                <select name="fields[][type]" class="form-control field-type">
                    <option value="text">Text</option>
                    <option value="number">Number</option>
                    <option value="textarea">Textarea</option>
                    <option value="select">Select</option>
                    <option value="radio">Radio</option>
                    <option value="checkbox">Checkbox</option>
                    <option value="brand">Brand</option>
                    <option value="brand_model">Brand Model</option>
                </select>
            </div>
            <div class="form-group field-options d-none">
                <label>Options (Label and Value)</label>
                <div class="options-container"></div>
                <button type="button" class="btn btn-sm btn-secondary mt-1 add-option">Add Option</button>
            </div>
            <div class="form-check mt-2">
                <input type="checkbox" name="fields[][required]" class="form-check-input">
                <label class="form-check-label">Required</label>
            </div>
        </div>
    </div>
</div>

{{-- Option Template --}}
<div id="optionTemplate" class="d-none">
    <div class="input-group mb-2 option-row">
        <input type="text" placeholder="Label" class="form-control option-label" required>
        <input type="text" placeholder="Value" class="form-control option-value" required>
        <div class="input-group-append">
            <button type="button" class="btn btn-danger remove-option"><i class="fas fa-trash"></i></button>
        </div>
    </div>
</div>
@endsection

@push('script')

<script>
 $(function () {
    let fieldCounter = 0;
    let optionCounter = 0;

    // --- EDIT BUTTON ---
    $(document).on('click', '.edit', function () {
        const tr = $(this).closest('tr');
        const id = tr.data('id');
        
        $('#editCategoryForm').attr('action', '/admin/subcategory/' + id+'/update');
        $('#edit_category_id').val(id);
        $('#edit_name').val(tr.data('name'));
        $('#edit_image_link').attr('href', tr.data('image'));
        $('#edit_order_number').val(tr.data('order'));
        $('#edit_status').val(tr.data('status'));

        // Populate categories
        $('#edit_category_select').html('');
        @foreach ($data['categories'] as $cat)
            $('#edit_category_select').append('<option value="{{ $cat->id }}">{{ $cat->name }}</option>');
        @endforeach
        $('#edit_category_select').val(tr.data('category-id'));

        $('#editCategoryModal').modal('show');
    });

    // --- MANAGE FIELDS BUTTON ---
    $(document).on('click', '.manage-fields', function () {
        const subcategoryId = $(this).data('id');
        const subcategoryName = $(this).data('name');
        
        $('#fieldsSubcategoryName').text(subcategoryName);
        $('#fields_subcategory_id').val(subcategoryId);
        $('#fieldsContainer').html('');
        fieldCounter = 0;
        optionCounter = 0;
        
        // Load existing fields via AJAX
        loadFields(subcategoryId);
        
        $('#manageFieldsModal').modal('show');
    });

    // Load fields via AJAX
    function loadFields(subcategoryId) {
        $.ajax({
            url: '/admin/subcategory/' + subcategoryId + '/fields',
            type: 'GET',
            success: function(response) {
                $('#fieldsContainer').html('');
                if (response.fields && response.fields.length > 0) {
                    response.fields.forEach(field => {
                        addField(field);
                    });
                }
            },
            error: function(xhr) {
                console.error('Error loading fields:', xhr);
                alert('Error loading fields');
            }
        });
    }

    // --- ADD FIELD BUTTON ---
    $('#addFieldBtn').click(function () {
        addField();
    });

    // Function to add field
    function addField(fieldData = {}) {
        const fieldHtml = $('#fieldTemplate').html();
        const $field = $(fieldHtml);
        const currentFieldIndex = fieldCounter++;
        
        // Update all field input names with proper index
        $field.find('input.field-id').attr('name', `fields[${currentFieldIndex}][id]`);
        $field.find('input[name="fields[][name]"]').attr('name', `fields[${currentFieldIndex}][name]`);
        $field.find('select[name="fields[][type]"]').attr('name', `fields[${currentFieldIndex}][type]`);
        $field.find('input[name="fields[][required]"]').attr('name', `fields[${currentFieldIndex}][required]`);
        
        // Set field data - FIXED: Use proper jQuery selectors with the updated names
        if (fieldData.id) {
            $field.find(`input[name="fields[${currentFieldIndex}][id]"]`).val(fieldData.id);
        }
        if (fieldData.name) {
            $field.find(`input[name="fields[${currentFieldIndex}][name]"]`).val(fieldData.name);
        }
        if (fieldData.type) {
            $field.find(`select[name="fields[${currentFieldIndex}][type]"]`).val(fieldData.type);
        }
        if (fieldData.required) {
            $field.find(`input[name="fields[${currentFieldIndex}][required]"]`).prop('checked', true);
        }
        
        // Store the field index for options
        $field.data('field-index', currentFieldIndex);
        
        // Handle options
        if (fieldData.options && fieldData.options.length > 0) {
            fieldData.options.forEach(option => {
                addOption($field, option);
            });
        }
        
        $('#fieldsContainer').append($field);
        
        // Trigger change to show/hide options based on field type
        setTimeout(() => {
            $field.find('.field-type').trigger('change');
        }, 100);
    }

    // --- REMOVE FIELD ---
    $(document).on('click', '.remove-field', function () {
        $(this).closest('.field-row').remove();
    });

    // --- FIELD TYPE CHANGE ---
    $(document).on('change', '.field-type', function () {
        const type = $(this).val();
        const field = $(this).closest('.field-row');
        const options = field.find('.field-options');
        
        if (['select', 'radio', 'checkbox'].includes(type)) {
            options.removeClass('d-none');
            // Add one option by default if none exist
            if (field.find('.option-row').length === 0) {
                addOption(field);
            }
        } else {
            options.addClass('d-none');
        }
    });

    // --- ADD OPTION ---
    $(document).on('click', '.add-option', function () {
        const field = $(this).closest('.field-row');
        addOption(field);
    });

    // Function to add option
    function addOption(field, optionData = {}) {
        const optionHtml = $('#optionTemplate').html();
        const $option = $(optionHtml);
        const fieldIndex = field.data('field-index');
        const currentOptionIndex = optionCounter++;
        
        // Update option input names with proper indices
        $option.find('.option-label').attr('name', `fields[${fieldIndex}][options][${currentOptionIndex}][label]`);
        $option.find('.option-value').attr('name', `fields[${fieldIndex}][options][${currentOptionIndex}][value]`);
        
        if (optionData.label) {
            $option.find('.option-label').val(optionData.label);
        }
        if (optionData.value) {
            $option.find('.option-value').val(optionData.value);
        }
        
        field.find('.options-container').append($option);
    }

    // --- REMOVE OPTION ---
    $(document).on('click', '.remove-option', function () {
        $(this).closest('.option-row').remove();
    });

    // --- SUBMIT FIELDS FORM ---
    $('#manageFieldsForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        // Log form data for debugging
        for (let [key, value] of formData.entries()) {
            console.log(key + ': ' + value);
        }
        
        $.ajax({
            url: '/admin/subcategory/fields/save',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    $('#manageFieldsModal').modal('hide');
                    toastr.success(response.message, 'Success', {"positionClass": "toast-top-center"});
                } else {
                    toastr.error(response.message, 'Error', {"positionClass": "toast-top-center"});
                }
            },
            error: function(xhr) {
                console.error('Error saving fields:', xhr);
                let errorMessage = 'Error saving fields';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                toastr.error(errorMessage, 'Error', {"positionClass": "toast-top-center"});
            }
        });
    });
});
</script>
@endpush