@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Malkhana')
@push('scripts')
<!--<script src="{{ asset('js/typeahead.js') }}"></script>
<script src="{{ asset('js/bootstrap3-typeahead.min.js') }}"></script

<script src="{{ asset('js/autocomplete.js') }}"></script>-->
<link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}" />
<script src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>

<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
<!-- Copy from SCLSC -->
<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder/js/dataTables.colReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable-bs5/js/keyTable.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/assets/plugins/datatables.net-select-bs5/js/select.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/assets/plugins/pdfmake/build/pdfmake.min.js"></script>
<script src="/assets/plugins/pdfmake/build/vfs_fonts.js"></script>
<script src="/assets/plugins/jszip/dist/jszip.min.js"></script>
<script src="{{ asset('js/task/pending_report.js') }}"></script>


<!-- Copy from SCLSC -->

 <!--<script src="{{ asset('js/bootstrap-datetimepicker.fr.js') }}"></script>-->
@endpush
@push('head')

<style>
    /*Custom CSS*/
    span {
        transition: color 0.5s ease-in;
    }

    label:focus-within span {
        color: blue;
    }

    input {
        display: block;
        width: 100%;
    }

    label,
    select {

        display: block;
        width: 100%;
        max-width: 100%;
    }
    /*Profile Pic Start*/
    .picture-container{
        position: relative;
        cursor: pointer;
        text-align: center;
    }
    .picture{
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 0px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }
    .picture:hover{
        border-color: #2ca8ff;
    }
    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .picture-src{
        width: 100%;

    }
    /*Profile Pic End*/
    .form-control:focus, .form-select:focus, .form-check-input:focus, .select2:focus-within{
        border-color: #6265e4 !important;
        box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
        
    }
    
    .container{
        display:flex;
        justify-content:center;
        /* margin-top:20px; */
    }
    .search_option{
        display:flex;
        align-items:center;
        font-size:15px;
        font-weight:bold;
    }
    label{
        width:auto;
        display:flex;
        align-items:center;

    }
    h3{
        text-align:center;
        /* text-decoration: underline; */
        color:#0e4b8e;
    }
    .year{
        width:100px;
    }
    select{
        width:200px !important;
    }
    .tablinks{
        /* border-radius:5px; */
        border:none;
        outline:none;
        color:white;
        background:#0e4b8e; /*#62c0ff*/
        background:transparent;
        margin:0 5px 0 5px;
        font-weight:500;
        padding:2px 5px 2px 5px;
        border-bottom:1px solid transparent;
    }
    
    .tablinks.active {
        border-bottom:1px solid white;
    }
    .tablinks:hover{
        border-bottom:1px solid white;
    }
   
    .tabcontent {
        display: none;
    }
    select{
        width:unset !important;
    }
    #district,#taluka{
        width:100px !important;
        padding: 2px;
        border:1px solid #ced4da;
        border-radius:4px;
        margin-right:2px ;
    }
  
    .selectBox {
        position: relative;
        }

        #mySelectOptions {

        display: none;
        border: 0.5px #7c7c7c solid;
        background-color: #ffffff;
        max-height: 150px;
        overflow-y: scroll;
        padding-top:20px;

        }

        #mySelectOptions label {
            
        font-weight: normal;
        /* display: block; */
        white-space: nowrap;
        min-height: 1.5em;
        background-color: #ffffff00;
        padding: 0 2.25rem 0 .75rem; */
        }

        #mySelectOptions label:hover {
        background-color: #1e90ff;
        }
        .checkb{
            width:auto !important;
        }
  

</style>
@endpush
@section('content')



