@include('components/header')
@include('components/sidebar')

<style>
.empName:hover{
color:#437ff5 !important;
}
</style>
<!--  Begin CONTENT AREA  -->
    <div id="content" class="main-content">
        <div class="topbar_content mt-3">
            <h2>Portfolio List</h2>
            <div class="viewAll mr-4">
                <a href="/admin_dashboard" class="viewAllBtn">
                    <button class="btn btn-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-arrow-left">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
            </svg> Back</button>
        </a>
    </div>
</div>
<div class="layout-px-spacing layout-top-spacing">
<div class="modal-footer"></div>
@if(isset($data))
    <div class="card mb-3">
        <div class="card-body">
            <div class="box-widget widget-user">
                <div class="widget-user-image d-sm-flex">
                    <span class="avatar">
                        @if($data->profile_picture == '')
                            <img width="100px" accept="image/*"  style = "border: 8px solid #ADD8E6;" height="100px" src='{{asset("design/img/profiles/default.svg")}}' class="image">
                        @else
                            <img width="100px" accept="image/*" style = "border: 8px solid #ADD8E6;" height="100px" src='{{asset("root/documents/$data->id/profile/$data->profile_picture")}}' class="image">
                        @endif
                    </span>
                    <span class="avatar pl-4 pt-2">
                        <div class="p-1">
                            <h6><b>Name :</b> {{$data->first_name}} {{$data->middle_name}} {{$data->last_name}}</h6>
                        </div>
                        <div class="p-1">
                            <h6><b>Email : </b>{{$data->official_email}}</h6>
                        </div>
                        <div class="p-1">
                            <h6><b>Phone No. :</b>@if($data->phone_number == '') NA @else {{$data->phone_number}} @endif</h6>    
                        </div>
                    </h6>
                    </span>
                </div>
            </div>
        </div>
    </div>
@endif
<div class="row">
    <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
        <div class="widget-content widget-content-area br-6">
            @if(isset($employee))
            <table id="zero-config" class="table dt-table-hover table-striped" style="width:100%">
                <thead>
                    <tr>
                        <th>SR. No</th>
                        <th>Employee Id</th>
                        <th>Employee Name</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i=0; @endphp
                    @foreach($employee as $m)
                    <tr>
                        @php $i++; @endphp
                        <td>
                            <div class="td-content">
                                <span class="text-black">{{$i}}</span>
                            </div>
                        </td>
                        <td>{{$m->emp_id}}</td>
                        <td><a href="/portfolio/{{$m->id}}" class="empName">{{$m->name}}<a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @elseif(isset($portfolio))
                <form action="/edit_portfolio" id="portfolio_form" method="post">
                    {{csrf_field()}}
                    <table id="zero-config" class="table dt-table-hover table-striped" style="width:100%">
                        <thead>
                            <tr>
                                <th>SR. No</th>
                                <th>Employee Id</th>
                                <th>Designation</th>
                                <th>Department</th>
                                <th>Domain</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i=1;
                                $start_date = date('d-m-Y',strtotime($data->joining_date));
                                if($data->leaving_date != null){
                                    $end_date = date('d-m-Y',strtotime($data->leaving_date));
                                }else{
                                    $end_date = '-';
                                }
                            @endphp
                                <tr>
                                    <td>{{$i}}</td>
                                    <td>{{$data->id}}</td>
                                    <td>{{$data->designation_asw}}</td>
                                    <td>{{$data->departments->department}}</td>
                                    <td>{{$data->domains->domain}}</td>
                                    <td>{{$start_date}}</td>
                                    <td>{{$end_date}}</td>
                                    <td>
                                       -
                                    </td>
                                </tr>
                            @foreach($portfolio as $m)
                            <tr>
                                @php $i++;
                                    $start_date = date('d-m-Y',strtotime($m->start_date));
                                    $end_date = date('d-m-Y',strtotime($m->end_date));
                                @endphp
                                <td>
                                    <div class="td-content">
                                     
                                        <span class="text-black">{{$i}}</span>
                                    </div>
                                </td>
                                <td>{{$m->employee_id}}</td>
                                <td>{{$m->designation_asw}}</td>
                                <td>{{$m->departments->department}}</td>
                                <td>{{$m->domains->domain}}</td>
                                <td>{{$start_date}}</td>
                                <td>{{$end_date}}</td>
                                 <td>
                                    <div class="leave-action text-start d-flex">
                                        <a href="javascript:void(0);" class="eye" data-toggle="modal"
                                            data-id="{{$m->id}}" data-target="#preview">
                                            <img src="{{asset('design/img/edit.svg')}}" style="width:24px; height:24px;" />
                                        </a>
                                        <a href="javascript:void(0);" class="submit" style="display:none;" data-toggle="modal" data-id="{{$data->id}}" data-target="#preview"><svg class='addmore p-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/></svg></a>
                                        <a href="javascript:void(0);" class="cancel" style="display:none;" data-toggle="modal" data-id="{{$data->id}}" data-target="#preview">  <svg id="save" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus minus"><line fill="#ffffff" x1="5" y1="12" x2="19" y2="12"></line></svg>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </form>
            @include('create-emp-form')
            @else
            No Record Found
            @endif
        </div>
    </div>
