@extends('layouts.default')
@section('title', 'User Details')
@push('head')
<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="/assets/plugins/select2/dist/js/select2.min.js" defer></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" defer></script>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>

<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js" defer></script>
<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;
    }


</style>
@endpush
@section('content')
<section class="mb-4 bg-white">
    <h3 class="h3-responsive font-weight-bold text-center p-3">DEFECT MASTER DETAILS</h3>
    <div class="row align-items-center">
        <div class="col-md-12 mb-5">
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Defect Master Form</h4>
                </div>
                <form>
                    <div class="panel-body">
                        <div class="row">
                            <div class='col-md-2 mb-2'>
                                <div class='md-form'>
                                    <label for='pin' class=''><span>Defect Name</span>
                                        <input type='text' id='defect' name='defect' class='form-control form-control-sm' value=''/>
                                    </label>
                                </div>
                            </div>
                            <div class='col-md-1 mb-2'>
                                <div class='md-form'>
                                    <label for='pin' class=''><span>&nbsp;</span>
                                        <input type='button' id='submit' name='submit' class='btn btn-primary btn-sm form-control'  value='Save'>
                                    </label>
                                </div>
                            </div>  
                        </div>


                    </div>
                </form>

                <!--  Table Grid -->

                @if(!empty($defectsList))
                @if(count($defectsList)>0)
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h4 class="panel-title">Defects List</h4>
                        <div class="panel-heading-btn">
                            <a href="#" class="btn btn-xs btn-icon btn-circle btn-default" data-toggle="panel-expand">
                                <i class="fa fa-expand"></i>
                            </a>
                            <a href="#" class="btn btn-xs btn-icon btn-circle btn-success" data-toggle="panel-reload">
                                <i class="fa fa-repeat"></i>
                            </a>
                            <a href="#" class="btn btn-xs btn-icon btn-circle btn-warning" data-toggle="panel-collapse">
                                <i class="fa fa-minus"></i>
                            </a>
                            <a href="#" class="btn btn-xs btn-icon btn-circle btn-danger" data-toggle="panel-remove">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="row"><div class="col-sm-12">
                                <table id="data-table-default" class="table table-striped table-bordered align-middle">
                                    <thead>
                                        <tr>
                                            <th width="1%" data-orderable="false"></th>
                                            <th>Defect Name</th>
                                            <th>Is Active</th>
                                            <th data-orderable="false"></th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach($defectsList as $item) 

                                        <tr>
                                            <td class="text-center">{{$loop->iteration}}</td>
                                            <td>{{$item->doc_name}}</td>
                                            <td>{{$item->is_active}}</td>
                                            <td class='text-center'>

                                                <a href='' class="pr-1 text-success" title="Edit">
                                                    <i class="fas fa-lg fa-fw me-5px fa-user-edit"></i>
                                                </a>
                                                <a href='' class="pr-1 text-danger" title="Delete"><i class="fas fa-lg fa-fw me-5px fa-trash"></i></a>
                                            </td>
                                        </tr>

                                        @endforeach

                                    </tbody>
                                </table>
                            </div></div></div></div>
                @endif
                @endif



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

@endsection
@push('scripts')
<script>
$(document).ready(function () {
    $('#data-table-default').DataTable({responsive: true,
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            var oSettings = this.fnSettings();
            $("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
            return nRow;
        },
    });
});

$(document).on("click", '#button', function () {
    var table = $("#masterTable").val();
    var districtUrl = "{{ url('mastersTable')}}";
    var disabled = '';
    $.get(districtUrl,
            {option: table},
            function (data) {
                // alert(data);
                var model = $('#inputcol');
                model.empty();
                $.each(data, function (index, element) {

                    if (element.column_name == 'id' || element.column_name == 'created_at' || element.column_name == 'updated_at' || element.column_name == 'is_active' || element.column_name == 'display') {
                        disabled = 'disabled';
                    } else {
                        disabled = '';
                    }
                    var html = "<div class='col-md-2 mb-2'>";
                    html += "<div class='md-form'>";
                    html += "<label for='pin' class=''><span>" + element.column_name + "</span>";
                    html += "<input type='text' " + disabled + " id='" + element.column_name + "' name='" + element.column_name + "' class='form-control form-control-sm' value=''/>";
                    html += "</label>";
                    html += "</div>";
                    html += "</div>";
                    model.append(html);
                });
                model.append("<div class='col-md-2 mb-2'>");
                model.append("<div class='md-form'>");
                model.append("<label for='pin' class=''><span></span>");
                model.append("<input type='button' id='submit' name='submit' class='btn btn-primary btn-sm form-control'  value='Save'>");
                model.append("</label>");
                model.append("</div>");
                model.append("</div>");
            }
    );
});
</script>
@endpush