@extends('layouts.master')
@section('css')
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--datatable responsive css-->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
        type="text/css" />
@endsection
@section('title')
    Price Slab Lists
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex phcl-flx">
                    <h4 class="card-title mb- 0 flex-grow-1">
                       Price Slab :{{  $priceSlab }} &nbsp;&nbsp;&nbsp; Unit: {{ $unit }}
                    </h4>
                     <a class="btn btn-soft-primary waves-effect waves-light" id="update-group"><i
                            class="las la-edit"></i> Update</a>
                </div>
                <div class="card-body">
                    <table id="fixed-header" class="table table-bordered dt-responsive nowrap table-striped align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="select-all-checkbox"></th>
                                <th>Item Name</th>
                                <th>Selling Price</th>
                                <th>Discount %</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

      <div id="groupUpdateModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title" id="myCenterModalLabel">
                        <h4>Update Price Slab</h4>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="btn-close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('update-price-slab') }}" method="POST" class="tablelist-form"
                        autocomplete="off" id="updatePriceSlabForm">
                        @csrf
                        <input type="hidden" name="selectedItem" id="updateGroupSelectedItem">
                         <div>
                            <input type="number" name="disc_percentage" id="disc_percentage" class="form-control" placeholder="Enter Discount %" required>
                         </div>
                        <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                            <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn w-sm btn-primary"
                                id="multi-price-update-btn">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            loadData();
        });

        function loadData() {
            var dataTable = $('#fixed-header').DataTable({
                processing: true,
                serverSide: true,
                "scrollX": true,
                autoWidth: true,
                stateSave: true,
                ordering: false,
                pageLength: 10,
                lengthMenu: [
                    [10, 50, 100, -1],
                    [10, 50, 100, "All"]
                ],
                ajax: {
                    url: '/admin/price-slab-items/{{ $price_slab_id }}/{{ $unit_id }}',
                    type: 'GET',
                },
                columns: [{
                        data: 'select',
                        name: 'select',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'item_name',
                        name: 'item_name',
                    },
                    {
                        data: 'selling_price',
                        name: 'selling_price',
                    },
                    {
                        data: 'disc_percentage',
                        name: 'disc_percentage',
                    }
                ],
            });
        };
         $('#select-all-checkbox').click(function() {
            if ($(this).is(':checked')) {
                $('input[type="checkbox"]').prop('checked', true);
            } else {
                $('input[type="checkbox"]').prop('checked', false);
            }
        });

          $('#update-group').click(function(e) {
            e.preventDefault();
            let check = $('.checkbox:checked').length;
            if (check < 1) {
                alert('Please select atleast one item.');
            } else if (check > 1000) {
                alert('Do not select more than 1000 items');
            } else {
                let selectedItem = [];
                $(".checkbox:checked").each(function() {
                    selectedItem.push($(this).data('id'));
                });
                $('#updateGroupSelectedItem').val(selectedItem);
                $("#groupUpdateModal").modal('show');
            }
        });
        $('#updatePriceSlabForm').on('submit', function(e) {
            e.preventDefault();
            var form = this;
            var url = $(form).attr('action');
            $.ajax({
                url: url,
                method: "POST",
                data: new FormData(form),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function(response) {
                    if (response.status == 'success') {
                        $('#groupUpdateModal').modal('hide');
                        $('#fixed-header').DataTable().ajax.reload();
                        $('#updatePriceSlabForm')[0].reset();
                    }
                }
            });
        })
    </script>
@endsection