</div>
<!--  End CONTENT AREA  -->
</div>
<!-- End Main Container -->
@if(session('done'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("done")@endphp',
        type: 'success',
        padding: '2em'
    })
    </script>
@endif
@include('components/footer')
<!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://designreset.com/cork/ltr/demo4/plugins/table/datatable/datatables.js"></script> -->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> -->
<script type="text/javascript">
   
   window.onload = function () {
        $(".eye").on('click',function() {
        var tr = $(this).closest("tr");
        var s_date = tr.find("td:eq(5)").text();
        var e_date = tr.find("td:eq(6)").text();
        console.log(s_date + e_date);
        localStorage.setItem('s_date',s_date);
        localStorage.setItem('e_date',e_date);
        var emp_id = $(this).data('id');
       var col1 = tr.find("td:eq(5)");
       col1.text(" ");
       col1.append('<input type="hidden" name="emp_id" value="'+emp_id+'"><input type="text" autocomplete="off" name="s_date" class="form-control s_date"><span class="text-danger"></span>');

       var col2 = tr.find("td:eq(6)");
       col2.text(" ");
       col2.append('<input type="text" name="e_date" autocomplete="off" class="form-control e_date"><span class="text-danger"></span>');

        tr.find("td:eq(7) div a:nth-child(3)").css('display','block');
        tr.find("td:eq(7) div a:nth-child(2)").css('display','block');
        tr.find("td:eq(7) div a:nth-child(1)").css('display','none');
        $(".s_date").datepicker({
                dateFormat: "dd/mm/yy"
            });
        $(".s_date").datepicker({});
        $(".e_date").datepicker({});

        
    })

    $(document).on("click",".submit", function(e){
        var tr = $(this).closest("tr");
        var col1 = tr.find("td:eq(5) input[type='text']").val();
        var col2 = tr.find("td:eq(6) input[type='text']").val();
        if(col1 == ''){
            tr.find("td:eq(5) span").text("This field is required*");
            e.preventDefault();
        }else{
            tr.find("td:eq(5) span").text("");
        }

        if(col2 == ''){
            tr.find("td:eq(6) span").text("This field is required*");
            e.preventDefault();
        }else{
            tr.find("td:eq(6) span").text("");
        }

        if(col1 != '' && col2 != ''){
            $("#portfolio_form").submit();
        }
    });

    $(document).on("click",".cancel", function(){
        var s_date = localStorage.getItem('s_date');
        var e_date = localStorage.getItem('e_date');

        var tr = $(this).closest("tr");
        var col1 = tr.find("td:eq(5)").text(s_date);
        var col2 = tr.find("td:eq(6)").text(e_date);

        tr.find("td:eq(7) div a:nth-child(3)").css('display','none');
        tr.find("td:eq(7) div a:nth-child(2)").css('display','none');
        tr.find("td:eq(7) div a:nth-child(1)").css('display','block');
    });
}
   
</script>