@extends('adminlte::page')
@section('content')
@section('css')
<style>
    .contain {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 15px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default radio button */
    .contain input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    /* Create a custom radio button */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 17px !important;
        width: 17px !important;
        background-color: #eee;
        border-radius: 50%;
    }

    /* On mouse-over, add a grey background color */
    .contain:hover input~.checkmark {
        background-color: #ccc;
    }

    /* When the radio button is checked, add a blue background */
    .contain input:checked~.checkmark {
        background-color: #2196F3;
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .contain input:checked~.checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .contain .checkmark::after {
        top: 4px;
        left: 4px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background:
            white;
    }
</style>
@stop
<?php

use Illuminate\Support\Facades\Session;

Fun::lang() ?>
<?php $total = 0 ?>
<div class="page">
    <div class="ajax-alert">
        @if ($message = Session::get('success'))
        <div class="alert-message alert-success">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-check"></i>
            <h3>Success</h3>
            <p>{{$message}}</p>
        </div>
        @endif
        @if ($message = Session::get('danger'))
        <div class="alert-message alert-danger">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-exclamation-triangle"></i>
            <h3>Errors</h3>
            <p>{{$message}}</p>
        </div>
        @endif

        @if ($message = Session::get('warning'))
        <div class="alert-message alert-warning">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-exclamation-triangle"></i>
            <h3>Warning</h3>
            <p>{{$message}}</p>
        </div>
        @endif
    </div>
    <div class="top-content">
        <div class="row pos">
            <div class="col-sm-12 col-xs-12">
                <div class="pull-left">
                    <h3>Edit Transfer Item To Inventory</h3>
                </div>
                <div class="pull-right">
                    <div class="button-pos">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box-body">
        <div class="pos">
            <div class="row">
                <form action="{{route('inventory_stock.update',$inventory->id)}}" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="col-sm-12">
                        <div class="header" style="margin-bottom: 50px">
                            <center>
                                <h3>{{$inventory->inv_name}}</h3>
                            </center>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div id="item_list">
                            @include('administrator.inventory.inventory-stock.result-edit')
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <button type="submit" class="btn btn-info pull-right"><i class="fa fa-save"></i> UPDATE</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .thumbnail {
        display: block;
        padding: 0px !important;
        margin-bottom: 15px !important;
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        -webkit-transition: border .2s ease-in-out;
        -o-transition: border .2s ease-in-out;
        transition: border .2s ease-in-out;
    }

    .h4,
    .h5,
    .h6,
    h4,
    h5,
    h6 {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .btn-block-item-,
    .btn-unblock-item- {
        margin-top: 2px !important;
    }
</style>
@endsection @section('js')
<script type="text/javascript">
    $(window).on('hashchange', function() {
        if (window.location.hash) {
            var page = window.location.hash.replace('#', '');
            if (page == Number.NaN || page <= 0) {
                return false;
            } else {
                getData(page);
            }
        }
    });
    $(document).ready(function() {
        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();
            $('li').removeClass('active');
            $(this).parent('li').addClass('active');
            var myurl = $(this).attr('href');
            var page = $(this).attr('href').split('page=')[1];
            getData(page);
        });
    });

    function getData(page) {
        $.ajax({
            url: '?page=' + page,
            type: "get",
            datatype: "html"
        }).done(function(data) {
            $("#item_list").empty().html(data);
            location.hash = page;
        }).fail(function(jqXHR, ajaxOptions, thrownError) {
            alert('No response from server');
        });
    }

    $(document).on('click', '.btn-block-item', function() {
        var e = $(this);
        var id = e.data('id');

        var route = "{{route('block.item-stock')}}";
        $('#block-period').modal('show');
        $('.btn-submit-block-period').on('click', function() {
            $('#block-period').modal('hide');
            var option = $('input[name=block-period]:checked').val();
            if (option != "") {
                $.ajax({
                    type: 'POST',
                    url: route,
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        option: option
                    },
                    dataType: 'json',
                    success: function(data) {
                        e.closest('.pos-item').remove();
                        $('#block-period').modal('hide');
                    }
                });
            } else {
                alert("No Selectd Hour");
            }
        });
    });

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('#add').click(function() {
            $('#addnew').modal('show');
            $('#addForm')[0].reset();
        });
        $('#addForm').on('submit', function(e) {
            e.preventDefault();
            var form = $(this).serialize();
            var url = $(this).attr('action');
            $.ajax({
                type: 'POST',
                url: url,
                data: form,
                dataType: 'json',
                success: function() {
                    $('#addnew').modal('hide');
                    get_new_client();
                }
            });
        });
    });

    function get_new_client() {
        $('#client_id').empty();
        $.ajax({
            type: 'GET',
            url: "{{route('pos-get-new-client')}}",
            dataType: 'json',
            success: function(data) {
                $.each(data, function(index, element) {
                    $("#client_id").append('<option value="' + element.id + '">' + element.client_fullname + '</option>');
                });
            }
        });
    }

    function fun_pay() {
        $("#item_list").hide();
        $("#form-pay").show();

        var total = $("input[name=total]").val();
        $("input[name=total_amount]").val(total);
        document.getElementById('total_amount').innerHTML = total;
    }

    function fun_back() {
        $("#item_list").show();
        $("#form-pay").hide();
    }
    $(document).on('click', '.btn-remove-from-cart-transfer,.remove-from-cart', function(e) {
        e.preventDefault();
        var ele = $(this);
        var id = $(this).data('id');
        var element = $('.btn-remove-from-cart-transfer[data-id="' + id + '"]');
        console.log($('.btn-remove-from-cart-transfer[data-id="' + id + '"]'));
        var button = `<p class="btn-holder"><a href="#" data-id = "${ele.attr("data-id")}" class="btn btn-default   btn-block text-center btn-add-to-cart-transfer" role="button">Remove From Inventory</a> </p>`;
        if (confirm("Are you sure")) {
            $.ajax({
                url: "{{route('remove-from-remove-cart-inventory')}}",
                method: "DELETE",
                data: {
                    _token: '{{ csrf_token() }}',
                    id: ele.attr("data-id")
                },
                success: function(response) {
                    element.parent().empty().append(button);
                    get_cart();
                }
            });
        }
    });
    $(document).on('click', '.btn-add-to-cart-transfer', function() {
        var e = $(this);
        var id = $(this).data('id');
        var button = `<p class="btn-holder"><a href="#" data-id = "${id}" class="btn btn-danger btn-block text-center btn-remove-added-cart btn-remove-from-cart-transfer" role="button">Added To Remove</a> </p>`;
        var route = "{{route('add-to-remove-cart-inventory',':id')}}";
        route = route.replace(":id", id);

        $.ajax({
            type: 'GET',
            url: route,
            dataType: 'json',
            data: {
                'id': id
            },
            success: function(data) {
                if (data == 'error') {
                    alert("Item was Already Added!");
                } else if (data == 'success') {
                    e.parent().empty().append(button);
                    get_cart();
                } else {
                    alert('Not found');
                }
            }
        });
    });

    function get_cart() {
        var route = "{{route('get-session-cart-transfer')}}";
        var table = "";
        var i = 1;
        var total = 0;
        $.ajax({
            type: 'GET',
            url: route,
            dataType: 'json',
            data: {
                _token: '{{ csrf_token() }}',
            },
            success: function(data) {
                $('#tbody').empty();
                $.each(data, function(index, val) {
                    total += val.item_price;
                    table += `<tr>
                                <td>${(i++)}</td>
                                <td>${val.item_name}</td>
                                <td>${val.quantity}</td>
                                <td>${val.item_price}</td>
                                <td><span data-id="${val.item_id}" class="btn btn-xs btn-danger fa fa-trash remove-from-cart"></span></td>
                            </tr>`;
                });
                $('#total-amount').text(total);
                $('#tbody').append(table);
            }
        });
    }
</script>
@endsection