@extends('layouts.master')
@section('title') Add Item @endsection

@section('css')
<!-- Select2 css-->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<!-- Breadcrumb Trail -->
@component('components.breadcrumb')
@slot('li_1')
Items
@endslot
@slot('title')
Add
@endslot
@endcomponent

<!-- Session Messages -->
@include('partials.session')

<!-- Add Form -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title mb-0">Add Item</h1>
            </div>
            <div class="card-body">
                <div class="row">
                    <form method="POST" action="{{ url('/items/store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="type" class="form-label">Item Type</label>
                                <select class="form-select item-type" name="item_type">
                                    <option value="physical" selected>Physical Item</option>
                                    <option value="digital">Digital Item</option>
                                </select>
                            </div>
                            <div class="dynamic-fields">
                                <div class="col-md-12 mb-3">
                                    <label for="title" class="form-label">Title</label>
                                    <input required type="text" class="form-control" name="title" placeholder="Item" required>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="label" class="form-label">Label</label>
                                    <input type="text" class="form-control" name="label" placeholder="Label">
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea name="description" id="description" class="form-control" cols="30" rows="10" placeholder="lorem ipsum dolor sit..."></textarea>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="images" class="form-label">Images</label>
                                    <input type="file" class="form-control" name="images[]" id="images" multiple required>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="stock" class="form-label">Stock Available</label>
                                    <input type="number" class="form-control" name="stock" id="stock" value="1" min="1" required>
                                </div>
                            </div>
                            {{-- <div class="col-md-12 mb-3">
                                <label for="main_quantity" class="form-label">Quantity</label>
                                <input type="number" class="form-control" name="main_quantity" id="main_quantity" value="1" min="1" required>
                            </div> --}}
                        </div>
                        <hr>
                        <h5>Free Item Details</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Free Items</label>
                                <div class="col-md-6 form-group mb-3">
                                    <label for="item_quantity_for_free_item" class="form-label">Quantity of the product required to receive free items</label>
                                    <input type="number" class="form-control" name="item_quantity_for_free_item" id="item_quantity_for_free_item" value="{{ old('item_quantity_for_free_item') ?? 1  }}" min="1">
                                </div>
                                <div id="free-items-wrapper">
                                    <div class="free-item-entry row mb-3">
                                        <div class="col-md-6">
                                            <select class="form-control" name="free_items[0][id]">
                                                <option value="">Select an asset</option>
                                                @foreach($assets as $asset)
                                                    <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="number" class="form-control" name="free_items[0][quantity]" min="1" value="1">
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button" class="btn btn-danger remove-free-item">Remove</button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" id="add-free-item" class="btn btn-primary">Add Another Free Item</button>
                            </div>
                        </div>
                        <div class="row mb-2 sizes top-parent">
                            <div class="col-md-12">
                                <hr>
                                <h5>Sizes</h5>
                                <hr>
                            </div>
                            <div class="col-md-12 duplicatable">
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <input type="text" value="Default" class="form-control" name="size[]">
                                    </div>
                                    <div class="col-md-2 add">
                                        <button class="btn btn-primary add-more w-100">Add More</button>
                                    </div>
                                    <div class="col-md-2 add-remove-btn"></div>
                                </div>
                            </div>
                            <div class="duplicated"></div>
                        </div>
                        <div class="row mb-2 price top-parent">
                            <div class="col-md-12">
                                <hr>
                                <h5>Price</h5>
                                <hr>
                            </div>
                            <div class="col-md-12 duplicatable">
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <select class="form-select" name="asset_item[]" required>
                                            <option value="">Select an asset</option>
                                            @foreach($assets as $asset)
                                                <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="number" name="quantity[]" value="1" min="1" class="form-control so-mt-2" required>
                                    </div>
                                    <div class="col-md-2 add">
                                        <button class="btn btn-primary add-more w-100">Add More</button>
                                    </div>
                                    <div class="col-md-2 add-remove-btn"></div>
                                </div>
                            </div>
                            <div class="duplicated"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 form-group mb-2">
                                <a style="margin-right:3px;" href="{{ url('items/list') }}" class="btn btn-danger btn-sm">Cancel</a>
                                <input type="submit" class="btn btn-success btn-sm">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Select2 cdn -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ URL::asset('assets/js/pages/select2.init.js') }}"></script>
<!-- Input Mask -->
<script src="{{ URL::asset('assets/libs/cleave.js/cleave.js.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/pages/form-masks.init.js') }}"></script>
<!-- App JS -->
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>

