{% load humanize i18n static %}

{% block head %}
<style>
    label {
        display: block;
        text-align: right;
    }

    .tabcontent {
        display: none;
    }

    .tablinks {
        cursor: pointer;
        padding: 10px;
    }

    .scrollX {
        overflow: auto;
    }

    .button-container {
        {% comment %} display: flex; {% endcomment %}
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .button-container button {
        flex-basis: calc(33.33% - 10px); 
        margin: 2px; 
    }
    
    @media (max-width: 768px) {
        .button-container button {
            flex-basis: calc(50% - 10px);
        }
    }

    .select2-container {
        width: 100%;
    }

    .form-control {
        border-color: #aaa !important;
        border-radius: 5px !important;
    }

    .select2-selection__rendered {
        line-height: 31px !important;
    }
    .select2-container .select2-selection--single {
        height: 35px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }

    .dataTables_paginate {
        text-align: center;
    }

    .dataTables_paginate {
        margin-top: 10px;
    }

    .page-item:not(:first-child) .page-link {
        margin-left: 0px !important;
    }

    .page-link {
        border: none !important;
        padding: 0px !important;
    }

    .paginate_button {
        display: inline-block;
        margin: 2px;
        border: 1px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 3px;
        padding: 0.375rem 0.75rem;
    }

    #item-table-stokopname_info {
        margin-top: 5px;
    }

    #item-table-stokopname_paginate {
        margin-top: 10px;
    }

    .paginate_button.active, .paginate_button.current {
        background-color: #007bff;
        color: #fff;
        padding: 0.375rem 0.75rem;
    }

    .paginate_button.active:hover, .paginate_button.current:hover {
        background-color: #007bff;
        color: #fff;
        padding: 0.375rem 0.75rem;
    }
    

    .ellipsis {
        display: none;
    }

    #item-table-stokopname_ellipsis {
        display: none;
    }

    #item-table-stokopname_previous,
    #item-table-stokopname_next {
        margin: 2px;
        border: 1px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 3px;
        background-color: #aaa !important;
        color: #fff !important;
        {% comment %} padding: 5px 10px; {% endcomment %}
    }

    #item-table-stokopname_previous a,
    #item-table-stokopname_next a {
        background-color: #aaa !important;
        color: #fff !important;
    }

    #item-table-stokopname_info {
        position: absolute;
    }

    .paginate_button:hover {
        background-color: transparent;
        color: #007bff;
        text-decoration: none;
    }

    input[type="search"] {
        padding: 0.25rem 0.5rem;
        display: block;
        width: 100%;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    input[type="search"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    #item-table-stokopname_length {
        position: absolute;
    }

    #item-table-stokopname_filter {
        float: right;
    }

    #item-detail_length {
        position: absolute;
    }

    #item-detail_filter {
        float: right;
    }

    select[name="item-table-stokopname_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
    }

    select[name="item-table-stokopname_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    select[name="item-detail_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
    }

    select[name="item-detail_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    .page-link:hover {
        outline: none;
    }

