@extends('layouts.app')

@section('title', 'Tree')



@section('content')
    <div class="row">
    <div class="col-md-12">
        <div class="container">
            <div class="m_cd">
                <ul id="tree1">
                    <!-- <p class="well" style="height:135px;"><strong>Initialization no parameters</strong>

                        <code>$('#tree1').treed();</code>

                    </p> -->
                    
                    @foreach($main as $ma)
                    <li><a href="#" data-id="{{ $ma->sno }}" data-head="{{ $ma->head }}" class="main00">{{ $ma->head }}</a>
                    
                        <ul>
                            <li><a class="ma" data-ids="{{$ma->sno}}" data-pid="{{ $ma->sno }}" data-phead="{{ $ma->head }}"> Add New </a></li>
                            @foreach(App\Models\ma::where('sno' , 'LIKE' , $ma->sno.'-%')->get() as $m)
                            <li>
                                <a data-id="{{ $m->sno }}" data-head="{{ $m->head }}" data-pid="{{ $ma->sno }}" data-phead="{{ $ma->head }}" class="ma">{{ $m->head }}</a>
                                <ul>
                                    <li><a class="ca" data-ids="{{$m->sno}}" data-pid="{{ $m->sno }}" data-phead="{{ $m->head }}"> Add New </a></li>
                                    @foreach(App\Models\ca::where('sno' , 'LIKE' , $m->sno.'-%')->get() as $ca)
                                        <li><a href="#" data-id="{{ $ca->sno }}" data-head="{{ $ca->head }}" data-pid="{{ $m->sno }}" data-phead="{{ $m->head }}" class="ca">{{ $ca->head }}</a>
                                            <ul>
                                            <li><a class="ca1" data-ids="{{$ca->sno}}" data-pid="{{ $ca->sno }}" data-phead="{{ $ca->head }}"> Add New </a></li>
                                            @foreach(App\Models\ca1::where('sno1' , 'LIKE' , $ca->sno.'-%')->get() as $ca1)
                                                <li><a data-id="{{ $ca1->sno1 }}" data-head="{{ $ca1->head }}" data-phone="{{ $ca1->phone }}" data-cell="{{ $ca1->cell }}" data-city="{{ $ca1->city }}" data-address="{{ $ca1->address }}"  data-pid="{{ $ca->sno }}" data-phead="{{ $ca->head }}" class="ca1"> {{ $ca1->head }} </a></li>
                                            @endforeach
                                            </ul>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>
                            @endforeach
                        </ul>

                    </li>
                    @endforeach

                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-12 form_sec">



        <form action="{{ route('savemain') }}" method="post" id="main" style="display:none"><input type="hidden" value="" name="ids" id="ids" class="ids" /> 
        <h3 id="psno"></h3>
        <h3 id="phead"></h3>
        
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @csrf
            <div class="container">

                <!-- <div class="row">

                    <div class="col-12">
                        <h1 style="border: 1px solid black; padding: 5px; border-radius: 7px; background-color: #007bff; font-size: 30px; text-align: center; font-weight: 500; color: white;">mainS</h1>
                    </div>

                </div> -->

                <div class="row">

                    <div class="col-sm-3 col-7">

                        <div class="row">

                            <div class="col-sm-4 col-3">

                                <label for="sno">Id</label>

                            </div>

                            <div class="col-sm-8 col-5">

                                <input autocomplete="off" type="text" name="sno" id="sno" class="form-control"
                                style="background-color: white;" value="{{ isset($main->sno) ? old('sno', $main->sno) : old('sno') }}" readonly>

                            </div>

                        </div>

                    </div>

                </div><br>

                
                
                <div class="row">

                    <div class="col-sm-12">

                        <div class="row">

                            <div class="col-sm-1 col-2">

                                <label for="head">Name</label>

                            </div>

                            <div class="col-sm-11 col-10">


                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="head" id="head" class="form-control"
                                    value="{{ isset($main->head) ? old('head', $main->head) : old('head')  }}" required>

                            </div>

                        </div>

                    </div>

                </div>

            </div><br>

            

            <div class="row">

                <div class="col-5"></div>

                <div class="col-2">

                    <button type="submit" tabindex="1" name="add_user" value="1" class="btn btn-primary btn-lg mt-2"
                        style="margin: auto; border-radius: 13px;">Submit</button>

                </div>

            </div>

        </form>
        
        

      
        <form action="{{ route('savema') }}" method="post" id="ma"  style="display:none"><input type="hidden" value="" name="ids" id="ids" class="ids" />
        <h3 id="psno"></h3>
        <h3 id="phead"></h3>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @csrf
            <div class="container">

                <!-- <div class="row">

                    <div class="col-12">
                        <h1 style="border: 1px solid black; padding: 5px; border-radius: 7px; background-color: #007bff; font-size: 30px; text-align: center; font-weight: 500; color: white;">mainS</h1>
                    </div>

                </div> -->

                <div class="row">

                    <div class="col-sm-3 col-7">

                        <div class="row">

                            <div class="col-sm-4 col-3">

                                <label for="sno">Id</label>

                            </div>

                            <div class="col-sm-8 col-5">

                                <input autocomplete="off" type="text" name="sno" id="sno" class="form-control"
                                style="background-color: white;" readonly>

                            </div>

                        </div>

                    </div>

                </div><br>

                
                
                <div class="row">

                    <div class="col-sm-12">

                        <div class="row">

                            <div class="col-sm-1 col-2">

                                <label for="head">Name</label>

                            </div>

                            <div class="col-sm-11 col-10">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="head" id="head" class="form-control"
                                     required>

                            </div>

                        </div>

                    </div>

                </div>

            </div><br>

            

            <div class="row">

                <div class="col-5"></div>

                <div class="col-2">

                    <button type="submit" tabindex="1" name="add_user" value="1" class="btn btn-primary btn-lg mt-2"
                        style="margin: auto; border-radius: 13px;">Submit</button>

                </div>

            </div>

        </form>

        

       
        <form action="{{ route('saveca') }}" method="post" id="ca"  style="display:none"><input type="hidden" value="" name="ids" id="ids" class="ids" />
        <h3 id="psno"></h3>
        <h3 id="phead"></h3>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @csrf
            <div class="container">

                <!-- <div class="row">

                    <div class="col-12">
                        <h1 style="border: 1px solid black; padding: 5px; border-radius: 7px; background-color: #007bff; font-size: 30px; text-align: center; font-weight: 500; color: white;">mainS</h1>
                    </div>

                </div> -->

                <div class="row">

                    <div class="col-sm-3 col-7">

                        <div class="row">

                            <div class="col-sm-4 col-3">

                                <label for="sno">Id</label>

                            </div>

                            <div class="col-sm-8 col-5">

                                <input autocomplete="off" type="text" name="sno" id="sno" class="form-control"
                                style="background-color: white;" value="{{ isset($ca->sno) ? old('sno', $ca->sno) : old('sno') }}" readonly>

                            </div>

                        </div>

                    </div>

                </div><br>

                
                
                <div class="row">

                    <div class="col-sm-12">

                        <div class="row">

                            <div class="col-sm-1 col-2">

                                <label for="head">Name</label>

                            </div>

                            <div class="col-sm-11 col-10">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="head" id="head" class="form-control"
                                    value="{{ isset($ca->head) ? old('head', $ca->head) : old('head')  }}" required>

                            </div>

                        </div>

                    </div>

                </div>

            </div><br>

            

            <div class="row">

                <div class="col-5"></div>

                <div class="col-2">

                    <button type="submit" tabindex="1" name="add_user" value="1" class="btn btn-primary btn-lg mt-2"
                        style="margin: auto; border-radius: 13px;">Submit</button>

                </div>

            </div>

        </form>

        

       

        <form action="{{ route('savesa') }}" method="post" id="sa"  style="display:none"><input type="hidden" value="" name="ids" id="ids" class="ids" />
        <h3 id="psno"></h3>
        <h3 id="phead"></h3>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @csrf
            <div class="container">

                <!-- <div class="row">

                    <div class="col-12">
                        <h1 style="border: 1px solid black; padding: 5px; border-radius: 7px; background-color: #007bff; font-size: 30px; text-align: center; font-weight: 500; color: white;">saS</h1>
                    </div>

                </div> -->

                <div class="row">

                    <div class="col-sm-3 col-7">

                        <div class="row">

                            <div class="col-sm-4 col-3">

                                <label for="sno">Id</label>

                            </div>

                            <div class="col-sm-8 col-5">

                                <input autocomplete="off" type="text" name="sno" id="sno" class="form-control"
                                style="background-color: white;" value="{{ isset($sa->sno) ? old('sno', $sa->sno) : old('sno') }}" readonly>

                            </div>

                        </div>

                    </div>

                </div><br>

                
                
                <div class="row">

                    <div class="col-sm-12">

                        <div class="row">

                            <div class="col-sm-1 col-2">

                                <label for="head">Name</label>

                            </div>

                            <div class="col-sm-11 col-10">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="head" id="head" class="form-control"
                                    value="{{ isset($sa->head) ? old('head', $sa->head) : old('head')  }}" required>

                            </div>

                        </div>

                    </div>

                </div><br>

                

                <div class="row">

                    <div class="col-6">

                        <div class="row">

                            <div class="col-2">

                                <label for="category">Category</label>

                            </div>

                            <div class="col-10">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="category" id="category" class="form-control"
                                    value="{{ isset($sa->category) ? old('category', $sa->category) : old('category') }}">

                            </div>

                        </div>

                    </div><br>

                    <div class="col-6">

                        <div class="row">

                            <div class="col-1">

                                <label for="code">Code</label>

                            </div>

                            <div class="col-11">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="code" id="code" class="form-control"
                                    value="{{ isset($sa->code) ? old('code', $sa->code) : old('code')  }}">

                            </div>

                        </div>

                    </div>
                    
                </div>

            </div><br>

            

            <div class="row">

                <div class="col-5"></div>

                <div class="col-2">

                    <button type="submit" tabindex="1" name="add_user" value="1" class="btn btn-primary btn-lg mt-2"
                        style="margin: auto; border-radius: 13px;">Submit</button>

                </div>

            </div>

        </form>

        

      

        <form action="{{ route('saveca1') }}" method="post" id="ca1"  style="display:none"><input type="hidden" value="" name="ids" id="ids" class="ids" />
        <h3 id="psno"></h3>
        <h3 id="phead"></h3>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @csrf
            <div class="container">

                <!-- <div class="row">

                    <div class="col-12">
                        <h1 style="border: 1px solid black; padding: 5px; border-radius: 7px; background-color: #007bff; font-size: 30px; text-align: center; font-weight: 500; color: white;">saS</h1>
                    </div>

                </div> -->

                <div class="row">

                    <div class="col-sm-3 col-7">

                        <div class="row">

                            <div class="col-sm-4 col-3">

                                <label for="sno1">Id</label>

                            </div>

                            <div class="col-sm-8 col-5">

                                <input autocomplete="off" type="text" name="sno1" id="sno1" class="form-control"
                                style="background-color: white;" value="{{ isset($ca1->sno1) ? old('sno1', $ca1->sno1) : old('sno1') }}" readonly>

                            </div>

                        </div>

                    </div>

                </div><br>

                
                
                <div class="row">

                    <div class="col-sm-12">

                        <div class="row">

                            <div class="col-sm-1 col-2">

                                <label for="head">Name</label>

                            </div>

                            <div class="col-sm-11 col-10">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="head" id="head" class="form-control"
                                    value="{{ isset($ca1->head) ? old('head', $ca1->head) : old('head')  }}" required>

                            </div>

                        </div>

                    </div>

                </div><br>

                

                <div class="row">

                    <div class="col-4">

                        <div class="row">

                            <div class="col-3">

                                <label for="phone">Phone</label>

                            </div>

                            <div class="col-9">

                                <input autocomplete="off" tabindex="1" type="text" name="phone" id="phone" class="form-control"
                                    value="{{ isset($ca1->phone) ? old('phone', $ca1->phone) : old('phone') }}">

                            </div>

                        </div>

                    </div>

                    <div class="col-4">

                        <div class="row">

                            <div class="col-3">

                                <label for="cell">Cell No</label>

                            </div>

                            <div class="col-9">

                                <input autocomplete="off" tabindex="1" type="text" name="cell" id="cell" class="form-control"
                                    value="{{ isset($ca1->cell) ? old('cell', $ca1->cell) : old('cell')  }}">

                            </div>

                        </div>

                    </div>

                    <div class="col-4">

                        <div class="row">

                            <div class="col-2">

                                <label for="city">City</label>

                            </div>

                            <div class="col-10">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="city" id="city" class="form-control"
                                    value="{{ isset($ca1->city) ? old('city', $ca1->city) : old('city')  }}">

                            </div>

                        </div>

                    </div>
                    
                </div><br>

                

                <div class="row">

                    <div class="col-sm-12">

                        <div class="row">

                            <div class="col-sm-1 col-2">

                                <label for="address">Address</label>

                            </div>

                            <div class="col-sm-11 col-10">

                                <input autocomplete="off" style="text-transform: uppercase;" tabindex="1" type="text" name="address" id="address" class="form-control"
                                    value="{{ isset($ca1->address) ? old('address', $ca1->address) : old('address')  }}" required>

                            </div>

                        </div>

                    </div>

                </div>

            </div><br>

            

            <div class="row">

                <div class="col-5"></div>

                <div class="col-2">

                    <button type="submit" tabindex="1" name="add_user" value="1" class="btn btn-primary btn-lg mt-2"
                        style="margin: auto; border-radius: 13px;">Submit</button>

                </div>

            </div>

        </form>

    </div>
    </div>
