@extends('layouts.app')
@push('style')
    <style>
        #selected_product tbody {
            display: block;
            max-height: 300px;
            overflow-y: auto;
        }

        #selected_product thead,
        #selected_product tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        #selected_product th,
        #selected_product td {
            text-align: left;
            vertical-align: middle;
        }
    </style>
@endpush
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'Product > Create Discount';
                        $page_number = 1;
                    @endphp
                    @include('layouts.table_top')
                </div>
                <div class="col-md-12">
                    <div class="left-card">
                        <div class="table-fixed-head table-responsive">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table">
                                        <thead>
                                            <th><input type="checkbox" id="selectall"></th>
                                            <th width="1%">@lang('SL')</th>
                                            <th>@lang('Code')</th>
                                            <th>@lang('Name')</th>
                                            <th><button class="btn btn-sm btn-primary" id="move_product"
                                                    style="width:100%;">Move</button></th>
                                        </thead>

                                        <tbody id="product_data">
                                            @foreach ($products as $product)
                                                <tr>
                                                    <td><input type="checkbox" class="product_select"></td>
                                                    <td>{{ $loop->index + 1 }}
                                                        <input type="hidden" name="product_id[]" class="product_id"
                                                            value="{{ $product->id }}">
                                                    </td>
                                                    <td>{{ $product->product_code }}</td>
                                                    <td colspan="2">{{ $product->name }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div class="col-md-6">
                                    <form action="{{ route('discount.store') }}" method="post" id="ajax_form_data">
                                        @csrf
                                        <table class="table" id="selected_product">
                                            <thead>
                                                <tr>
                                                    <td colspan="4">
                                                        <div class="form-group mb-2">
                                                            <select name="discount_type_id" id="discount_type_id"
                                                                class="form-control">
                                                                <option value="">Select Type</option>
                                                                @foreach ($discount_types as $type)
                                                                    <option value="{{ $type->id }}">{{ $type->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button type="submit" class="btn btn-primary"
                                                            style="width: 100%;">Submit</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th width="1%">@lang('SL')</th>
                                                    <th>@lang('Code')</th>
                                                    <th colspan="2">@lang('Name')</th>
                                                    <th>@lang('Action')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            // Select all or deselect all checkboxes
            $('#selectall').click(function() {
                $('.product_select').prop('checked', this.checked);
            });

            // Function to move the selected product row
            function moveSelectedProduct(row) {
                var originalRow = row.closest('tr');
                var clonedRow = originalRow.clone(); // Clone the selected row
                var productId = clonedRow.find('.product_id').val(); // Get the product ID
                // Remove the checkbox column from the cloned row
                clonedRow.find('td:first').remove();
                // Add a remove button to the cloned row
                clonedRow.append(
                    `<td><button class="btn btn-sm remove-row"><i class="bi bi-x"></i></button></td>`
                );
                // Append the modified row to the selected products table
                $('#selected_product tbody').append(clonedRow);
                // Disable the checkbox in the original row to prevent duplicate selection
                originalRow.find('.product_select').prop('checked', false).attr('disabled', true);
            }

            // Move products when "Move" button is clicked
            $("#move_product").click(function() {
                $('.product_select:checked').each(function() {
                    moveSelectedProduct($(this));
                });
            });
            // Move products when a checkbox is clicked
            $(document).on('change', '.product_select', function() {
                if (this.checked) {
                    moveSelectedProduct($(this));
                }
            });
            // Remove row from the selected table
            $(document).on('click', '.remove-row', function() {
                var row = $(this).closest('tr');
                var productId = row.find('.product_id').val();

                // Enable the checkbox in the original table corresponding to this product
                $(`.product_id[value="${productId}"]`).closest('tr').find('.product_select')
                    .prop('disabled', false).prop('checked', false);

                row.remove(); // Remove the row from the selected table
            });
        });
    </script>
@endpush