</style>
{% comment %} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% endcomment %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
{% comment %} <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"> {% endcomment %}
{% comment %} <link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"> {% endcomment %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
{% comment %} <script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> {% endcomment %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js" integrity="sha512-/ncZdOhQm5pgj5KHy720Ck7XF5RzYK6rtUsLNnGcitXrKT3wUYzTrPlOSG7SdL2kDzkuLEOFvrQRyllcZkeAlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.js" integrity="sha512-av9OFV3TfDf07Bx0qGVXV+9oNYMjIpzb/QO/LvVFWr2sgMutARKm998SDdRbYiGQtm/8yl4Ob94eHEWRUTI4tQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script> {% endcomment %}
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
{% comment %} <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> {% endcomment %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<!-- Add FontAwesome CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" >

{% endblock %}

{% block content %}
{% language 'id' %}
    {% include "header.html" %}
    <!-- main page content -->
    <script>
        $(document).ready(function() {
            $("#toggleButton").click(function() {
                $(".toggle-buttons").toggleClass("expanded");
            });
        });
        //function tmbhOpnameMonth(end_date) {
        //    if(end_date == "None"){
        //        Swal.fire("Selesaikan Pengecekan Sebelumnnya!")
        //    }else{
        //
        //        Swal.fire({
        //            title: 'Hi, Admin!',
        //            text: 'Apakah kamu ingin mengecek Stok Opname bulan ini?',
        //            icon: 'question',
        //            showCancelButton: true,
        //            confirmButtonColor: '#3085d6',
        //            cancelButtonColor: '#d33',
        //            confirmButtonText: 'Yes'
        //        }).then((result) => {
        //            if (result.isConfirmed) {
        //                $.ajax({
        //                    url: '/pemeriksaan/tambahopnamebulanini',
        //                    type: 'GET',
        //                    success: function() {
        //                        Swal.fire({
        //                            position: "center",
        //                            icon: "success",
        //                            title: "Your work has been saved",
        //                            showConfirmButton: false,
        //                            timer: 1500
        //                          });
        //                        window.location.href = '/pemeriksaan/inventory';  
        //                     },
        //                     error: function(error) {
        //                         console.error('Error:', error);
        //                     }
        //                 });
        //            }
        //        });
        //    }
        //}    
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <div class="accordion-body">
            <div style="display: flex; justify-content: space-between;">
                <h5 class="h5">List Opname</h5>
                <div style="display:flex">
                        <button class="btn btn-sm mr-2 btn-info"id="stok_opname" 
                        data-target="md_stokopname" data-target="md_stokopname" onclick="tmbhOpnameMonth('{{pengecekan_terakhir.end_date}}')">
                        <span style="color:#fff">Buat Jadwal Opname</span>
                    </button>
                </div>
            </div>
            <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
            <div class="row gy-3" id="table-stok-barang">
                <table width="100%" style="width:100% !important; cursor: pointer;" id="item-table-stokopname" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Awal Pengecekan</th>
                            <th>Akhir Pengecekan</th>
                            <th>Dibuat Oleh</th>
                            <th>Deskripsi</th>
                            <th style="text-align:center">Tindakan</th>
                        </tr>                    </thead>
                    <tbody>
                        {% for c in checker %}
                        <tr>
                            <td>{{c.id}}</td>
                            <td>{{ c.created_at|date:"j M Y" }}</td>
                            <td id="end_date">{% if c.end_date|striptags == 'None'%}Progress{%else%}Completed{%endif%}</td>
                            <td>{{c.created_by}}</td>
                            <td>{{c.deskripsi}}</td>
                            <td style="text-align:center">
                                <button class="check btn" style="background:lightseagreen; color:white" id="check"
                                data-endDate="{{c.end_date}}"
                                data-toggle="modal" onclick="goToFormOpname({{c.id}})">check</button>
                                <button class="detail btn" style="background:lightseagreen; color:white" id="detail" 
                                data-toggle="modal" onclick="detail('{{c.id}}')">detail</button>    
                            </td>
                        </tr>
                        {% endfor%}
                    </tbody>
                </table>
            </div> 
        </div>
        
        
        {% comment %} modal {% endcomment %}
        {% include 'pemeriksaan/inventory/modal-inventory.html' %}


    {% include "footer.html" %}
<script>

    $(document).ready(function() {
        // Initialize DataTable
        $('#item-table-stokopname').DataTable();
    });

</script>

<script>
    function speak(text) {
        var speech = new SpeechSynthesisUtterance();
        speech.text = text
        speech.lang = 'id'
        speech.rate = 0.7
        window.speechSynthesis.speak(speech)
    }

    $(document).ready(function(){
        $('button.check').each(function() {
            // Loop through each button with class "check"
            var endDate = $(this).data('enddate'); // Get the value of data-endDate attribute
            // Use endDate here as needed
            if (endDate !== 'None') {
                $(this).closest('tr').find('.detail').show(); // Show the button with class "detail"
                $(this).closest('tr').find('.check').hide(); // Show the button with class "detail"
                // Alternatively, you can use $('#detail').show(); if "detail" is an ID
            } else {
                $(this).closest('tr').find('.detail').hide();
                $(this).closest('tr').find('.check').show(); // Show the button with class "detail"
                 // Hide the button with class "detail"
                // Alternatively, you can use $('#detail').hide(); if "detail" is an ID
            }
            
        });
    })

    function detail(id){
        $('#mdDetailOpname .modal-body').html(`<div class="progress">
            <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                0%
            </div>
            </div>`)
        $.ajax({
            url: '/pemeriksaan/detail_opname/'+id,
            type: "GET",
            success: function(res) {
                $('#mdDetailOpname .modal-body').html(res);
                $('#mdDetailOpname').modal('show')

            },
            error: function(xhr, status, error) {
              console.error(xhr.responseText);
            }
        });
    }
    
    function tmbhOpnameMonth(end_date){
        if(end_date == "None"){
            Swal.fire("Selesaikan Pengecekan Sebelumnnya!")
            }else{
                $('#mdCheckerOp').modal('show')

            }

            var today = new Date().toISOString().split('T')[0];

        // Set the value of the input field to today's date
        $('#created_at').val(today);
    }
     
    function goToFormOpname(checker_id){
                $('#mdFormOp').modal('show')
                var id = checker_id;
                $("#mdFormOp #checker_id").val( id );
    }
</script>
{% endlanguage %}
{% endblock %}