@extends('layouts/layoutMaster')
@section('title', 'My Profile')
@php
use App\Models\User;
$date = str_replace(' ','',$user->dob);
$dob = date('F d, Y', strtotime($date));
@endphp
@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    .pimg{width:165px;height:150px;}
    .p-restyle p{padding:0px !important;margin:0px !important;margin-bottom:6px !important;}
  </style>
@endsection
@section('content')

  <h4 class="py-3 breadcrumb-wrapper mb-4">
    <span class="text-muted fw-light">Dashboard /</span> My Profile
  </h4>

    <div class="card shadow">
        <div class="card-body">
            <!--<div class="row">-->
            <div class="row justify-content-center justify-content-md-start text-md-start">
                <!-- Profile Picture -->
                <div class="col-md-3 text-justify text-md-start mb-4">
                    <img src="{{$user->avatar}}" alt="{{$user->surname.' '.$user->other_names}}" class="img-fluid rounded mb-3 pimg">
                    <h5 class="card-title">{{$user->surname.' '.$user->other_names}}</h5>
                    <p class="text-muted p-0 m-0">Reg. No: <strong>{{$user->reg_number}}</strong></p>
                    <p class="text-muted p-0 m-0">Jamb Reg: <strong>{{$user->jamb_number }}</strong></p>
                    <!--<button class="btn btn-primary btn-sm"><i class="bi bi-pencil-square"></i> Edit Profile</button>-->
                    <!--<button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i> Delete</button>-->
                </div>

                <!-- Student Details -->
                <div class="col-md-9 p-restyle">
                    <h5 class="mb-2"><i class="bi bi-info-circle"></i> Personal Information</h5>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <p><strong>Email:</strong> {{$user->email}}</p>
                            <p><strong>Phone:</strong> {{$user->phone}}</p>
                            <p><strong>Date of Birth:</strong> {{$dob}}</p>
                            <p><strong>State:</strong> {{User::statename($user->state)->name}}/ {{User::lganame($user->lga)->name}}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Gender:</strong> {{$user->gender}}</p>
                            <p><strong>Marital status:</strong> {{$user->marital_status==0?'Single':'Married'}}</p>
                            <p><strong>Address:</strong> {{$user->address}}</p>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0">
                            <i class="bi bi-people"></i> Next of Kin Information
                        </h5>
                      @if($user->next_of_kin_is_emergency!=1)
                        <button class="btn btn-sm btn-outline-primary p-1"
                          data-bs-toggle="modal"
                          data-bs-target="#editNextOfKinModal">
                          <i class="bi bi-pencil-square me-1"></i> Edit
                        </button>
                      @endif
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <p><strong>Name:</strong> {{$user->next_of_kin_name}}</p>
                            <p><strong>Relationship:</strong> {{$user->next_of_kin_relationship}}</p>
                            <p><strong>Phone:</strong> {{$user->next_of_kin_phone}}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Email:</strong> {{$user->next_of_kin_email}}</p>
                            <p><strong>Address:</strong> {{$user->next_of_kin_address}}</p>
                            <p><strong>Emergency Contact:</strong> {{$user->next_of_kin_is_emergency==1?'YES':'NO'}}</p>
                        </div>
                    </div>

                    <h5 class="mb-2"><i class="bi bi-mortarboard"></i> Academic Information</h5>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <p><strong>Program:</strong> {{$user->program->name}}</p>
                            <p><strong>School:</strong> {{$user->faculty->name}}</p>
                            <p><strong>Department:</strong> {{$user->department->name}}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Year:</strong> {{$ses->c_year}}</p>
                            <p><strong>Session:</strong> {{$ses->c_session}}</p>
                            <p><strong>Level:</strong> {{$user->s_level."00"}} Level</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Edit Next of Kin Modal -->
<div class="modal fade" id="editNextOfKinModal" tabindex="-1" aria-labelledby="editNextOfKinLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editNextOfKinLabel">
                    <i class="bi bi-people"></i> Edit Next of Kin
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form action="#" method="POST" id="nextOfKinForm" onSubmit="return false;">
                @csrf
                <input type="hidden" value="{{$user->id}}" name="studentId">
                <div class="modal-body">
                <div id="kinAlert"></div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Full Name</label>
                            <input type="text" class="form-control" name="kin_name" placeholder="Full name" value="{{$user->next_of_kin_name?$user->next_of_kin_name:''}}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Relationship</label>
                            <input type="text" class="form-control" name="relationship" placeholder="e.g. Mother, Guardian" value="{{$user->next_of_kin_relationship?$user->next_of_kin_relationship:''}}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" name="phone" placeholder="+123 456 7890" value="{{$user->next_of_kin_phone?$user->next_of_kin_phone:''}}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Email Address</label>
                            <input type="email" class="form-control" name="email" placeholder="example@email.com" value="{{$user->next_of_kin_email?$user->next_of_kin_email:''}}">
                        </div>

                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <textarea class="form-control" name="address" rows="2" placeholder="Residential address">{{$user->next_of_kin_address?$user->next_of_kin_address:''}}</textarea>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Emergency Contact</label>
                            <select class="form-select" name="is_emergency">
                                <option value="1" {{ optional($user->next_of_kin_is_emergency)->is_emergency==1 ? 'selected' : '' }}>Yes</option>
                                <option value="0" {{ optional($user->next_of_kin_is_emergency)->is_emergency==1 ? 'selected' : '' }}>No</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-2"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-outline-success">
                        <i class="bi bi-save me-2"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
  <script>
document.getElementById('nextOfKinForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const form = e.target;
    const alertBox = document.getElementById('kinAlert');
    const formData = new FormData(form);
    const url = '{{route('upNextKin')}}';

    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alertBox.innerHTML = `
                <div class="alert alert-success">
                    Next of kin updated successfully.
                </div>
            `;

            setTimeout(() => {
                bootstrap.Modal.getInstance(
                    document.getElementById('editNextOfKinModal')
                ).hide();
                location.reload(); // optional
            }, 1500);
        } else {
            alertBox.innerHTML = `
                <div class="alert alert-danger">
                    ${data.message ?? 'Something went wrong.'}
                </div>
            `;
        }
    })
    .catch(error => {
        alertBox.innerHTML = `
            <div class="alert alert-danger">
                Server error. Please try again.
            </div>
        `;
        console.error(error);
    });
});
</script>

@endsection
@endsection