@extends('layouts.master')
@section('page_title', 'Parent Profile')
@section('content')

<div class="mb-3">
    <a href="{{ url()->previous() }}" class="btn btn-secondary">
        <i class="icon-arrow-left13"></i> Back
    </a>
</div>

<div class="card">
    <div class="card-body">
        <div class="media">
        <img class="mr-3" width="200" src="https://schooldemo.britsoftdemo.com/uploads/app_image/defualt.png" alt="Generic placeholder image">
        <div class="media-body">
            <h3 class="mt-0"><i class="icon-user"></i> {{$user->name ?? ''}} {{$user->is_guardian != null ? '(Guardian)' : ''}}</h3>
            <h5><i class="icon-envelope"></i>  {{$user->email ?? ''}}</h5>
            <h5><i class="icon-phone"></i>     {{$user->phone ?? ''}}</h5>
            <h5><i class="icon-clipboard"></i> {{$user->username ?? ''}}</h5>
        </div>
        <div class="d-flex justify-content-center ggap-2">
         <!-- <button class="btn btn-secondary btn-sm set-password" data-user="{{base64_encode($user->id)}}" data-phone="{{$user->phone}}" data-fullname="{{$user->name}}">Set Password</button>
          -->
                  <button class="btn btn-dark btn-sm" id="send-reset-link" data-auth_id="{{$auth_id}}" data-user="{{base64_encode($user->id)}}" data-phone="{{$user->phone}}" data-fullname="{{$user->name}}">Send Reset Link</button>
        </div>
</div>

<div class="cardm">
    <div class="card-bodym">
    <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
            <h3 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Basic Info
                </button>
            </h3>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
            <form method="post" enctype="multipart/form-data" class=" steps-validation ajax-store" action="{{ route('users.update', Qs::hash($user->id)) }}" data-fouc>
            @csrf @method('PUT')
               
               
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Full Name: <span class="text-danger">*</span></label>
                                <input value="{{$user->name}}" required type="text" name="name" placeholder="Full Name" class="form-control">
                            </div>
                        </div>
                        <input value="{{$user->user_type}}" required type="hidden" name="user_type" placeholder="Full Name" class="form-control">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Address: <span class="text-danger">*</span></label>
                                <input value="{{$user->address}}" class="form-control" placeholder="Address" name="address" type="text" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Email address: </label>
                                        <input value="{{$user->email}}" type="email" name="email" class="form-control" placeholder="your@email.com">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Username: </label>
                                        <input value="{{$user->username}}" type="text" name="username" class="form-control" placeholder="Username">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Phone:</label>
                                        <input value="{{$user->phone}}" type="text" name="phone" id="phone" class="form-control" placeholder="+2341234567" >
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Telephone:</label>
                                        <input value="{{$user->phone2}}" type="text" name="phone2" class="form-control" placeholder="+2341234567" >
                                    </div>
                                </div>
                    </div>

                    <div class="row">

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="gender">Gender: <span class="text-danger">*</span></label>
                                        <select class="form-control" id="gender" name="gender">
                                            <option value=""></option>
                                            <option {{ ($user->gender == 'Male') ? 'selected' : '' }} value="Male">Male</option>
                                            <option {{ ($user->gender == 'Female') ? 'selected' : '' }} value="Female">Female</option>
                                        </select>
                                    </div>
                                </div>
                    </div>

                    <button type="submit" class="btn btn-dark">Submit</button>
               
            </Form>
            </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
               Children
                </button>
            </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            
            <div class="row">
                
                <div class="col-md-8">
                    <div class="row">
                        @foreach($children as $child)
                        <div class="col-md-4 ml-4">
                            <div class="card">
                                <div class="card-body">
                                        <div class="media">
                                                                                    <img class="mr-3" width="50" src="{{ $child->photo != null ? $child->photo : $default_image }}" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mt-0"><i class="icon-user"></i> {{$child->name}}</h5>
                                            <h5 class="mt-0"><i class="icon-user"></i> {{$child->username}}</h5>
                                            <h5 class="mt-0"><i class="icon-user"></i> {{$child->class_name}}</h5>
                                        </div>
                                </div>
                                <button class="btn btn-danger trash-button" data-id="{{ $child->id }}"><i class="icon-trash"></i> </button>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                </div>

                <div class="col-md-4">
                @php
                    $data = ['ref' => $ref, 'parent_id' => $parent_id]; // Example PHP variable
                @endphp
                    <parent-child-mapping :data="{{ json_encode($data) }}"></parent-child-mapping>
                </div>
                
            </div>
        
            </div>
        </div>
</div>

@endsection

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {

     $('#send-reset-link').on('click', function(e){
        
        $.ajax({
                url: '/api/user-auth/initiate-reset',
                method: 'POST',
                data: {
                    auth_id: $(this).data('auth_id'),
                    user: $(this).data('user'),
                    phone: $('#phone').val(),
                    fullname: $(this).data('fullname')
                },
                success: function(response) {
                    toastr.success('Password reset link sent to your email');
                    console.log(response);
                },
                error: function() {
                    alert('Error fetching attendance data');
                }
            });
     });

     $('.set-password').on('click', function(e){
        e.preventDefault();
     });

     $('.trash-button').on('click', function(e) {
        e.preventDefault();

        const child_id = $(this).data('id');

        const userConfirmed = confirm('Are you sure you want to delete this record?');

        if (userConfirmed) {
            
            $.ajax({
                url: `/api/parent/child`, 
                method: 'DELETE',
                data: {
                    id: child_id
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
                },
                success: function(response) {
                    toastr.success('Child record deleted successfully.');
                    location.reload();  
                },
                error: function() {
                    toastr.error('Failed to delete the record. Please try again.');
                }
            });
        }
    });

});
</script>