@extends('layouts.index')
@section('title')
Add Stock Opname
@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('stock-opname.index') }}">Stock Opname</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Add
                    </li>

                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Add Stock Opname</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->
    <form method="POST" action="{{ route('stock-opname.store') }}" id="createForm" enctype="multipart/form-data">
        @csrf

        <input type="hidden" name="status" id="status" value="done">
        
        <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 Stock Opname</h4>
                        <div class="row border-bottom pb-4">
                            <div class="col-md-6 mt-3 flex flex-column">
                                <div class="form-group">
                                    <div class="controls">
                                        <label>Location <span class="text-danger">*</span></label>
                                        <select class="form-select" name="ref_warehouse_id" id="ref_warehouse_id"
                                            onchange="locationAsset(this.value)">
                                            <option value="">Choose Storage Location</option>
                                            @foreach($ref_warehouse as $data)
                                            <option value="{{ $data->id }}">{{ $data->location_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <label id="error_ref_warehouse_id" class="error" style="display: none;"></label>
                                </div>
                                <div class="form-group mt-3">
                                    <label for="">Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="stock_opname_date" id="stock_opname_date">
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <div class="form-group">
                                    <div class="controls">
                                        <label>Note <span class="text-danger">*</span></label>
                                        <textarea name="note" class="form-control" id="note" cols="30" rows="5"
                                            placeholder="Note"></textarea>
                                    </div>
                                </div>
                                <label id="error_note" class="error" style="display: none;"></label>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h4 class="mb-4">List of Assets</h4>
                                <table class="table" id="assetTable">
                                    <thead>
                                        <tr>
                                            <th class="px-0 text-muted">No</th>
                                            <th class="px-0 text-muted">Code</th>
                                            <th class="px-0 text-muted">Asset</th>
                                            <th class="px-0 text-muted">Type</th>
                                            <th class="px-0 text-muted">Category</th>
                                            <th class="px-0 text-muted">Location</th>
                                            <th class="px-0 text-muted">Stock</th>
                                            <th class="px-0 text-muted">Real Stock</th>
                                            <th class="px-0 text-muted">Update Stock</th>
                                            <th class="px-0 text-muted">Note</th>
                                        </tr>
                                    </thead>
                                    <tbody id="assetJsWrap">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                            <button class="btn btn-outline-primary me-md-2" type="button" onclick="saveAsDraft(this)">Save As
                                Draft</button>
                            <button class="btn btn-primary me-md-2" type="submit" id="doneButton">Done</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 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="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/1200px-QR_code_for_mobile_English_Wikipedia.svg.png"
                                        alt="" width="150" style="object-fit: contain;">

                                </th>
                                <th style="text-align: center;border: 1px solid black !important;
      border-collapse: collapse !important;">
                                    Macbook Pro 2021 - A</th>
                            </tr>
                            <tr>
                                <th style="text-align: center;border: 1px solid black !important;
      border-collapse: collapse !important;">
                                    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 saveAsDraft(element) {
            $(element).prop('disabled', true);
            $("#status").val("draft");
            $("#createForm").submit();
        }
    </script>
    <script>
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            $("#createForm").validate({
                rules: {
                    ref_warehouse_id: {
                        required: true
                    },
                    note: {
                        required: true,
                    },
                    stock_opname_date: {
                        required: true,
                    },
                    "asset_id[]": {
                        required: true,
                    },
                    "real_stock[]": {
                        required: true,
                    },
                    "physical_status_asset[]": {
                        required: true,
                    },
                    "note_asset[]": {
                        required: true,
                    }
                },
                messages: {
                    ref_warehouse_id: {
                        required: "Location is required",
                    },
                    note: {
                        required: "Note is required"
                    },
                    stock_opname_date: {
                        required: "Date is required"
                    },
                    "asset_id[]": {
                        required: "Asset is required"
                    },
                    "real_stock[]": {
                        required: "Stock is required"
                    },
                    "physical_status_asset[]": {
                        required: "Status is required"
                    },
                    "note_asset[]": {
                        required: "Note Asset is required"
                    }
                },
                submitHandler: function (form) {
                    $("#doneButton").prop('disabled', true);
                    form.submit();
                }
            });
        });
    </script>

    <script>
        $('.dropify').dropify({
            messages: {
                'default': '',
            }
        });

        $("#assetTable").DataTable();

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

        function print_card() {
            $("#print_modal").modal('show');
        }
    </script>

    <script>
        function locationAsset(value) {
            if (value != "") {
                $.ajax({
                    url: "{{ route('stock-opname.get-asset') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        ref_warehouse_id: value
                    },
                    success: function (result) {
                        $("#assetJsWrap").html(result);
                        $("#assetTable").DataTable();
                    }
                })
            } else {
                $("#assetTable").DataTable().clear().draw();
            }

        }
    </script>
    @endsection