@extends('admin.layouts.adminApp')
@section('style')
<style>
.card {
    transition: transform 0.3s ease-in-out;
}
.card:hover {
    transform: scale(1.02);
}

.btn-primary, .btn-outline-primary {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
}
</style>

<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<!-- DataTable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css">
<!-- Column Visibility CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

@endsection
@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">User Profile </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"> User Profile </li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                </div>
            </div>
        </div>
    
<div class="container">
    <div class="main-body">
        <div class="row">
            <div class="col-lg-3" data-aos="fade-right">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-column align-items-center text-center">
                            <img src="{{ $user->profile ? asset('storage/'.$user->profile) : asset('admin/assets/up.png') }}" alt="Admin" class="rounded-circle p-1 bg-primary" width="110">
                            <div class="mt-3">
                                <h4>{{ $user->name }}</h4>
                                <p class="text-secondary mb-1">{{ $user->role->name ?? 'N/A' }}</p>
                                <p class="text-muted font-size-sm">{{ $user->address ?? 'N/A' }}</p>
                                <button class="btn btn-primary">{{ $user->email ?? 'N/A' }}</button><br>
                                <button class="btn btn-outline-primary">{{ $user->mobile ?? 'N/A' }}</button>
                            </div>
                        </div>
                        <hr class="my-4">
                    </div>
                </div>
            </div>

            <div class="col-lg-9" data-aos="fade-left">
                <div class="card">
                    <div class="card-header radius-15 bg-primary">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-white">Property Surveyors List</h6>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="table-responsive">
                                <table class="table" id="property-table">
                                    <thead>
                                        <tr>
                                            <th>SN</th>
                                            <th>Actions</th>
                                            <th>Survey Id</th> 
                                            <th>Date of Survey</th> 
                                            <th>Owner Name</th>
                                            <th>Owner Father Name</th>
                                            <th>Mobile No</th>
                                            <th>Ward Name</th> 
                                        </tr>
                                    </thead>
                                    
                                </table>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>

         
    </div>
</div>
@endsection
@section('script')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
<!-- JS for ColVis Button -->
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.colVis.min.js"></script>

<script>
$(document).ready(function() {
    $('#property-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("property.user.datatable", $user->id) }}',
        dom: 'Blfrtip',
        lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
        scrollY: '400px',
        scrollCollapse: true,
        paging: true,
        fixedHeader: true,

        buttons: [
            {
                extend: 'copy',
                exportOptions: {
                    columns: ':visible:not(:first-child)' // exclude 'Actions'
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: ':visible:not(:first-child)' // exclude 'Actions'
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible:not(:first-child)' // exclude 'Actions'
                }
            },
            {
                extend: 'colvis',
                text: 'Column Visibility',
                className: 'btn btn-secondary'
            }
        ],

        columns: [
            { data: 'DT_RowIndex', name: 'id', orderable: false, searchable: false, title: 'SN' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, title: 'Actions' },
            { data: 'survey_id', name: 'nagarpalikaId', title: 'Survey Id' },
            { data: 'survey_date', name: 'created_at', title: 'Date of Survey' },
            { data: 'owner_name', name: 'ownerDetails->name', title: 'Owner Name' },
            { data: 'owner_father', name: 'ownerDetails->fatherName', title: 'Owner Father Name' },
            { data: 'mobile', name: 'ownerDetails->mobile', title: 'Mobile No' },
            { data: 'ward', name: 'ward.name', title: 'Ward Name' },
        ]
    });
});


</script>


@endsection