<section>
    <div class="row">
        <div class="col-xl-12">
            <div class="panel" data-sortable-id="form-stuff-3">
                <div class="panel-heading card-bg-color">
                    <!-- <h4 class="panel-title">Malkhana</h4> -->
                    <div class="panel-title">
                        <h4 class="panel-title">मालखाना (Malkhana)</h4>
                    </div>
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                    </div>
                </div>
                <div class="panel-body">
                    <div id="CreateId" class="row tabcontent" style="display:block;">
                        <!-- This code added by vishnu start -->
                                               
                        <div class="container">
                            <div class="row">
                                
                                <form>
                                    
                                    <div class="card border-0">
                                       
                                        <div class="row" style="float:none;margin:auto;">
                                            <div class="col-sm-12">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" name="toggle" value="1" type="radio"  checked="" id="radio1">
                                                    <label class="form-check-label" for="radio1">प्रकरण क्रमांक (Case Number)</label>
                                                </div>                                      
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" name="toggle" value="2" type="radio" id="radio2">
                                                    <label class="form-check-label" for="radio2">सी. एन. आर. क्रमांक (CNR Number)</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-3 " id="case_div" >
                                            <div class="col-sm-4">
                                                <label class="control-label" for="prakarn"><b>प्रकरण (Case)</b></label>
                                                <select name="prakarn" id="prakarn" class="form-control form-select"  required>
                                                    <option value="">    चुनें    </option>
                                                    @foreach($case_types as $data)
                                                        <option value="{{$data->case_type}}">{{ $data->type_sname }} - {{ $data->type_name }}</option>
                                                    @endforeach
                                                </select>
                                                <sapn id="err_ctype" class="text-danger" style="display:none;"> select Case type <span>
                                            </div>
                                            <div class="col-sm-3">
                                                <label class="control-label" for="caseno"><b>क्रमांक (Number)</b></label>
                                                <input type="text" name="caseno" id="caseno" maxlength="7"  class="form-control"  required>
                                                <sapn id="err_cno" class="text-danger" style="display:none;">type case number <span>

                                            </div>
                                            <div class="col-sm-2">
                                                <label class="control-label" for="caseyear"><b>वर्ष (Year)</b></label>
                                                <input type="text" name="caseyear" id="caseyear" class="form-control" size="4" maxlength="4" value="2024"  required>
                                                <sapn id="err_year" class="text-danger" style="display:none;">Year is empty <span>
                                            </div>
                                            <div class="col-sm-2 d-flex align-items-end">
                                                <button type="button" name="search" id="search" class="btn btn-md btn-primary search">Show</button>
                                            </div>
                                        </div>
                                        <div class="row mt-3" id="cnr_div" >
                                                    
                                            <div class="col-sm-7">
                                                <label class="control-label" for="cnrno"><b>सी एन आर क्रमांक (CNR Number)</b></label>
                                                <input type="text" name="cnrno" id="cnrno" maxlength="16"  class="form-control" autocomplete="off"  required>
                                                <sapn id="err_cnr" class="text-danger" style="display:none;">Type CNR Number <span>
                                            </div>
                                            
                                            <div class="col-sm-5 d-flex align-items-end">
                                                <button type="button" name="search" id="search" class="btn btn-md btn-primary search">Show</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>    
                            </div>                         
                            
                        </div>
                        <div class="row mt-3" id="output">
                            
                        </div>

                        <!-- This code added by vishnu end -->
                    </div>
                   
                    
                    
                </div> 
            </div> 
                    
        </div>
    </div>
</section>
<section>
    <div class="row">
        <div class="col-xl-12">
            <div class="panel" data-sortable-id="form-stuff-3">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">वस्‍तु जोड़ें (Add New Items)</h4>
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                    </div>
                </div>
                <div class="panel-body">
                    <!-- <div class="row" id="addItemContent" style="display:none;"> -->
                    <div class="row" id="addItemContent" style="">
                        <div class="row" >
                            
                            <div class="col-5">
                                <!-- ------------------- -->

                                <label for="myMultiselect">वस्‍तु जोड़ें (Add Items):</label>
                                    <div id="myMultiselect" class="multiselect">
                                        <div id="mySelectLabel" class="selectBox w-100" onclick="toggleCheckboxArea()">
                                            <select class="form-control form-select w-100">
                                                <option>somevalue</option>
                                            </select>
                                            
                                        </div>
                                        <div id="mySelectOptions">
                                                @foreach($mal_items as $mdata)

                                                    <label for="{{$mdata->id}}" class="d-flex align-items-center"><input class="checkb pr-2" type="checkbox" id="{{$mdata->id}}" onchange="checkboxStatusChange()" value="{{ $mdata->item_name_hindi }}" /> &ensp; {{ $mdata->item_name_eng }}</label>
                                                @endforeach
                                                                                            
                                        </div>
                                    </div>

                                <!-- ------------------- -->
                              

                            </div>
                            <div class="col-4">
                                <label for="">माल विवरण(Mal Description) :</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        
                        <di v class="row my-2 ">
                            
                            
                        </div>
                        <div class="row">
                            <div class="col-12 text-end">
                                <button class="btn btn-primary " id="Save Item"> Save Item </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div> 
                    
        </div>
    </div>
</section>

@endsection
@push('scripts')

<!-- script for multiple checkbox dropdown -->
<script>

        window.onload = (event) => {
        initMultiselect();
        };

        function initMultiselect() {
        checkboxStatusChange();

        document.addEventListener("click", function(evt) {
            var flyoutElement = document.getElementById('myMultiselect'),
            targetElement = evt.target; // clicked element

            do {
            if (targetElement == flyoutElement) {
                // This is a click inside. Do nothing, just return.
                //console.log('click inside');
                return;
            }

            // Go up the DOM
            targetElement = targetElement.parentNode;
            } while (targetElement);

            // This is a click outside.
            toggleCheckboxArea(true);
            //console.log('click outside');
        });
        }

        function checkboxStatusChange() {
        var multiselect = document.getElementById("mySelectLabel");
        var multiselectOption = multiselect.getElementsByTagName('option')[0];

        var values = [];
        var checkboxes = document.getElementById("mySelectOptions");
        var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

        for (const item of checkedCheckboxes) {
            var checkboxValue = item.getAttribute('value');
            values.push(checkboxValue);
        }

        var dropdownValue = "---------- Select Items--------- ";
        if (values.length > 0) {
            dropdownValue = values.join(', ');
        }

        multiselectOption.innerText = dropdownValue;
        }

        function toggleCheckboxArea(onlyHide = false) {
        var checkboxes = document.getElementById("mySelectOptions");
        var displayValue = checkboxes.style.display;

        if (displayValue != "block") {
            if (onlyHide == false) {
            checkboxes.style.display = "block";
            }
        } else {
            checkboxes.style.display = "none";
        }
        }
