@extends('layouts.master')
@section('title') Edit 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')
Edit
@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">Edit Item</h1>
            </div>
            <div class="card-body">
                <div class="row">
                    <form method="POST" action="{{ url('/items/update') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" value="{{encrypt($item->id)}}">
                        <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" disabled>
                                    <option value="physical" {{$item->type == \App\Models\Item::PHYSICAL ? 'selected' : ''}}>Physical Item</option>
                                    <option value="digital" {{$item->type == \App\Models\Item::DIGITAL ? 'selected' : ''}}>Digital Item</option>
                                </select>
                            </div>
                            <div class="dynamic-fields">
                              @if($item->type == \App\Models\Item::PHYSICAL)
                                <div class="col-md-12 mb-3">
                                    <label for="title" class="form-label">Title</label>
                                    <input required type="text" class="form-control" name="title" value="{{$item->title}}" placeholder="Item">
                                </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" value="{{$item->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...">{{$item->description}}</textarea>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="images" class="form-label">Images</label>
                                    <div class="d-flex flex-wrap align-items-center justify-content-start gap-3">
                                        @foreach($item->images as $image)
                                        <div class="img" style="width:30px;">
                                            <img src="{{asset("").$image->image_path}}" alt="{{$item->title}}" class="img-fluid w-100">
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="image_radio" value="merge" id="flexRadioDefault1" checked>
                                        <label class="form-check-label" for="flexRadioDefault1">
                                            Add New Images
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="image_radio" value="replace" id="flexRadioDefault2" checked>
                                        <label class="form-check-label" for="flexRadioDefault2">
                                            Replace Old Images
                                        </label>
                                    </div>

                                </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="{{$item->stock}}" min="1" required>
                                </div>
                               @else
                                <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 }}" {{$item->digital_item->id == $asset->id ? 'selected': ''}}>{{ $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" value="{{$item->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...">{{$item->description}}</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="{{$item->quantity}}" min="1" required>
                                </div>
                               @endif
                            </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 Product for Free Item</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', $item->item_quantity_for_free_item) }}" min="1">
                                </div>
                                <div id="free-items-wrapper">
                                    @foreach ($item->freeItems as $index => $freeItem)
                                        <div class="free-item-entry row mb-3">
                                            <div class="col-md-6">
                                                <select class="form-control" name="free_items[{{ $index }}][id]">
                                                    <option value="">Select an asset</option>
                                                    @foreach($assets as $freeAsset)
                                                        <option value="{{ $freeAsset->id }}" {{ $freeItem->free_item_id == $freeAsset->id ? 'selected' : '' }}>{{ $freeAsset->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <input type="number" class="form-control" name="free_items[{{ $index }}][quantity]" min="1" value="{{ $freeItem->free_item_quantity }}">
                                            </div>
                                            <div class="col-md-3">
                                                <button type="button" class="btn btn-danger remove-free-item">Remove</button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" id="add-free-item" class="btn btn-primary">Add Another Free Item</button>
                            </div>
                        </div>
                        @if($item->type == \App\Models\Item::PHYSICAL)
                        <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="{{$item->sizes[0]->size}}" 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">
                                @for($i = 1; $i < count($item->sizes); $i++)
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <input type="text" value="{{$item->sizes[$i]->size}}" class="form-control" name="size[]">
                                    </div>
                                    <div class="col-md-2 add-remove-btn">
                                        <button type="button" class="btn btn-danger w-100 remove-row">Remove</button>
                                    </div>
                                </div>
                                @endfor
                            </div>
                        </div>
                        @endif
                        <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 }}" {{$item->price->count()>0 ? $item->price[0]->digital_item_id == $asset->id ? "selected": '' : ''}}>{{ $asset->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="number" name="quantity[]" value="{{$item->price->count()>0 ? $item->price[0]->digital_item_quantity : '' }}" 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">
                                @for($i = 1; $i < count($item->price); $i++)
                                <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 }}" {{$item->price[$i]->digital_item_id == $asset->id ? "selected": ''}}>{{ $asset->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="number" name="quantity[]" value="{{$item->price[$i]->digital_item_quantity }}" min="1" class="form-control" required>
                                    </div>
                                    <div class="col-md-2 add">
                                        <button type="button" class="btn btn-danger w-100 remove-row">Remove</button>
                                    </div>
                                    <div class="col-md-2 add-remove-btn"></div>
                                </div>
                                @endfor
                            </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" value="{{$item->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="{{$item->quantity}}" 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" value="{{$item->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("");
            }else if(value=="physical"){
                fieldsCont.html(physical_asset);
                sizesCont.html(sizes);
            }
        });
    });
    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