@extends('layouts.default')
@section('title', 'Dynamic Master')
@push('head')
use Illuminate\Support\Facades\Crypt;


<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>

<script src="../assets/plugins/sweetalert/dist/sweetalert.min.js"></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">DYNAMIC 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">Dynamic Master Details</h4>
                </div>
                <form method="POST">
                    @csrf
                    <div class="panel-body">
                        <div class="row">
                            <div class='col-md-2 mb-2'>
                                <div class='md-form'>
                                    <label for='pin' class=''><span>&nbsp;</span>
                                        <select class="form-select form-select-sm" name='masterTable' id='masterTable'>
                                            <option value=''>------Select Table------</option>
                                            @if(!empty($allTables))
                                            @if(count($allTables)>0)
                                            @foreach($allTables as $item)
                                            <option value='{{$item->tablename}}'>{{$item->tablename}}</option>
                                            @endforeach
                                            @endif
                                            @endif
                                        </select>
                                    </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='button' name='button' class='btn btn-primary btn-sm form-control'  value='SUBMIT'>
                                        <input type='button' id='tdata' style='display:none' name='tbutton' class='btn btn-primary btn-sm form-control'  value='SUBMIT'>
                                    </label>
                                </div>
                            </div>  
                        </div>
                        <div class="panel-body">
                            <div class="row" id='inputcol'>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h4 class="panel-title">Dynamic Master Data</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" id="table">

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

@endsection
@push('scripts')
<script>
$(document).ready(function () {

    $(document).on("click", '#button', function () {
        var table = $("#masterTable").val();
        var districtUrl = "{{ url('mastersTable')}}";
        var i = 0;
        $.get(districtUrl,
                {option: table},
                function (data) {
//                    var data = data.split("~");
//                    // alert(data);
                    var model = $('#inputcol');
                    model.empty();
                    var prim = "";
                    $.each(data, function (index, element) {
                        if (element.t == "a") {
                            prim = element.column_name;
                        } else {
                            var disabled = '';
                            var color = '';
                            if (element.column_name == prim || element.column_name == "display" || element.column_name == "created_at" || element.column_name == "updated_at" || element.column_name == "is_active") {
                                disabled = "readonly"
                                color = "style='background-color:#dee2e6'";
                            }
                            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 class='inpt' type='text' " + color + "  " + 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);
                        }
                    });
                    var html1 = "<div class='col-md-2 mb-2'>";
                    html1 += "<div class='md-form'>";
                    html1 += "<label for='pin' class=''><span>&nbsp;</span>";
                    html1 += "<input type='button' id='submit' name='submit' class='btn btn-primary btn-sm form-control'  value='Save'>";
                    html1 += "<input type='hidden' id='prim' name='" + prim + "'   value='" + prim + "'>";
                    html1 += "</label>";
                    html1 += "</div>";
                    html1 += "</div>";
                    model.append(html1);
//                    getTableData(table);
                    $('#tdata').trigger('click');
                }
        );
        if (table == "master_document") {
            var districtUrl1 = "{{ url('getDocCode')}}";
            $.get(districtUrl1,
                    {table: table},
                    function (data) {
                        alert(data);
                        $('#doccode').val(data);
                        $("#doccode").attr('readonly', 'readonly');
                        $('#doccode1').val(0);
                        $('#doccode_old').val(0);
                        $("#doccode1").attr('readonly', 'readonly');
                    }
            );
        }
    });

   $(document).on("keyup", 'input', function () {
        var inputid = $(this).prop('id');
        var val = $(this).val();
        var table = $("#masterTable").val();
        var districtUrl = "{{ url('tableDataFilter')}}";
        var i = 0, j = 0, m = 0;
        var id;
        $.get(districtUrl,
                {option: table, inputid: inputid, val: val},
                function (data) {
                    // alert(data);
                    var model = $('#table');
                    model.empty();
                    var html = "<table id='data-table-default' class='table table-striped table-bordered align-middle'>";
                    html += "<thead>";
                    var result = (data[0]);
                    var columns = String(Object.keys(result[0])).split(',');
                    html += "<tr>";
                    $.each(columns, function (k, v) {
                        html += "<th>" + columns[i] + "</th>";
                        i++;
                    });
                    html += "</tr></thead><tbody>";
                    $.each(result, function (k, v) {
                        html += "<tr>";
                        j = 0;
                        m = 0;
                        $.each(columns, function (k1, v1) {
                            if (m == 0) {
                                id = eval("v." + columns[j]);
                                url = 'masterdetails/' + id + '/' + table;
//                              url = url.replace(':id', id);
                            }
//                             alert(eval("v." + columns[j]));
                            html += "<td>" + eval("v." + columns[j]) + "</td>";

                            j++;
                            m++;

                        });

//                        alert(eval("v." + columns[0]));
//                        alert(eval("v." + columns[1]));
//                        alert(eval("v." + columns[2]));
//                        alert(eval("v." + columns[3]));
//                        alert(eval("v." + columns[4]));
//                        ++j;
                        html += "<td class='text-center'><a href='#' id='edit-" + id + "' class='pr-1 text-success' title='Edit'><i class='fas fa-lg fa-fw me-5px fa-user-edit'></i></a><a href='#' id='delete-" + id + "' class='pr-1 text-danger' title='Delete'><i class='fas fa-lg fa-fw me-5px fa-trash'></i></a></td>";
                        html += "</tr>";

                    });

                    html += "</tbody>";
                    html += "</table>";

                    model.append(html);
                }
        );
    });


    $('#tdata').click(function () {
        var table = $("#masterTable").val();
        var districtUrl = "{{ url('tableData')}}";
        var i = 0, j = 0, m = 0;
        var cntr = 0;
        var id;
        $.get(districtUrl,
                {option: table},
                function (data) {
                    // alert(data);
                    var model = $('#table');
                    model.empty();
                    var html = "<table id='data-table-default' class='table table-striped table-bordered align-middle'>";
                    html += "<thead>";
                    var result = (data[0]);
                    var columns = String(Object.keys(result[0])).split(',');
                    html += "<tr>";
                    $.each(columns, function (k, v) {
                        if (columns[i] == "id") {
                            html += "<th>sno</th>";
                        } else {
                            html += "<th>" + columns[i] + "</th>";
                        }
                        i++;
                    });
                    html += "</tr></thead><tbody>";
                    $.each(result, function (k, v) {
                         t = 0;
                        html += "<tr>";
                        j = 0;
                        m = 0;
                        $.each(columns, function (k1, v1) {
                            if (m == 0) {
                                id = eval("v." + columns[j]);
                                url = 'masterdetails/' + id + '/' + table;
//                              url = url.replace(':id', id);
                            }
//                             alert(eval("v." + columns[j]));
                             if (t == 0) {
                                html += "<td>"+ (++cntr) +"</td>";
                            } else {
                                html += "<td>" + eval("v." + columns[j]) + "</td>";
                            }

                            j++;
                            m++;
                            t++;

                        });

//                        alert(eval("v." + columns[0]));
//                        alert(eval("v." + columns[1]));
//                        alert(eval("v." + columns[2]));
//                        alert(eval("v." + columns[3]));
//                        alert(eval("v." + columns[4]));
//                        ++j;
                        html += "<td class='text-center'><a href='#' id='edit-" + id + "' class='pr-1 text-success' title='Edit'><i class='fas fa-lg fa-fw me-5px fa-user-edit'></i></a><a href='#' id='delete-" + id + "' class='pr-1 text-danger' title='Delete'><i class='fas fa-lg fa-fw me-5px fa-trash'></i></a></td>";
                        html += "</tr>";

                    });

                    html += "</tbody>";
                    html += "</table>";

                    model.append(html);
                }
        );
    });
    $('#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", '#submit', function () {
        var table = $("#masterTable").val();
        var btnval = $("#submit").val();
        var prim = $("#prim").val();
        var obj = [];
        var newObject = new Object();
        var districtUrl = "{{ url('savemaster')}}";
        $('.inpt').each(function () {
            key = $(this).prop('id');
            value = $(this).val();
            newObject[key] = value;

        });
        obj.push(newObject);
        $.post(districtUrl,
                {prim: prim, option: table, input: obj, btnval: btnval, "_token": "{{ csrf_token() }}"},
                function (data) {
                    alert(data);
                    $('#tdata').trigger('click');
                    $('.inpt').each(function () {
                        $(this).val('');
                    });
                    $("#submit").val("Save");
                }
        );
    });
});