<script>
    $(function () {
        $(document).on('click','.add-more', function (e) {
            e.preventDefault();
            let cloneDiv = $(this).closest('.duplicatable').clone();
            cloneDiv.find('.add-remove-btn').append(`<button type="button" class="btn btn-danger w-100 remove-row">Remove</button>`);
            cloneDiv.find('input[type="text"]').val('');
            cloneDiv.find('.add').remove();
            let parent = $(this).closest('.top-parent');
            parent.find('.duplicated').append(cloneDiv);
        });
        $(document).on('click','.remove-row', function (e) {
            let row = $(this).closest('.row');
            row.remove();
        });
        let sizes = `
            <div class="col-md-12">
                                <hr>
                                <h5>Sizes</h5>
                                <hr>
                            </div>
                            <div class="col-md-12 duplicatable">
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <input type="text" value="Default" class="form-control" name="size[]">
                                    </div>
                                    <div class="col-md-2 add">
                                        <button class="btn btn-primary add-more w-100">Add More</button>
                                    </div>
                                    <div class="col-md-2 add-remove-btn"></div>
                                </div>
            </div>
            <div class="duplicated"></div>
        `;
        let digital_asset = `
            <div class="col-md-12 mb-3">
                <label for="asset" class="form-label">Asset</label>
                    <select class="form-select" name="digital_item" id="asset" required>
                        <option value="">Select an asset</option>
                        @foreach($assets as $asset)
                            <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                        @endforeach
                    </select>
            </div>
             <div class="col-md-12 mb-3">
                                    <label for="label" class="form-label">Label</label>
                                    <input type="text" class="form-control" name="label" placeholder="Label">
                                </div>
            <div class="col-md-12 mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea name="description" id="description" class="form-control" cols="30" rows="10" placeholder="lorem ipsum dolor sit..."></textarea>
            </div>
            <div class="col-md-12 mb-3">
                <label for="main_quantity" class="form-label">User will get</label>
                <input type="number" class="form-control" name="main_quantity" id="main_quantity" value="1" min="1" required>
            </div>
        `;
        let physical_asset = `
            <div class="col-md-12 mb-3">
                <label for="title" class="form-label">Title</label>
                <input required type="text" class="form-control" name="title" placeholder="Item" required>
            </div>
             <div class="col-md-12 mb-3">
                                    <label for="label" class="form-label">Label</label>
                                    <input type="text" class="form-control" name="label" placeholder="Label">
                                </div>
            <div class="col-md-12 mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea name="description" id="description" class="form-control" cols="30" rows="10" placeholder="lorem ipsum dolor sit..."></textarea>
            </div>
            <div class="col-md-12 mb-3">
                <label for="images" class="form-label">Images</label>
                <input type="file" class="form-control" name="images[]" id="images" multiple>
            </div>
            <div class="col-md-12 mb-3">
                <label for="stock" class="form-label">Stock Available</label>
                <input type="number" class="form-control" name="stock" id="stock" value="1" min="1" required>
            </div>
        `;
        $(document).on('change', '.item-type', function (e) {
            e.preventDefault();
            let value = $(this).val();
            let fieldsCont = $('.dynamic-fields');
            let sizesCont = $('.sizes');
            console.log(value);
            if(value=="digital"){
                fieldsCont.html(digital_asset);
                sizesCont.html("");
                let styles = {
                    'background-color': '#eff2f7',
                    'pointer-events': 'none'
                };
                let element = document.getElementById('item_quantity_for_free_item');
                if (element) {
                    for (let property in styles) {
                        element.style[property] = styles[property];
                    }
                }

            }else if(value=="physical"){
                fieldsCont.html(physical_asset);
                sizesCont.html(sizes);

                let element = document.getElementById('item_quantity_for_free_item');
                if (element) {
                    element.style.backgroundColor = '';
                    element.style.pointerEvents = '';
                }
            }
        });
    });
    let freeItemIndex = 1;
    document.getElementById('add-free-item').addEventListener('click', function() {
    let wrapper = document.getElementById('free-items-wrapper');
    let newEntry = document.createElement('div');
    newEntry.classList.add('free-item-entry', 'row', 'mb-3');
    newEntry.innerHTML = `
            <div class="col-md-6">
                <select class="form-control" name="free_items[${freeItemIndex}][id]">
                    <option value="">Select an asset</option>
                    @foreach($assets as $asset)
    <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                    @endforeach
    </select>
</div>
<div class="col-md-3">
    <input type="number" class="form-control" name="free_items[${freeItemIndex}][quantity]" min="1" value="1">
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-danger remove-free-item">Remove</button>
            </div>
        `;
    wrapper.appendChild(newEntry);
    freeItemIndex++;
});

document.addEventListener('click', function(event) {
    if (event.target.classList.contains('remove-free-item')) {
        event.target.closest('.free-item-entry').remove();
    }
});
</script>
@endsection