@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')
@endsection
@section('content')
    <div class="row">
        <div class="col-md-10 mb-5">
            <h1>SLSI Management System Certification Search</h1>
            <div class="row">
                <div class="col-md-9">
                    <div class="form-group">
                        <input type="text" name="certificate_number" id="certificate_number" class="form-control"
                            autocomplete="off" placeholder="Please enter certification number">
                        <div id="certificate_number_err" style="color: red;"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <button id="msc_filter_submit_btn" class="btn btn-primary" type="button">Search</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-12">
                    <h2>Results <span id="totalResuluCount" style="font-size: 12px;"></span></h2>
                </div>
            </div>
            <hr>
            <section id="mscResultList">

            </section>
        </div>
    </div>
    <div class="modal fade modal-right scroll-out-negative" id="managementSystemCertificationDetailModal" tabindex="-1"
        role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable full" style="max-width: 80%;">
            <div class="modal-content">
                <div class="modal-body" style="padding-top: 10px;">
                    <div class="row">
                        <div class="col-12">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                style="float: right;"></button>
                        </div>
                    </div>
                    <div id="managementSystemCertificationDetailContent" class="scroll-track-visible">

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer_scripts')
    <!--<script src="{{ asset('assets/pspdfkit/pspdfkit.js') }}"></script>-->
    <script type="text/javascript">
        var certificate_number;

        var industryCount = 0;
        var standardIndustryArr = [];
        var categoryArr = [];
        var standardStatusArr = [];
        var stdDetail = [];
        var keyWordSelection;

        $(document).ready(function() {
                    });

        $("#msc_filter_submit_btn").click(function() {
            managementSystemCertificationFilter();
        });

        function managementSystemCertificationFilter() {
            certificate_number = $("#certificate_number").val();
            $("#mscResultList").html('');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: frontendURL + 'management_system_certification_filter',
                type: "POST",
                data: {
                    'certificate_number': certificate_number
                },
                success: function(data) {
                    $('#mscResultList').html(data);
                    $('#certificate_number_err').html('');
                },
                error: function(response) {
                    var erroJson = JSON.parse(response.responseText);
                    $.each(erroJson.errors, function(key, value) {
                        $('#certificate_number_err').html(value);
                    });

                },
            });
        }

        function managementSystemCertificationDetailLoad(id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: frontendURL + 'get_management_system_certification_with_information_by_management_system_id',
                type: "POST",
                data: {
                    'management_system_id': id,
                },
                success: function(data) {
                    console.log(data);
                    $('#managementSystemCertificationDetailContent').html(data);
                    $('#managementSystemCertificationDetailContent').overlayScrollbars({});
                    $('#managementSystemCertificationDetailModal').modal('show');
                }
            });
        }
    </script>
@endsection