@extends('layouts.index')
@section('title')
    Detail 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">
                            Detail
                        </li>

                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Detail Stock Opname</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
       
            <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">Detail Stock Opname</h4>
                            <div class="row border-bottom pb-4">
                                <div class="col-md-6 mt-3">
                                    <h5>Location</h5>
                                    <p>{{ $stock_opname->ref_warehouse->location_name }}</p>
                                </div>

                                <div class="col-md-6 mt-3">
                                   <h5>Note</h5>
                                   <p>{{ $stock_opname->note }}</p>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <h5>Date</h5>
                                    <p>{{ Carbon\Carbon::parse($stock_opname->stock_opname_date)->format('F j, Y') }}</p>
                                 </div>
                                 <div class="col-md-6 mt-3">
                                    <h5>Status</h5>
                                    <p>
                                        @if($stock_opname->status == 'done')
                                            <span class="badge bg-light-success text-success font-weight-medium">Done</span>
                                        @else
                                            <span class="badge bg-light-warning text-warning font-weight-medium">Draft</span>
                                        @endif
                                    </p>
                                 </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-sm-12">
                                    <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>
                                            @php
                                                $increment = 1;
                                            @endphp

                                            @foreach($stock_opname->stock_opname_asset as $data)
                                            <tr>
                                                <td>{{ $increment++ }}</td>
                                                <td>{{ $data->asset->code }}</td>
                                                <td style="width: 10%;">{{ $data->asset->name }}</td>
                                                <td>
                                                    @if($data->asset->type == 'fixed_asset')
                                                        Fixed Asset
                                                    @else
                                                        Consumable
                                                    @endif
                                                </td>
                                                <td>{{ $data->asset->ref_asset_categories->category_name }}</td>
                                                <td>{{ isset($data->asset->ref_warehouse->location_name) ? $data->asset->ref_warehouse->location_name : '-' }}</td>
                                                <td>{{ $data->asset->quantity }}</td>
                                                <td style="width: 8%;">{{ $data->real_stock }}</td>
                                                <td>
                                                    {{ $data->physical_status_asset }}
                                                </td>
                                                <td style="width: 16%;">
                                                    {{ $data->note_asset }}
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                                <a href="{{ url('stock-opname') }}" class="btn btn-outline-primary me-md-2"">Back</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
       

        <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="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>
            $('.dropify').dropify({
                messages: {
                    'default': '',
                }
            });

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

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

        <script>
            $('#createForm').on('submit', function(event) {
                event.preventDefault();
                $.ajax({
                    url: "{{ route('program.store') }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    processData: false,
                    success: function(result) {
                        if (result.success == false) {
                            $("label.error").css("display", "none");
                            $("input.error").removeClass("error");
                            $("select.error").removeClass("error");
                            for (const [key, value] of Object.entries(result.errors)) {
                                $("#error_" + key).css("display", "block");
                                $("#error_" + key).html(value[0]);
                                $('[name="' + key + '"]').addClass("error");
                            }
                        } else if (result.success == true) {
                            $("label.error").css("display", "none");
                            $("input.error").removeClass("error");
                            $("select.error").removeClass("error");
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: 'Program has been added successfully',
                            }).then(function() {
                                location.href = "{{ route('program.index') }}";
                            });
                        }
                    }
                });
            });
        </script>
    @endsection