@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')
@endsection
@section('content')
    <div class="row product-certification-top">
        <div class="col-md-12 mb-5 product-certificate-filter-box">
            <h1>Product Certification Search</h1>
            <div>
                <div class="row mb-3">
                    <div class="col-md-9">
                        <div class="form-group">
                            <input type="text" name="search_keyword" id="search_keyword" class="form-control"
                                autocomplete="off"
                                placeholder="Please enter Permit number, Company name, Product Name or Brand">
                            <div id="search_keyword_err" class="error-label" style="color: red;"></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <select style="width: 100%" id="product_id" class="form-control select2Basic" placeholder="Select Product"
                                name="product_id">
                                <option value="">&nbsp;</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="brand_id" class="form-control select2Basic" placeholder="Select Brand"
                                name="brand_id">
                                <option value="">&nbsp;</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="standard_id" class="form-control select2Basic" placeholder="Select Standard"
                                name="standard_id">
                                <option value="">&nbsp;</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <select style="width: 100%" id="company_id" class="form-control select2Basic" placeholder="Select Company"
                                name="company_id">
                                <option value="">&nbsp;</option>
                            </select>
                        </div>
                    </div>

                </div>

                <div class="row mb-3">

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="manufacture_id" class="form-control select2Basic" placeholder="Select Manufacturer"
                                name="manufacture_id">
                                <option value="">&nbsp;</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="company_manufacture_plant_id" class="form-control select2Basic"
                                placeholder="Select Company Manufacture Plant" name="company_manufacture_plant_id">
                                <option value="">&nbsp;</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="permit_status" class="form-control select2Basic" placeholder="Select Permit Status"
                                name="permit_status">
                                <option value="">&nbsp;</option>
                                <option value="ACTIVE">Active</option>
                                <option value="CANCELLED">Cancelled</option>
                            </select>
                        </div>
                    </div>

                </div>

                <div>
                    <div class="col-md-3">
                        <button id="filter_submit_btn" class="btn btn-primary btn-sm" type="button">Search</button>
                        <button type="button" id="rest_btn" class="btn btn-warning btn-sm">Reset</button>
                    </div>
                </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="resultList">

            </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">
        $('#product_id').select2({
            ajax: {
                method: 'POST',
                url: "{{ route('load-product-list-json') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term,
                        type: 'public',
                        f: 'perm',
                    }
                    return query;
                },
                cache: true,
                processResults: function(data) {
                    return {
                        results: data,
                    };
                },
            },
            placeholder: 'Select Product',
        });

        $('#brand_id').select2({
            ajax: {
                method: 'POST',
                url: "{{ route('load-brand-list-json') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term,
                        type: 'public',
                        f: 'perm',
                    }
                    return query;
                },
                cache: true,
                processResults: function(data) {
                    return {
                        results: data,
                    };
                },
            },
            placeholder: 'Select Brand',
        });

        $('#standard_id').select2({
            ajax: {
                method: 'POST',
                url: "{{ route('load-standard-list-json') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term,
                        type: 'public',
                        f: 'perm',
                    }
                    return query;
                },
                cache: true,
                processResults: function(data) {
                    return {
                        results: data,
                    };
                },
            },
            placeholder: 'Select Standard',
        });

        $('#company_id').select2({
            ajax: {
                method: 'POST',
                url: "{{ route('load-client-list-json') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term,
                        type: 'public',
                        f: 'perm',
                    }
                    return query;
                },
                cache: true,
                processResults: function(data) {
                    return {
                        results: data,
                    };
                },
            },
            placeholder: 'Select Company',
        });

        $('#manufacture_id').select2({
            ajax: {
                method: 'POST',
                url: "{{ route('load-manufacture-list-json') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term,
                        type: 'public',
                        f: 'perm',
                    }
                    return query;
                },
                cache: true,
                processResults: function(data) {
                    return {
                        results: data,
                    };
                },
            },
            placeholder: 'Select Manufacture',
        });

        $('#company_manufacture_plant_id').select2({
            ajax: {
                method: 'POST',
                url: "{{ route('load-client-manufacture-plant-by-client-id-list-json') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        client_id: $('#manufacture_id').val(),
                        search: params.term,
                        type: 'public',
                        f: 'perm',
                    }
                    return query;
                },
                cache: true,
                processResults: function(data) {
                    return {
                        results: data,
                    };
                },
            },
            placeholder: 'Select Company Manufacture Plant',
        });

        $("#filter_submit_btn").click(function() {
            productCertificationFilter();
        });

        $('#manufacture_id').on('select2:select', function(e) {
            $('#company_manufacture_plant_id').val(null).trigger("change");

        });

        $("#rest_btn").click(function() {
            $('#product_id').val(null).trigger("change");
            $('#brand_id').val(null).trigger("change");
            $('#standard_id').val(null).trigger("change");
            $('#company_id').val(null).trigger("change");
            $('#company_manufacture_plant_id').val(null).trigger("change");
            $('#manufacture_id').val(null).trigger("change");
            $('#permit_status').val(null).trigger("change");
            $('#search_keyword').val('');

            $('#resultList').html('');
            $("#totalResuluCount").html('');

        });

        function productCertificationFilter() {

            var product_id = $("#product_id").val();
            var brand_id = $("#brand_id").val();
            var standard_id = $("#standard_id").val();
            var company_id = $("#company_id").val();
            var company_manufacture_plant_id = $("#company_manufacture_plant_id").val();
            var manufacture_id = $("#manufacture_id").val();
            var permit_status = $("#permit_status").val();
            var search_keyword = $("#search_keyword").val();
            $('.error-label').hide();
            $("#resultList").html('');
            $("#totalResuluCount").html('');

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

            $.ajax({
                url: frontendURL + 'product-certification/filter',
                type: "POST",
                data: {
                    'product_id': product_id,
                    'brand_id': brand_id,
                    'standard_id': standard_id,
                    'company_id': company_id,
                    'company_manufacture_plant_id': company_manufacture_plant_id,
                    'manufacture_id': manufacture_id,
                    'permit_status': permit_status,
                    'search_keyword': search_keyword,
                },
                success: function(data) {
                    $('#resultList').html(data);
                    $('#search_keyword_err').html('');
                },
                error: function(response) {
                    var erroJson = JSON.parse(response.responseText);
                    $.each(erroJson.errors, function(key, value) {
                        $('#search_keyword_err').html(value);
                    });
                    $('.error-label').show();
                },
            });
        }
    </script>
@endsection