@endsection



@section('scripts')

    <script>

        $.fn.extend({
            treed: function (o) {
            
            var openedClass = 'glyphicon-minus-sign';
            var closedClass = 'glyphicon-plus-sign';
            
            if (typeof o != 'undefined'){
                if (typeof o.openedClass != 'undefined'){
                openedClass = o.openedClass;
                }
                if (typeof o.closedClass != 'undefined'){
                closedClass = o.closedClass;
                }
            };
            
                //initialize each of the top levels
                var tree = $(this);
                tree.addClass("tree");
                tree.find('li').has("ul").each(function () {
                    var branch = $(this); //li with children ul
                    branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
                    branch.addClass('branch');
                    branch.on('click', function (e) {
                        if (this == e.target) {
                            var icon = $(this).children('i:first');
                            icon.toggleClass(openedClass + " " + closedClass);
                            $(this).children().children().toggle();
                            $('[name="head"]').focus();
                        }
                    })
                    branch.children().children().toggle();
                });
                //fire event from the dynamically added icon
            tree.find('.branch .indicator').each(function(){
                $(this).on('click', function () {
                    $(this).closest('li').click();
                    $('[name="head"]').focus();
                });
            });
                //fire event to open branch if the li contains an anchor instead of text
                tree.find('.branch>a').each(function () {
                    $(this).on('click', function (e) {
                        $(this).closest('li').click();
                        $('[name="head"]').focus();
                        e.preventDefault();
                    });
                });
                //fire event to open branch if the li contains a button instead of text
                tree.find('.branch>button').each(function () {
                    $(this).on('click', function (e) {
                        $(this).closest('li').click();
                        $('[name="head"]').focus();
                        e.preventDefault();
                    });
                });
            }
        });

        //Initialization of treeviews

        $('#tree1').treed();

        $('#tree2').treed({openedClass:'glyphicon-folder-open', closedClass:'glyphicon-folder-close'});

        $('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});


        $(document).ready(function() {
            $('.tree a').click(function() {
                $class = $(this).attr('class');
                $('.form_sec form').hide();
                console.log($class);
                $('#'+$class).show();
                $sno = $(this).attr('data-id');
                $head = $(this).attr('data-head');
                $phone = $(this).attr('data-phone');
                $cell = $(this).attr('data-cell');
                $city = $(this).attr('data-city');
                $address = $(this).attr('data-address');


                
                $psno = $(this).attr('data-pid');
                $phead = $(this).attr('data-phead');
                
                $('#'+$class).find('#psno').html($psno);
                $('#'+$class).find('#phead').html($phead);

                
                $ids = $(this).attr('data-ids');
                $('#'+$class).find('#sno').val($sno);
                $('#'+$class).find('#sno1').val($sno);
                $('#'+$class).find('#ids').val($ids);
                $('#'+$class).find('#head').val($head);
                $('#'+$class).find('#phone').val($phone);
                $('#'+$class).find('#cell').val($cell);
                $('#'+$class).find('#city').val($city);
                $('#'+$class).find('#address').val($address);
                $('#'+$class).find('#head').get(0).focus();
            });
        });


    </script>

@endsection

@section('ccss')

    <style>
        body {
            background:white;
        }
        
        .tree, .tree ul {
            margin:0;
            padding:0;
            list-style:none
        }
        .tree ul {
            margin-left:1em;
            position:relative
        }
        .tree ul ul {
            margin-left:.5em
        }
        .tree ul:before {
            content:"";
            display:block;
            width:0;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            border-left:1px solid
        }
        .tree li {
            margin:0;
            padding:0 1em;
            line-height:2em;
            color:#369;
            font-weight:700;
            position:relative
        }
        .tree ul li:before {
            content:"";
            display:block;
            width:10px;
            height:0;
            border-top:1px solid;
            margin-top:-1px;
            position:absolute;
            top:1em;
            left:0
        }
        .tree ul li:last-child:before {
            background:#fff;
            height:auto;
            top:1em;
            bottom:0
        }
        .indicator {
            margin-right:5px;
        }
        .tree li a {
            text-decoration: none;
            color:#369;
        }
        .tree li button, .tree li button:active, .tree li button:focus {
            text-decoration: none;
            color:#369;
            border:none;
            background:transparent;
            margin:0px 0px 0px 0px;
            padding:0px 0px 0px 0px;
            outline: 0;
        }
        h3{
            text-align:center;
        }

        .m_cd {
            padding: 10px;
            background: #fff;
            margin-top: 20px;
            margin-bottom: 20px;
            max-height: 400px;
            height: 400px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>

@endsection