@include('admin.layouts.header')
<div class="col-sm-9 col-md-10">
    <div class="content">

        <div class="panel panel-default">
            <div class="panel-heading"><strong>Items Table</strong></div>
            <div class="panel-body">
                
                <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="mb-3 text-right">
                                        <button class="btn btn-success" id="createNewItem">
                        <i class="fa fa-plus"></i> Create New Item
                    </button>
                </div>
                <br>

                <table class="table table-bordered table-striped data-table">
                    <thead>
                        <tr class="text-center">
                            <th>No</th>
                            <th>Image</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>Delivery Price</th>
                            <th>Type</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

            </div>
        </div>

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="ajaxItemModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="panel panel-default">

                <div class="panel-heading clearfix">
                    <h4 class="modal-title pull-left" id="itemModalHeading"></h4>
                    <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="panel-body">
                    <form id="itemForm" name="itemForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="item_id" id="item_id">

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Type</label>
                                    <select name="type" id="type" class="form-control">
                                        <option value="0">Link</option>
                                        <option value="1">Final</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" name="item_name" id="item_name" class="form-control" placeholder="Enter item name">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Image</label>
                                    <input type="file" name="item_image" id="item_image" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Price</label>
                                    <input type="number" value="0" step="0.01" name="item_price" id="item_price" class="form-control" placeholder="Enter price">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Delivery Price</label>
                                    <input type="number" value="0" step="0.01" name="item_delivery_price" id="item_delivery_price" class="form-control" placeholder="Enter delivery price">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Parent ID</label>
                                    <input readonly type="number" value="{{$parent}}" name="parent_id" id="parent_id" class="form-control" placeholder="Enter parent ID">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-success btn-lg btn-block" id="saveBtn">
                                    <i class="fa fa-save"></i> Save Item
                                </button>
                            </div>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    function togglePriceFields() {
        var type = $('#type').val();
        if (type == "0") {
            $('#item_price').val('').prop('readonly', true);
            $('#item_delivery_price').val('').prop('readonly', true);
        } else {
            $('#item_price').prop('readonly', false);
            $('#item_delivery_price').prop('readonly', false);
        }
    }

    $('#type').change(togglePriceFields);
    $('#createNewItem').click(togglePriceFields);
    $('body').on('click', '.edit', function () { setTimeout(togglePriceFields, 100); });

    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.items.index') }}?parent={{ $parent }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', className: "text-center"},
            {data: 'item_image', name: 'item_image', className: "text-center"},
            {data: 'item_name', name: 'item_name'},
            {
                data: 'item_price',
                name: 'item_price',
                render: function(data, type, row) {
                    return (data == 0 || data === null || data === '') ? '<font color="red">❌</font>' : data;
                }
            },
            {
                data: 'item_delivery_price',
                name: 'item_delivery_price',
                render: function(data, type, row) {
                    return (data == 0 || data === null || data === '') ? '<font color="red">❌</font>' : data;
                }
            },
            {data: 'type', name: 'type', className: "text-center"},
            {data: 'action', name: 'action', orderable: false, searchable: false, className: "text-center"},
        ],
        columnDefs: [{ targets: '_all', defaultContent: '' }]
    });

    $('#createNewItem').click(function () {
        $('#saveBtn').html('<i class="fa fa-save"></i> Save Item').val("create-item");
        $('#item_id').val('');
        $('#itemForm').trigger("reset");
        $('#itemModalHeading').html("Create New Item");
        $('#ajaxItemModal').modal('show');
    });

    $('body').on('click', '.edit', function () {
        var item_id = $(this).data('id');
        $.get("items/"+item_id+"/edit", function (data) {
            $('#itemModalHeading').html("Edit Item");
            $('#saveBtn').html('<i class="fa fa-save"></i> Update Item').val("edit-item");
            $('#ajaxItemModal').modal('show');
            $('#item_id').val(data.id);
            $('#item_name').val(data.item_name);
            $('#item_price').val(data.item_price);
            $('#item_delivery_price').val(data.item_delivery_price);
            $('#parent_id').val(data.parent_id);
            $('#type').val(data.type);
        });
    });

    $('#itemForm').on('submit', function(e) {
        e.preventDefault();
        $('#saveBtn').html('<i class="fa fa-spinner fa-spin"></i> Saving...').attr("disabled", true);
        var formData = new FormData(this);
        $.ajax({
            data: formData,
            url: "{{ route('admin.items.store') }}",
            type: "POST",
            contentType: false,
            processData: false,
            success: function (data) {
                $('#itemForm').trigger("reset");
                $('#ajaxItemModal').modal('hide');
                $('#saveBtn').html('<i class="fa fa-save"></i> Save Item').attr("disabled", false);
                table.draw();
            },
            error: function (data) {
                console.log('Error:', data);
                $('#saveBtn').html('<i class="fa fa-save"></i> Save Item').attr("disabled", false);
            }
        });
    });

    $('body').on('click', '.delete', function () {
        var item_id = $(this).data("id");
        if(confirm("Are you sure want to delete!")){
            $.ajax({
                type: "DELETE",
                url: "items/"+item_id,
                data: {_token: "{{ csrf_token() }}"},
                success: function (data) { table.draw(); },
                error: function (data) { console.log('Error:', data); }
            });
        }
    });
});
</script>

@include('admin.layouts.footer')