@extends('layouts.index')
@section('title')
    Add Asset
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/jquery-steps/jquery.steps.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/jquery-steps/steps.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css"
        integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .dropify-wrapper {
            border: 1px solid #e2e7f1;
            border-radius: .3rem;
            height: 220px;
            margin-bottom: 10px;
        }

        .dropify-wrapper .dropify-message p {
            margin: 5px 410px 0 !important;
        }

        .l2 {
            padding-left: 1em;
        }

        .l3 {
            padding-left: 2em;
        }

        label.error {
            color: #F94687;
            font-size: 13px;
            font-size: .875rem;
            font-weight: 400;
            line-height: 1.5;
            margin-top: 5px;
            padding: 0;
        }

        input.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        select.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        textarea.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        .colored-toast.swal2-icon-success {
            background-color: #a5dc86 !important;
        }

        .colored-toast.swal2-icon-error {
            background-color: #f27474 !important;
        }

        .colored-toast.swal2-icon-warning {
            background-color: #f8bb86 !important;
        }

        .colored-toast.swal2-icon-info {
            background-color: #3fc3ee !important;
        }

        .colored-toast.swal2-icon-question {
            background-color: #87adbd !important;
        }

        .colored-toast .swal2-title {
            color: white;
        }

        .colored-toast .swal2-close {
            color: white;
        }

        .colored-toast .swal2-html-container {
            color: white;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">
                            <a href="{{ route('asset.index') }}">Asset</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Add
                        </li>

                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Add Asset</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <form method="POST" action="{{ route('asset.store') }}" id="tambahForm" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-12 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-2 mb-1 mt-sm-0">Add Asset</h4>
                            <div class="row border-bottom pb-4">
                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Name of Asset <span class="text-danger">*</span></label>
                                            <input type="text" id="name" name="name" value="{{ old('name') }}"
                                                class="form-control" placeholder="Name of Asset" onkeyup="generateLabel()">
                                        </div>
                                    </div>
                                    <label id="error_name" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Old Code</label>
                                            <input type="text" id="old_asset_code" name="old_asset_code"
                                                value="{{ old('old_asset_code') }}" class="form-control"
                                                placeholder="Old Code" onkeyup="generateLabel()">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>New Code <span class="text-danger">*</span></label>
                                            <input type="text" id="asset_code" name="asset_code"
                                                value="{{ old('asset_code') }}" class="form-control" placeholder="New Code"
                                                onkeyup="generateLabel()">
                                        </div>
                                    </div>
                                    <label id="error_asset_code" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Asset Category <span class="text-danger">*</span></label>
                                            <select name="ref_asset_categories_id" class="form-select">
                                                <option value="">Choose Category</option>
                                                @foreach ($ref_asset_categories as $data)
                                                    <option value="{{ $data->id }}">{{ $data->category_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <label id="error_ref_asset_categories_id" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Acquisition Date</label>
                                            <input type="date" class="form-control" name="acquisition_date"
                                                id="acquisition_date">
                                        </div>
                                    </div>
                                    <label id="error_acquisition_date" class="error" style="display: none;"></label>
                                </div>


                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <label for="">Borrowing By</label>
                                        <select name="borrowing_by" class="select2" id="borrowing_by"
                                            style="width: 100% !important;" onchange="generateLabel()">
                                            <option value="">Choose Borrowing By</option>
                                            @foreach ($pegawai as $data)
                                                <option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Acquisition Price</label>
                                            <input type="text" class="form-control money" name="acquisition_price"
                                                id="acquisition_price" placeholder="Acquisition Price">
                                        </div>
                                    </div>
                                    <label id="error_acquisition_price" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Quantity <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" name="quantity" id="quantity"
                                                placeholder="Quantity" onkeyup="generateLabel()">
                                        </div>
                                    </div>
                                    <label id="error_quantity" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Type</label>
                                            <br>
                                            <div class="form-check form-check-inline">
                                                <input
                                                    class="
                                                    form-check-input
                                                    primary
                                                    check-outline
                                                    outline-primary
                                                  "
                                                    type="radio" name="asset_type" id="primary-outline-radio"
                                                    value="fixed_asset">
                                                <label class="form-check-label" for="primary-outline-radio">Fixed
                                                    Asset</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input
                                                    class="
                                                    form-check-input
                                                    primary
                                                    check-outline
                                                    outline-primary
                                                  "
                                                    type="radio" name="asset_type" id="primary-outline-radio2"
                                                    value="consumable">
                                                <label class="form-check-label"
                                                    for="primary-outline-radio2">Consumable</label>
                                            </div>

                                        </div>
                                    </div>
                                    <label id="error_asset_type" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Location</label>
                                            <select name="ref_warehouse_id" class="form-select"
                                                onchange="locationDivision(this.value)">
                                                <option value="">Choose Location</option>
                                                @foreach ($ref_storage as $data)
                                                    <option value="{{ $data->id }}">{{ $data->location_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <label id="error_ref_warehouse_id" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Description</label>
                                            <textarea name="description" id="description" class="form-control" cols="30" rows="9"
                                                placeholder="Description"></textarea>
                                        </div>
                                    </div>
                                    <label id="error_description" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-6 mt-3 d-flex flex-column">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Image/Photo</label>
                                            <input type="file" class="dropify" name="image"
                                                data-allowed-file-extensions="png jpg jpeg svg" data-show-remove="false">
                                        </div>
                                    </div>
                                    <label id="error_image" class="error" style="display: none;"></label>
                                </div>

                                <div class="col-md-12 mt-3">
                                    <div class="form-group">
                                        <div class="controls">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="AddExpired"
                                                    onchange="addExpiredSwitch()" />
                                                <label class="form-check-label" for="AddExpired">
                                                    <label class="mb-0">Add Expired</label>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mt-2" id="dateExpiredWrap" style="display: none;">
                                        <div class="controls">
                                            <label>Date of Expired</label>
                                            <input type="date" class="form-control" name="expired_date"
                                                id="expired_date">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-sm-12">
                                    <div class="d-flex">
                                        <h4>Label of Asset</h4>
                                    </div>
                                    <div id="assetTableWrap">

                                    </div>
                                    <table class="table" id="assetTable">
                                        <thead>
                                            <tr>
                                                <th class="px-0 text-muted">No</th>
                                                <th class="px-0 text-muted">Old Code</th>
                                                <th class="px-0 text-muted">Name of Asset</th>
                                                <th class="px-0 text-muted">Borrowing By</th>
                                                <th class="px-0 text-muted">New Code</th>
                                            </tr>
                                        </thead>
                                        <tbody id="labelTableWrap">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                                <a href="{{ route('asset.index') }}" class="btn btn-outline-primary me-md-2">Back</a>
                                <button class="btn btn-primary me-md-2" type="submit" id="tambahButton">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="modal fade" id="print_modal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xs" role="document">
                <div class="modal-content">
                    <form id="createForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="statusValidation" value="true">
                        <div class="modal-header d-flex align-items-center">
                            <h3 class="modal-title" id="createModalLabel">
                                <i class="ti-marker-alt me-2"></i> Print Card / Qrcode
                            </h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body" style="
    padding-left: 25px;
    padding-right: 25px;
">

                            <table
                                style="width:100%;border: 1px solid black !important;
border-collapse: collapse !important;">
                                <tr>
                                    <th colspan="2" rowspan="3"
                                        style="text-align: center;border: 1px solid black !important;
      border-collapse: collapse !important;">
                                        <img src="" alt="" width="150" style="object-fit: contain;">

                                    </th>
                                    <th style="text-align: center;border: 1px solid black !important;
      border-collapse: collapse !important;"
                                        id="assetName">
                                        Macbook Pro 2021 - A</th>
                                </tr>
                                <tr>
                                    <th style="text-align: center;border: 1px solid black !important;
      border-collapse: collapse !important;"
                                        id="assetCode">
                                        Q2023</td>
                                </tr>
                            </table>

                            {{-- <button class="btn btn-warning mt-3" type="button"><i data-feather="download"
                                    style="height: 15px; width: 15px;"></i> Download</button>
                            <button class="btn btn-outline-primary mt-3" type="button"> <i
                                    class="ri-printer-line mx-1"></i>
                                Print</button> --}}


                        </div>

                    </form>
                </div>
            </div>
            <!-- ============================================================= -->
            <!-- End PAge Content -->
            <!-- ============================================================= -->
        </div>
    @endsection
    @section('js')
        <!--This page plugins -->
        <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
        <!-- start - This is for export functionality only -->
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
        <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

        <script src="{{ asset('back') }}/libs/jquery-steps/build/jquery.steps.min.js"></script>
        <script src="{{ asset('back') }}/libs/jquery-validation/dist/jquery.validate.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/additional-methods.js"></script>
        <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
        <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
        <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <!--This page JavaScript -->
        <script src="{{ asset('back') }}/libs/jquery.repeater/jquery.repeater.min.js"></script>
        <script src="{{ asset('back') }}/extra-libs/jquery.repeater/repeater-init.js"></script>
        <script src="{{ asset('back') }}/extra-libs/jquery.repeater/dff.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"
            integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <script>
            (function($) {
                $.fn.simpleMoneyFormat = function() {
                    this.each(function(index, el) {
                        var elType = null; // input or other
                        var value = null;
                        // get value
                        if ($(el).is('input') || $(el).is('textarea')) {
                            value = $(el).val().replace(/\./g, '');
                            elType = 'input';
                        } else {
                            value = $(el).text().replace(/\./g, '');
                            elType = 'other';
                        }
                        // if value changes
                        $(el).on('paste keyup', function() {
                            value = $(el).val().replace(/\./g, '');
                            formatElement(el, elType, value); // format element
                        });
                        formatElement(el, elType, value); // format element
                    });

                    function formatElement(el, elType, value) {
                        var result = '';
                        var valueArray = value.split('');
                        var resultArray = [];
                        var counter = 0;
                        var temp = '';
                        for (var i = valueArray.length - 1; i >= 0; i--) {
                            temp += valueArray[i];
                            if (valueArray[i] != ',') {
                                counter++
                            } else if (counter == 1) {
                                counter = counter - 1;
                            } else if (counter == 2) {
                                counter = counter - 2;
                            } else if (counter == 3) {
                                counter = counter - 3;
                            }

                            if (counter == 3) {
                                resultArray.push(temp);
                                counter = 0;
                                temp = '';
                            }
                        };
                        if (counter > 0) {
                            resultArray.push(temp);
                        }
                        for (var i = resultArray.length - 1; i >= 0; i--) {
                            var resTemp = resultArray[i].split('');
                            for (var j = resTemp.length - 1; j >= 0; j--) {
                                result += resTemp[j];
                            };
                            if (i > 0) {
                                result += '.'
                            }
                        };
                        if (elType == 'input') {
                            $(el).val(result);
                        } else {
                            $(el).empty().text(result);
                        }
                    }
                };
            }(jQuery));

            $('.money').simpleMoneyFormat();
        </script>

        <script>
            
            var borrowing_by_name = '-';

            function generateLabel() {

                if ($("#borrowing_by").val() != "") {
                    $.ajax({
                        url: "{{ route('asset.get-borrowing-by') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            borrowing_by_id: $("#borrowing_by").val(),
                        },
                        success: function(result) {
                            console.log(result);
                            borrowing_by_name = result.nama_lengkap;
                        }
                    });
                }

                $("#labelTableWrap").html("");

                if ($("#name").val() != "" && $("#asset_code").val() != "" && $("#quantity").val() != "") {

                    var quantity = $("#quantity").val();

                    $("#labelTableWrap").html("");

                    for (var v = 0; v < quantity; v++) {
                        var increment = v + 1;

                        var assetCode = $("#asset_code").val() + ' - ' + increment;
                        var assetName = $("#name").val();

                        var html = '';
                        html += ' <tr>';
                        html += ' <td>' + (v + 1) + '</td>';
                        if ($("#old_asset_code").val() != "") {
                            html += ' <td>' + $("#old_asset_code").val() + ' - ' + increment + '</td>';
                        } else {
                            html += ' <td>-</td>';
                        }
                        html += ' <td>' + $("#name").val() + '</td>';
                        html += ' <td>' + borrowing_by_name + '</td>';
                        html += ' <td>' + $("#asset_code").val() + ' - ' + increment + '</td>';
                        html += ' </tr>';

                        $("#labelTableWrap").append(html);
                    }
                }
            }
        </script>

        <script>
            $(document).ready(function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                });
                $("#tambahForm").validate({
                    rules: {
                        name: {
                            required: true
                        },
                        asset_code: {
                            required: true,
                        },
                        ref_asset_categories_id: {
                            required: true,
                        },
                        quantity: {
                            required: true,
                        }
                    },
                    messages: {
                        name: {
                            required: "Name is required",
                        },
                        asset_code: {
                            required: "Asset Code is required"
                        },
                        ref_asset_categories_id: {
                            required: "Asset Category is required",
                        },
                        quantity: {
                            required: "Quantity is required"
                        }
                    },
                    submitHandler: function(form) {
                        $("#tambahButton").prop('disabled', true);
                        form.submit();
                    }
                });
            });
        </script>
        <script>
            $('.dropify').dropify({
                messages: {
                    'default': '',
                }
            });

            function locationDivision(value) {
                if (value != "") {

                }
            }

            function addExpiredSwitch() {
                $("#dateExpiredWrap").toggle();
            }

            function print_card(code, name) {
                $("#assetCode").html(code);
                $("#assetName").html(name);

                $("#print_modal").modal('show');
            }
        </script>
    @endsection