@extends('admin.layouts.app')

@section('content')

    <style>
        .modal { background: rgba(000, 000, 000, 0.8); min-height:1000000px; }
        .modal-dialog {
            top: 30vh;
        }
    </style>

    <div class="container-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Product Bundle</h2>
                                    <p>Create New Product Bundle</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="POST" class="needs-validation" id="form-data" name="form-data" novalidate>
                            {{ csrf_field() }}

                            <div class="form-group">
                                <label class="form-label" for="product_category_id">Category</label>
                                <select class="form-select" id="product_category_id" name="product_category_id" required>
                                    <option value="" hidden>Select Category</option>
                                    @foreach ($product_category as $row)
                                        <option value="{{$row['id']}}">{{$row['name']}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Name</label>
                                <input class="form-control" type="text" id="name" name="name" value="" placeholder="Enter Name" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="description">Description</label>
                                <textarea class="form-control" id="content" name="content" rows="3" placeholder="Enter Description / Spesification"></textarea>
                                <textarea class="form-control" id="description" name="description" rows="3" placeholder="Enter Description" style="display: none"></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="unit">Satuan</label>
                                <input class="form-control" type="text" id="unit" name="unit" value="" placeholder="Enter Satuan, module / unit" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="time_period">Time Period</label>
                                <input class="form-control" type="text" id="time_period" name="time_period" value="" placeholder="Enter Time Period, Contract / Shipping" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="price">Price</label>
                                <input class="form-control" type="number" id="price" name="price" value="" placeholder="Enter Price" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="item">Item</label>
                                <br>
                                <button onclick="addItem()" type="button" class="btn btn-success btn-sm" style="margin-bottom: 10px">
                                    <svg class="icon-24" width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.33 2H16.66C20.06 2 22 3.92 22 7.33V16.67C22 20.06 20.07 22 16.67 22H7.33C3.92 22 2 20.06 2 16.67V7.33C2 3.92 3.92 2 7.33 2ZM12.82 12.83H15.66C16.12 12.82 16.49 12.45 16.49 11.99C16.49 11.53 16.12 11.16 15.66 11.16H12.82V8.34C12.82 7.88 12.45 7.51 11.99 7.51C11.53 7.51 11.16 7.88 11.16 8.34V11.16H8.33C8.11 11.16 7.9 11.25 7.74 11.4C7.59 11.56 7.5 11.769 7.5 11.99C7.5 12.45 7.87 12.82 8.33 12.83H11.16V15.66C11.16 16.12 11.53 16.49 11.99 16.49C12.45 16.49 12.82 16.12 12.82 15.66V12.83Z" fill="currentColor"></path>
                                    </svg>
                                    <span>Tambah Item</span>
                                </button>
                                <table id="product_bundle_item" class="table table-striped  ">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Product Single</th>
                                            <th>Harga</th>
                                            <th>Quantity</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="item_1">
                                            <td>
                                                <a onclick="selectedItem(1)" data-bs-toggle="modal" data-bs-target="#exampleModal" style="cursor: pointer">
                                                    <svg class="icon-32" width="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 10.6699C2 5.88166 5.84034 2 10.5776 2C12.8526 2 15.0343 2.91344 16.6429 4.53936C18.2516 6.16529 19.1553 8.37052 19.1553 10.6699C19.1553 15.4582 15.3149 19.3399 10.5776 19.3399C5.84034 19.3399 2 15.4582 2 10.6699ZM19.0134 17.6543L21.568 19.7164H21.6124C22.1292 20.2388 22.1292 21.0858 21.6124 21.6082C21.0955 22.1306 20.2576 22.1306 19.7407 21.6082L17.6207 19.1785C17.4203 18.9766 17.3076 18.7024 17.3076 18.4164C17.3076 18.1304 17.4203 17.8562 17.6207 17.6543C18.0072 17.2704 18.6268 17.2704 19.0134 17.6543Z" fill="#079aa2"></path>
                                                    </svg>
                                                </a>
                                                <a onclick="removeItem(1)" style="cursor: pointer" >
                                                    <svg class="icon-32" width="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2871 5.24297C20.6761 5.24297 21 5.56596 21 5.97696V6.35696C21 6.75795 20.6761 7.09095 20.2871 7.09095H3.71385C3.32386 7.09095 3 6.75795 3 6.35696V5.97696C3 5.56596 3.32386 5.24297 3.71385 5.24297H6.62957C7.22185 5.24297 7.7373 4.82197 7.87054 4.22798L8.02323 3.54598C8.26054 2.61699 9.0415 2 9.93527 2H14.0647C14.9488 2 15.7385 2.61699 15.967 3.49699L16.1304 4.22698C16.2627 4.82197 16.7781 5.24297 17.3714 5.24297H20.2871ZM18.8058 19.134C19.1102 16.2971 19.6432 9.55712 19.6432 9.48913C19.6626 9.28313 19.5955 9.08813 19.4623 8.93113C19.3193 8.78413 19.1384 8.69713 18.9391 8.69713H5.06852C4.86818 8.69713 4.67756 8.78413 4.54529 8.93113C4.41108 9.08813 4.34494 9.28313 4.35467 9.48913C4.35646 9.50162 4.37558 9.73903 4.40755 10.1359C4.54958 11.8992 4.94517 16.8102 5.20079 19.134C5.38168 20.846 6.50498 21.922 8.13206 21.961C9.38763 21.99 10.6811 22 12.0038 22C13.2496 22 14.5149 21.99 15.8094 21.961C17.4929 21.932 18.6152 20.875 18.8058 19.134Z" fill="#c03221"></path>
                                                    </svg>
                                                </a>
                                            </td>
                                            <td>
                                                <input class="form-control" type="hidden" id="product_single_id_1" name="product_single_id[]" value="" placeholder="Product Single" readonly="true" style="background-color: #eee;" required>
                                                <input class="form-control" type="text" id="product_single_name_1" name="product_single_name[]" value="" placeholder="Product Single" readonly="true" style="background-color: #eee;" required>
                                            </td>
                                            <td><input class="form-control" type="text" id="product_single_price_1" name="product_single_price[]" value="" placeholder="Harga" readonly="true" style="background-color: #eee;" required></td>
                                            <td><input class="form-control" type="number" id="quantity_1" name="quantity[]" value="" placeholder="Quantity" required></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="notes">Notes</label>
                                <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Enter Notes"></textarea>
                            </div>

                            <div class="form-group">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active">
                                    <label class="form-check-label" for="is_active">Active Status</label>
                                </div>
                            </div>

                            <br><br>
                            <button type="submit" class="btn btn-success">Submit</button>
                            <a href="{{ URL::previous() }}" class="btn btn-danger">Cancel</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-xl" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Pilih Product Single</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Category</th>
                                <th>Name</th>
                                <th>Unit</th>
                                <th>Time Period</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($product_single as $row)
                            <tr>
                                <td><button type="button" class="btn btn-sm btn-info" onclick="chooseItem('{{$row['id']}}', '{{$row['name']}}', '{{$row['price']}}')">Pilih Product</button></td>
                                <td>{{$row['product_category_name']}}</td>
                                <td>{{$row['name']}}</td>
                                <td>{{$row['unit']}}</td>
                                <td>{{$row['time_period']}}</td>
                                <td>{{\App\Helpers\AppHelper::instance()->convertRupiah($row['price'])}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>

        var numrow = 1;
        var selected_popoup_id = 1;

        function addItem() {
            numrow += 1;

            var cell1_value = '<td>';
            cell1_value += '    <a onclick="selectedItem('+numrow+')" data-bs-toggle="modal" data-bs-target="#exampleModal" style="cursor: pointer">';
            cell1_value += '        <svg class="icon-32" width="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">';
            cell1_value += '            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 10.6699C2 5.88166 5.84034 2 10.5776 2C12.8526 2 15.0343 2.91344 16.6429 4.53936C18.2516 6.16529 19.1553 8.37052 19.1553 10.6699C19.1553 15.4582 15.3149 19.3399 10.5776 19.3399C5.84034 19.3399 2 15.4582 2 10.6699ZM19.0134 17.6543L21.568 19.7164H21.6124C22.1292 20.2388 22.1292 21.0858 21.6124 21.6082C21.0955 22.1306 20.2576 22.1306 19.7407 21.6082L17.6207 19.1785C17.4203 18.9766 17.3076 18.7024 17.3076 18.4164C17.3076 18.1304 17.4203 17.8562 17.6207 17.6543C18.0072 17.2704 18.6268 17.2704 19.0134 17.6543Z" fill="#079aa2"></path>';
            cell1_value += '        </svg>';
            cell1_value += '    </a>';
            cell1_value += '    <a onclick="removeItem('+numrow+')" style="cursor: pointer" >';
            cell1_value += '        <svg class="icon-32" width="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">';
            cell1_value += '            <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2871 5.24297C20.6761 5.24297 21 5.56596 21 5.97696V6.35696C21 6.75795 20.6761 7.09095 20.2871 7.09095H3.71385C3.32386 7.09095 3 6.75795 3 6.35696V5.97696C3 5.56596 3.32386 5.24297 3.71385 5.24297H6.62957C7.22185 5.24297 7.7373 4.82197 7.87054 4.22798L8.02323 3.54598C8.26054 2.61699 9.0415 2 9.93527 2H14.0647C14.9488 2 15.7385 2.61699 15.967 3.49699L16.1304 4.22698C16.2627 4.82197 16.7781 5.24297 17.3714 5.24297H20.2871ZM18.8058 19.134C19.1102 16.2971 19.6432 9.55712 19.6432 9.48913C19.6626 9.28313 19.5955 9.08813 19.4623 8.93113C19.3193 8.78413 19.1384 8.69713 18.9391 8.69713H5.06852C4.86818 8.69713 4.67756 8.78413 4.54529 8.93113C4.41108 9.08813 4.34494 9.28313 4.35467 9.48913C4.35646 9.50162 4.37558 9.73903 4.40755 10.1359C4.54958 11.8992 4.94517 16.8102 5.20079 19.134C5.38168 20.846 6.50498 21.922 8.13206 21.961C9.38763 21.99 10.6811 22 12.0038 22C13.2496 22 14.5149 21.99 15.8094 21.961C17.4929 21.932 18.6152 20.875 18.8058 19.134Z" fill="#c03221"></path>';
            cell1_value += '        </svg>';
            cell1_value += '    </a> ';
            cell1_value += '</td> ';

            var cell2_value = '<td>';
            cell2_value += '    <input class="form-control" type="hidden" id="product_single_id_'+numrow+'" name="product_single_id[]" value="" placeholder="Product Single" readonly="true" style="background-color: #eee;" required>';
            cell2_value += '    <input class="form-control" type="text" id="product_single_name_'+numrow+'" name="product_single_name[]" value="" placeholder="Product Single" readonly="true" style="background-color: #eee;" required>';
            cell2_value += '</td>';

            var cell3_value = '<td>';
            cell3_value += '    <input class="form-control" type="text" id="product_single_price_'+numrow+'" name="product_single_price[]" value="" placeholder="Harga" readonly="true" style="background-color: #eee;" required>';
            cell3_value += '</td>';

            var cell4_value = '<td>';
            cell4_value += '    <input class="form-control" type="number" id="quantity_'+numrow+'" name="quantity[]" value="" placeholder="Quantity" required>';
            cell4_value += '</td>';

            var row_value = '<tr id="item_'+numrow+'">';
            row_value += cell1_value + cell2_value + cell3_value + cell4_value;
            row_value += '</tr>';

            $('#product_bundle_item').find('tbody').append(row_value);
        }

        function selectedItem(i) {
            selected_popoup_id = i;
        }

        function removeItem(i) {
            var row = document.getElementById('item_' + i);
            row.parentElement.removeChild(row);

        }
        function chooseItem(id, name, price) {
            document.getElementById("product_single_id_"+selected_popoup_id).value = id;
            document.getElementById("product_single_name_"+selected_popoup_id).value = name;
            document.getElementById("product_single_price_"+selected_popoup_id).value = price;
            $('#exampleModal').modal('hide');
        }


        // handle wysiwyg
        tinymce.init({
            selector: 'textarea#content',
            plugins: 'code table lists',
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image responsivefilemanager | print preview media | forecolor backcolor emoticons | codesample",
            promotion: false,
            setup:function(ed) {
                ed.on('change', function(e) {
                    $('#description').val(ed.getContent());
                });
            }
        });

        // Handle post
        $('#form-data').submit(function (e) {
            e.preventDefault();

            if ($(this).valid()) {
                var form = $("#form-data").serializeArray();
                var formdata = {};
                $.map(form, function (n, i) {
                    formdata[n['name']] = n['value'];
                });
                delete formdata['product_single_id[]'];
                delete formdata['product_single_name[]'];
                delete formdata['product_single_price[]'];
                delete formdata['quantity[]'];
                var product_single_id = $('input[name="product_single_id[]"]').map(function () {
                    return this.value;
                }).get();
                var quantity = $('input[name="quantity[]"]').map(function () {
                    return this.value;
                }).get();
                formdata['product_single_id'] = product_single_id;
                formdata['quantity'] = quantity;

                formdata['is_active'] = $('#is_active').is(':checked') ? 1 : 0;

                $.ajaxSetup({
                    headers:{
                        'Authorization': "Bearer {{$session_token}}"
                    }
                });

                $.ajax({
                    url: '/api/product_bundle',
                    type: "POST",
                    data: JSON.stringify(formdata),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if (result['success'] == true) {
                            Swal.fire({
                                icon: "success",
                                title: "Success",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            }).then((result) => {
                                window.location.replace("{{ url('/admin/product_bundle') }}");
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            });
                        }
                    }
                });
            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }
        });
    </script>
@endsection