@extends('front.layouts.app')
@section('content')
<!-- START CONTENT BODY  -->
<div class="my-account-body">
    <section class="title-header">
        <div class="container">
            <div class="align-items-center d-flex justify-content-between">
                <div>
                    <h2>Profiles</h2>
                </div>
                <div class="text-end">
                    <button type="button" class="btn btn-theme-blue btn-go-back" onclick="javascript:window.location.href='{!! route('myprofiles.add') !!}'">Add Profile</button>
                </div>
            </div>
        </div>
    </section>
    <section class="my-profiles-section mt-4">
        <div class="container">
            <div class="row g-md-4">
                @if($user->profiles()->count())
                @foreach($user->profiles as $profiles)
                <div class="col-xxl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="my-profile-card">
                        <div class="my-profile-img">
                            <img src="{!! $profiles->avatar_url !!}" class="img-fluid" alt="{!! $profiles->name !!}">
                        </div>
                        <p class="gender">({!! $profiles->profile_type !!})</p>
                        <h3>{!! $profiles->name !!}</h3>
                        @if($profiles->email)<p>{!! $profiles->email !!}</p>@endif
                        @if($profiles->phone)<p>{!! $profiles->phone_code." ".$profiles->phone !!}</p>@endif
                        @if($profiles->dob)<p>{!! $profiles->dob->format(config('constants.DISPLAY_DATE_FORMAT')) !!}</p>@endif
                        <div class="btn-view">
                            <button type="button" class="btn btn-theme-blue" onclick="javascript:window.location.href='{!! route('myprofiles.view',$profiles->id) !!}'">View</button>
                            &nbsp;
                            <button type="button" class="btn btn-theme-blue" onclick="javascript:window.location.href='{!! route('myprofiles.edit',$profiles->id) !!}'">Edit</button>
                        </div>
                        <a href="#deleteProfile" class="my-profile-card-dismiss btnDeleteProfile" data-bs-toggle="modal" data-bs-target="" data-id="{!! $profiles->id !!}"><i class="bi bi-x-lg"></i></a>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>
    </section>
</div>
<!-- END CONTENT BODY  -->


<!-- START DELETE PROFILE POPUP -->
<div class="modal fade delete-modal" id="deleteProfile" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="deleteProfileLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <p>Are you sure do you want to delete this profile?</p>
                <div class="btn-view">
                    <form id="frmDeleteProfile" action="{!! route('myprofiles.delete') !!}" method="post">
                        @csrf
                        <input type="hidden" name="id" id="delete_id">
                    </form>
                    <button class="btn btn-delete" type="button" onclick="javascript:$('#frmDeleteProfile').submit()">Delete</button>
                    <button class="btn btn-cancel" type="button" data-bs-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- START DELETE PROFILE POPUP -->


@endsection

@section('js')
@stack('js')
<script src="{!! asset('assets/frontend/js/pages/myprofiles.js') !!}?v=20240612"></script>
@endsection