@include('layout.header')

<section id="content">
    <section class="bgGrey py-4">
        <div class="container">
            <div class="table-title p-0 pt-3 pb-2 text-bold" style="font-weight: bold;">Sobat JBA</div>
            <div class="row p-2" style="background-color: #fff;border-radius: 10px;">
                <div class="col-lg-3 p-2">
                    <div class="form-group m-0">
                        <input type="text" name="userfind-name" id="userfind-name" class="form-control" placeholder="Nama">
                    </div>
                </div>
                <div class="col-lg-3 p-2">
                    <div class="form-group m-0">
                        <select id="userfind-branch" name="userfind-branch" class="form-control select2" style="width: 100%;">
                            <option value="">Cabang / Lokasi</option>
                            @foreach ($branch as $item)
                              <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-3 p-2">
                    <div class="form-group m-0">
                        <input type="email" name="userfind-email" id="userfind-email" class="form-control" placeholder="Email">
                    </div>
                </div>
                <div class="col-lg-3 p-2">
                    <button type="button" class="btn btn-danger w-100" id="userfind-submit">Cari Sobat JBA</button>
                </div>
            </div>
            <div class="row" id="userfind-result" style="min-height: 500px;">
                @foreach ($users as $item)
                <div class="col-lg-6 pr-4 pl-4">
                    <div class="row p-3 mt-3" style="background-color: #fff;border-radius: 10px;">
                        <div class="col-lg-3 p-0">
                            @if($item->picture != null)
                            <img src="{{asset($item->picture)}}" style="max-width: 100%;border-radius: 10px;max-height: 150px;">
                            @else
                            <img src="{{asset('assets/img/user-default.png')}}" style="max-width: 100%;max-height: 150px;border-radius: 10px;">
                            @endif
                        </div>
                        <div class="col-lg-9">
                            <div class="pb-2">
                                <span style="font-size: 20px;font-weight: bold;">{{$item->name}}</span>
                                @if($item->position != null)
                                <span style="font-size: 14px;font-weight: normal;">({{$item->position->name}})</span>
                                @endif
                            </div>
                            <div class="pb-2">
                                <p class="m-0">{{$item->motto}}</p>
                            </div>
                            <div class="row pb-1">
                                <div class="col-lg-2">NIK</div>
                                <div class="col-lg-10" style="font-weight: bold;">{{$item->nik}}</div>
                            </div>
                            <div class="row pb-1">
                                <div class="col-lg-2">Email</div>
                                <div class="col-lg-10" style="font-weight: bold;">{{$item->email}}</div>
                            </div>
                            <div class="row pb-1">
                                <div class="col-lg-2">Phone</div>
                                <div class="col-lg-10" style="font-weight: bold;">{{$item->phone}}</div>
                            </div>
                            <div class="row pb-1">
                                <div class="col-lg-2">Lokasi</div>
                                <div class="col-lg-10" style="font-weight: bold;">{{$item->branch->name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
</section>

@include('layout.footer')