@extends('layouts.app')
@section('title', 'Client')
@section('content') 
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" style="background: #D1FFD2 0% 0% no-repeat padding-box;box-shadow: 0px 3px 6px #00000029;opacity: 1;">
                    <h5 class="mt-0 text-left"> Client </h5>
                </div></br>
                <div class="row" align="right">
                    <div class="col-md-3"></div>
                    <div class="col-md-9">
                        <i class="fa fa-search"></i>
                        <input type="text" id="search" name="search" placeholder="Search..." autocomplete="off">
                        <a type="button" class="btn btn-success active_icon_view" id="org_list"><img class="menuicon" src="{{asset('app-assets/images/orgicons/list.svg')}}"></a>
                        <a type="button" class="btn btn-outline-success inactive_icon_view" id="org_grid" style="margin-right:10px;"><img class="menuicon" src="{{asset('app-assets/images/orgicons/grid.svg')}}"></a>
                    </div>
                </div>
                <div class="card-body">
                    <section class="card mt-2" id="org_list_view">
                        <div class="row">
                            <table class="table mb-0 org_table" id="org_list_table">
                                <tbody>
                                    @foreach($organizations as $org)
                                        <tr class="show_list">
                                            <td class="image">
                                                @if(isset($org->logo))
                                                    <img class="card-img-top" src="data:image;base64,{{base64_encode($org->logo)}}" style="width:100%;opacity: 1;">
                                                @else
                                                    <span></span>
                                                @endif
                                            </td>
                                            <td>
                                                <span><img class="menuicon" src="{{asset('app-assets/images/orgicons/people.svg')}}"></span>&nbsp;<label>Client Name</label><br>
                                                <span>{{$org->org_name}}</span>
                                            </td>
                                            <td>
                                                <span><img class="menuicon" src="{{asset('app-assets/images/orgicons/phone.svg')}}"></span>&nbsp;<label>Contact Number</label><br>
                                                <span>{{$org->contact_no}}</span>
                                            </td>
                                            <td>
                                                <span><img class="menuicon" src="{{asset('app-assets/images/orgicons/email.svg')}}"></span>&nbsp;<label>Contact Email</label><br>
                                                <span>{{$org->email_id}}</span>
                                            </td>
                                            <td>
                                                <a class="btn" style="border: 1px solid #C4C4C4;border-radius: 8px;opacity: 1;" href="{{ url('organization/'.$org->id) }}">
                                                    <span><img src="{{asset('app-assets/images/orgicons/view.svg')}}"> &nbsp;<span class="view">View<span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </section>
                    <section class="card mt-2" id="org_grid_view" style="display:none;margin-left:40px;">
                        @foreach ($organizations->chunk(4) as $chunk)
                        <div class="row show_grid">
                            @foreach($chunk as $org)
                            <div class="card grid" style="width: 19rem;word-wrap: normal;">
                                <div class=" align-items-center" >
                                @if(isset($org->logo))
                                    <img class="card-imdg-top gridd_img  rounded-circle img-responsive" src="data:image;base64,{{base64_encode($org->logo)}}"  height="75" width="75" style="padding: 3px;border: 2px solid #707070; ">
                                @else
                                    <img class="card-img-top grid_img" alt=""  height="75" width="75" style="padding: 3px;border: 2px solid #707070; ">
                                @endif
                            </div>
                                    <div class="card-body">
                                    <h5 class="card-title">{{$org->org_name}}</h5></br>
                                    <div class="row g_icon">
                                        <div class="col-md-6">
                                            <img src="{{asset('app-assets/images/orgicons/phone.svg')}}" width="10px" height="10px">&nbsp;{{$org->contact_no}}
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <img src="{{asset('app-assets/images/orgicons/email.svg')}}" width="12px" height="12px">
                                                </div>
                                                <div class="col-md-9">
                                                    <p style="word-wrap: break-word;">{{$org->email_id}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-6">
                                            <a class="btn" style="border: 1px solid #C4C4C4;border-radius: 8px;opacity: 1;" href="{{ url('organization/'.$org->id) }}">
                                                <span><img src="{{asset('app-assets/images/orgicons/view.svg')}}"> &nbsp;<span class="view">View<span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </section>
                    <div style="float: right;">
                        {{ $organizations->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.dropify').dropify({
            messages: {
                'default': 'Upload Logo<br/>Or</br>Drag it Here',
            }
        });

        $('#org_grid').on('click', function () {
            $("#org_list").removeClass("active_icon_view");
            $("#org_list").addClass("inactive_icon_view");
            $("#org_grid").removeClass("inactive_icon_view");
            $("#org_grid").addClass("active_icon_view");
            $('#org_list_view').hide();
            $('#org_grid_view').show();
        })

        $('#org_list').on('click', function () {
            $("#org_grid").removeClass("active_icon_view");
            $("#org_grid").addClass("inactive_icon_view");
            $("#org_list").removeClass("inactive_icon_view");
            $("#org_list").addClass("active_icon_view");
            $('#org_list_view').show();
            $('#org_grid_view').hide();
        })
    });
    $('#search').on('keyup',function(){
        $value=$(this).val();
        $.ajax({
            type : 'get',
            url : "{{route('organization_search')}}",
            data:{'search':$value},
            success:function(data){
                $("#org_list_table tbody").html(data.data1);
                $("#org_grid_view").html(data.data2);
            }
        });
    })

</script>
@endsection