@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/backdrop.css"/>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light-border.css"/>
@endpush

@section('title', 'Familiy Members')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    @can('add-family')
                        <a href="{{ route('admin.family-members.create', ['id' => $familyId]) }}" class="btn btn-primary">Add</a>
                    @endcan
                    <a href="{{ route('admin.families.index') }}" class="ml-2 btn btn-outline-primary">Back</a>
                </div>
                <div class="card-body">
                    <div class="table-responsive table-invoice">
                        <table class="table" id="data-table" style="width: 100%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>S.N.</th>
                                    <th>Tamrakar Id</th>
                                    <th>Family Id</th>
                                    <th>Prefix</th>
                                    <th>Name</th>
                                    <th>Gender</th>
                                    <th>Address</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($members as $member)
                                    <tr>
                                        <td>
                                            @if ($member->image_url)
                                                <a data-lightbox="image-{{ $member->image_url }}"
                                                    href="{{ $member->image_url }}">
                                                    <img src='{{ $member->image_url }}' class="img-thumbnail" width="40"
                                                        height="40" style="max-width:inherit;" />
                                                </a>
                                            @else
                                                <img src='{{ asset('img/avatar/avatar-1.png') }}' class="img-thumbnail"
                                                    width="40" height="40" style="max-width:inherit;" />
                                            @endif
                                        </td>
                                        <td>{{$loop->iteration}}</td>
                                        <td>{{ $member->tamrakar_id }}</td>
                                        <td>{{ $member->family_id }}</td>
                                        <td>{{ $member->prefix_text ?? 'N/A' }}</td>
                                        <td id="familyDetail" data-tippy-content="
                                        <div class='card' style='font-size: 10px; margin-bottom: 0px; padding-top: 0'>
                                            <div class='card-body' style='margin-bottom: 0px; padding-top: 0'>
                                                <h6><u>Details</u></h6>
                                                <p style='margin: 0px; padding: 0;'>Father's Name : {{$member->father_name ?? 'N/A'}}</p>
                                                <p style='margin: 0px; padding: 0;'>Mobile Number : {{$member->mobile_no ?? 'N/A'}}</p>
                                                <p style='margin: 0px; padding: 0;'>Phone Number : {{$member->phone_no ?? 'N/A'}}</p>
                                                <p style='margin: 0px; padding: 0;'>DOB [BS] : {{$member->dob_np?? 'N/A'}}</p>
                                                <p style='margin: 0px; padding: 0;'>DOB [AD] : {{$member->dob_en?? 'N/A'}}</p>
                                                <p style='margin: 0px; padding: 0;'>Email : {{$member->email ?? 'N/A'}}</p>
                                            </div>
                                        </div>">{{ $member->full_name ?? 'N/A' }}</td>
                                        <td>{{ $member->gender_text ?? 'N/A' }}</td>
                                        <td>{{ $member->address_en ?? 'N/A' }}</td>
                                        <td>{{ $member->status_text }}</td>
                                        <td class = "mt-3 d-flex justify-content-between align-items-center">
                                            @can('edit-family')
                                                <div class="" >
                                                    <a href="{{route('admin.family-members.edit', ['id'=>$familyId, 'memberId' => $member->id])}}"
                                                        data-bs-toggle ="tooltip" data-bs-placement="top"
                                                        title="Edit"class="btn btn-sm btn-warning mr-4"><i
                                                            class="fa fa-edit"></i></a>
                                                </div>
                                            @endcan
                                            <div class="px-md-2 px-sm-2 " >
                                                <a href="{{ route('admin.members.files.index', ['id' => $member->id ]) }}"
                                                    data-bs-toggle="tooltip" data-bs-placement="top" title="Add/View Files"
                                                    class="btn btn-sm btn-primary mr-4"><i
                                                        class="fa fa-file"></i></a>
                                            </div>
                                            @can('delete-family')
                                                {!! Form::open([
                                                    'route' => ['admin.family-members.destroy', ['id' => $familyId, 'memberId' => $member->id]],
                                                    'files' => true,
                                                    'title' => 'Delete',
                                                    'data-bs-toggle' => 'tooltip',
                                                    'data-bs-placement' => 'top',
                                                    'method' => 'DELETE',
                                                ]) !!}
                                                <button type="submit" class="btn btn-sm btn-danger"
                                                    onclick="return confirm('Are you sure?')"><i
                                                        class="fa fa-trash-o"></i></button>
                                                {!! Form::close() !!}
                                            @endcan
                                        </td>
                                    </tr>
                                @empty
                                    <td colspan="100%" class="text-center">
                                        <p>No data available.</p>
                                    </td>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div>
                {{$members->withQueryString()->links()}}
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<script>
    $(document).ready(function () {
        tippy('#familyDetail', {
            animation: 'scale',
            theme: 'light-border',
            interactive: true,
            arrow: true,
            placement: 'left',
            allowHTML: true,
        })
    });
</script>
@endpush