</script>

<!-- script for search in select -->

<script>
    function filterItems() {
        // Get the search input value
        var searchInput = document.getElementById("searchInput").value.toLowerCase();

        // Get all the labels in the select options
        var labels = document.querySelectorAll("#mySelectOptions label");

        // Loop through labels and hide/show based on search input
        labels.forEach(function(label) {
            var labelContent = label.textContent.toLowerCase();
            if (labelContent.includes(searchInput)) {
                label.style.display = "block"; // Show matching items
            } else {
                label.style.display = "none"; // Hide non-matching items
            }
        });
    }
</script>

<!-- ........................ -->

<!-- ajax script -->
<script>
    $(document).ready(function(){


        // ...........radio selection..............
            // $('#case_div').hide();
            $('#cnr_div').hide();
            $('input[type="radio"]').change(function() {

            var selectedRadioId = $('input[type="radio"]:checked').attr('id');
               if(selectedRadioId == 'radio1'){
                    $('#case_div').show();
                    $('#cnr_div').hide();
                    $('#cnrno').val('');
               }
               else if(selectedRadioId == 'radio2'){
                    $('#cnr_div').show();
                    $('#case_div').hide();
                    $('#caseno').val('');
                    // $('#caseyear').val('');
                    $('#prakarn').val(null);
               }
            });
        

        // ........................................

        $('#caseno').on('change',function (){
            var caseno = $("#caseno").val();
            var casenoLength= caseno.length;
                if(casenoLength=="0"){
                    $('#caseno').css('background-color', '#ffe6e6');
                    $('#caseno').css('border-color', 'red');
                    alert('Case Number is Empty');
                }
                if(casenoLength!="0"){
                    $('#caseno').css('background-color', 'white');
                    $('#caseno').css('border-color', '#ced4da');
                }
                if(casenoLength=="1")
                {
                    caseno="000000"+caseno;
                   
                }
                else if(casenoLength=="2")
                {
                    caseno="00000"+caseno;
                }
                else if(casenoLength=="3")
                {
                    caseno="0000"+caseno;
                }
                else if(casenoLength=="4")
                {
                    caseno="000"+caseno;
                }
                else if(casenoLength=="5")
                {
                    caseno="00"+caseno;
                }
                else if(casenoLength=="6")
                {
                    caseno="0"+caseno;
                }
                else(casenoLength=="7")
                {
                    caseno;
                }
                
                $("#caseno").val(caseno);
                
        });
        

        // .......................................
    

        $('.search').on('click', function () {
                var casetype=$("#prakarn").val();
                var caseLength= casetype.length;
                if(caseLength=="1")
                {
                    casetype="00"+casetype;
                }
                else if(caseLength=="2")
                {
                    casetype="0"+casetype;
                }
                else(caseLength=="3")
                {
                    casetype;
                }
                var caseno = $("#caseno").val();
                var casenoLength= caseno.length;
                if(casenoLength=="1")
                {
                    caseno="000000"+caseno;
                }
                else if(casenoLength=="2")
                {
                    caseno="00000"+caseno;
                }
                else if(casenoLength=="3")
                {
                    caseno="0000"+caseno;
                }
                else if(casenoLength=="4")
                {
                    caseno="000"+caseno;
                }
                else if(casenoLength=="5")
                {
                    caseno="00"+caseno;
                }
                else if(casenoLength=="6")
                {
                    caseno="0"+caseno;
                }
                else(casenoLength=="7")
                {
                    caseno;
                }

                var caseyear = $('#caseyear').val();
                var final_caseno = 2+casetype+caseno+caseyear;
                var cnr = $("#cnrno").val();
                
            

            //......................ajax for search malkhana record from case number...................... 
            if(caseLength!=0 && caseno!='' && caseyear!='' || cnr!='')
            {
                $.ajax({
                    url: "/malkhana",
                    type: "POST",
                    data: {
                        case_no: final_caseno,
                        cnr_no: cnr,
                        _token: '{{csrf_token()}}'
                    },
                    // dataType: 'json',
                    success: function (result) {
                        if (result.trim() === "") {
                            var alertHtml = "<div class='alert alert-warning text-center' role='alert'>No data found.</div>";
                            $('#output').html(alertHtml);

                            setTimeout(function () {
                                $('#output .alert').fadeOut('slow');
                            }, 2000);
                        } else {
                            $('#output').html(result);
                        }
                    },
                    error: function () {
                        $('#output').html("<div class='alert alert-danger' role='alert'>Error occurred while fetching data!</div>");
                    }
                });
                
            }
           
            
        });
        
       


    });
    
</script>


@endpush