$(document).on('click', 'a', function () {

//    swal({
//        title: 'Are you sure to delete?',
//        text: '',
//        icon: 'info',
//        buttons: {            
//            confirm: {
//                text: 'Yes',
//                value: true,
//                visible: true,
//                className: 'btn btn-primary',
//                closeModal: true
//                alert("Done");
//            }
//            cancel: {
//                text: 'Cancel',
//                value: null,
//                visible: true,
//                className: 'btn btn-default',
//                closeModal: true,
//            },
//        }
//    });


    var table = $("#masterTable").val();
    var prim = $("#prim").val();
    var ids = this.id;
    ids = ids.split("-");
    var act = ids[0];
    var pid = ids[1];
    var districtUrl = "";
    var cols = '';
    $('table thead>tr').each(function () {
        $('th', this).each(function () {
            html_table_data = $(this).text();
            if (html_table_data == 'display') {
                cols = "display";
            } else if (html_table_data == 'is_active') {
                cols = "is_active";
            }
        });
    });
    if (act == "edit")
        districtUrl = "{{ url('masterdetails')}}";
    else if (act == "delete")
        districtUrl = "{{ url('deletemaster')}}";
    $.get(districtUrl,
            {option: table, id: pid, col: cols, prim: prim},
            function (data) {
                if (act == "delete") {
                    alert(data);
                    $('#tdata').trigger('click');
                } else if (act == "edit") {
                    $("#submit").val("Update");
                    var result = (data[0]);
                    var columns = String(Object.keys(result[0])).split(',');
                    // alert(columns);
                    var i = 0;
                    $.each(columns, function (k, v) {

                        $.each(result, function (k, v) {
                            j = 0;
                            m = 0;
                            $.each(columns, function (k1, v1) {
                                var element = columns[i];
                                i++;
                                $("#" + element).val(eval("v." + columns[j]));
//                            html += "<td>" + eval("v." + columns[j]) + "</td>";

                                j++;
                                m++;

                            });

//                        alert(eval("v." + columns[0]));
//                        alert(eval("v." + columns[1]));
//                        alert(eval("v." + columns[2]));
//                        alert(eval("v." + columns[3]));
//                        alert(eval("v." + columns[4]));
//                        ++j;
                            html += "<td class='text-center'><a href='#' id='edit-" + id + "' class='pr-1 text-success' title='Edit'><i class='fas fa-lg fa-fw me-5px fa-user-edit'></i></a><a href='#' id='delete-" + id + "' class='pr-1 text-danger' title='Delete'><i class='fas fa-lg fa-fw me-5px fa-trash'></i></a></td>";
                            html += "<tr>";

                        });
                    });

                }
            }
    );


});

//function someFunction() {
//var table = $("#masterTable").val();
//var key = $(this).attr('id');
//alert(key);
//}
</script>


@endpush