@php

    $row = $data['row'];
    $subcategory  =  $data['subcategory'];
@endphp
<form action="{{ route('admin.subcategory.update', $row->id) }}" method="post" enctype="multipart/form-data">
    @csrf


    <div class="form-group">
        <label for="category_id" class="form-label">Select Sub Category </label>
        <select type="text" name="category_id" id="category_id" class="form-control select2" required
            style="width: 100%">
            @if(isset($data['categories']) && count($data['categories']) > 0)
                @foreach($data['categories'] as $key => $category)
                    <option value="{{ $category->id }}" {{ $category->id == $row->category_id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                @endforeach
            @endif
        </select>
    </div>

    <div class="form-group">
        <label for="name" class="form-label">Sub Category Name</label>
        <input type="text" name="name" id="name" value="{{ $row->name }}" class="form-control shadow-none"
            placeholder="Category name" required>
    </div>
    <div class="form-group">
        <label for="file" class="form-label">Sub Category Image <span class="text-danger">*</span> <span
                class="text-success">Recommended Size 50x50px</span> <span class="text-primary"><a target="_blank"
                    href="{{ asset($row->image) }}">[View previous image]</a></span></label>
        <input accept="image/*" type="file" name="image" id="file" class="form-control shadow-none"
            placeholder="Category name">
    </div>
    <div class="form-group">
        <label for="order_number" class="form-label">Order Number</label>
        <input type="number" name="order_number" id="order_number" value="{{ $row->order_number }}"
            class="form-control shadow-none" placeholder="Order Number" required>
    </div>
    <div class="form-group">
        <label for="status" class="form-label">Published Status</label>
        <select name="status" id="status" class="form-control shadow-none">
            <option value="1" {{ $row->status == 1 ? "selected" : "" }}>Published</option>
            <option value="0" {{ $row->status == 0 ? "selected" : "" }}>Unpublished</option>
        </select>
    </div>

    <h5>Dynamic Fields</h5>
    <div id="dynamicFieldsContainer">
        @foreach($subcategory->fields as $field)
            <div class="card mb-2 field-row">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <h6>Field</h6>
                        <button type="button" class="btn btn-danger btn-sm remove-field"><i class="fas fa-trash"></i></button>
                    </div>
                    <div class="form-group">
                        <label>Field Name</label>
                        <input type="text" name="fields[{{ $field->id }}][name]" class="form-control" value="{{ $field->name }}" required>
                    </div>
                    <div class="form-group">
                        <label>Field Type</label>
                        <select name="fields[{{ $field->id }}][type]" class="form-control field-type">
                            <option value="text" @if($field->type=='text') selected @endif>Text</option>
                            <option value="number" @if($field->type=='number') selected @endif>Number</option>
                            <option value="textarea" @if($field->type=='textarea') selected @endif>Textarea</option>
                            <option value="select" @if($field->type=='select') selected @endif>Select</option>
                            <option value="radio" @if($field->type=='radio') selected @endif>Radio</option>
                            <option value="checkbox" @if($field->type=='checkbox') selected @endif>Checkbox</option>
                        </select>
                    </div>

                    <div class="form-group field-options @if(!in_array($field->type,['select','radio','checkbox'])) d-none @endif">
                        <label>Options</label>
                        <div class="options-container">
                            @foreach($field->options as $option)
                                <div class="input-group mb-1 option-row">
                                    <input type="text" name="fields[{{ $field->id }}][options][{{ $option->id }}][label]" class="form-control" value="{{ $option->label }}" required>
                                    <input type="text" name="fields[{{ $field->id }}][options][{{ $option->id }}][value]" class="form-control" value="{{ $option->value }}" required>
                                    <button type="button" class="btn btn-danger remove-option"><i class="fas fa-trash"></i></button>
                                </div>
                            @endforeach
                        </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[{{ $field->id }}][required]" class="form-check-input" @if($field->required) checked @endif>
                        <label class="form-check-label">Required</label>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <button type="button" class="btn btn-sm btn-primary mt-2" id="addFieldBtn">Add Field</button>

    <div class="form-group float-right">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-success">Update</button>
    </div>
</form>
{{-- Hidden field template --}}
<div id="fieldTemplate" class="d-none">
    <div class="card mb-2 field-row">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <h6>Field</h6>
                <button type="button" class="btn btn-danger btn-sm remove-field"><i class="fas fa-trash"></i></button>
            </div>
            <div class="form-group">
                <label>Field Name</label>
                <input type="text" name="fields[new][name][]" class="form-control" placeholder="Field Name" required>
            </div>
            <div class="form-group">
                <label>Field Type</label>
                <select name="fields[new][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>
                </select>
            </div>
            <div class="form-group field-options d-none">
                <label>Options</label>
                <div class="options-container"></div>
                <button type="button" class="btn btn-sm btn-secondary mt-1 add-option">Add Option</button>
                <div class="option-template d-none input-group mb-1 option-row">
                    <input type="text" name="options[new][label][]" class="form-control" placeholder="Label" required>
                    <input type="text" name="options[new][value][]" class="form-control" placeholder="Value" required>
                    <button type="button" class="btn btn-danger remove-option"><i class="fas fa-trash"></i></button>
                </div>
            </div>
            <div class="form-check mt-2">
                <input type="checkbox" name="fields[new][required][]" class="form-check-input">
                <label class="form-check-label">Required</label>
            </div>
        </div>
    </div>
</div>