@extends('layouts.main')
@section('content')
    <style>
        .custom-table {
            border-collapse: separate;
            border-spacing: 0 12px;
        }

        .custom-table thead th {
            border: none;
            background: #f8fafc;
            color: #64748b;
            font-size: 14px;
            font-weight: 700;
            padding: 16px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .custom-table tbody tr {
            background: #fff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            border-radius: 16px;
            transition: 0.3s;
        }

        .custom-table tbody tr:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        .custom-table tbody td {
            padding: 18px 16px;
            vertical-align: middle;
            border-top: none;
            border-bottom: none;
        }

        .doctor-img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e2e8f0;
        }

        .doctor-img-sm {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e2e8f0;
            background: #f8fafc;
        }

        .online-dot {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            background: #22c55e;
            border-radius: 50%;
            border: 2px solid #fff;
        }

        .btn-light-info {
            background: rgba(14, 165, 233, 0.1);
            color: #0284c7;
            border-radius: 10px;
            padding: 7px 14px;
            font-weight: 600;
            border: none;
            transition: 0.3s;
        }

        .btn-light-info:hover {
            background: #0284c7;
            color: #fff;
        }

        .custom-badge-success {
            background: rgba(34, 197, 94, 0.12);
            color: #16a34a;
            padding: 8px 14px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
        }

        .custom-badge-danger {
            background: rgba(239, 68, 68, 0.12);
            color: #dc2626;
            padding: 8px 14px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
        }

        .btn-action {
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: 0.3s;
        }

        .btn-action.editBtn {
            background: rgba(59, 130, 246, 0.12);
            color: #2563eb;
        }

        .btn-action.editBtn:hover {
            background: #2563eb;
            color: #fff;
            transform: scale(1.08);
        }

        .btn-action.delete {
            background: rgba(239, 68, 68, 0.12);
            color: #dc2626;
        }

        .btn-action.delete:hover {
            background: #dc2626;
            color: #fff;
            transform: scale(1.08);
        }

        .empty-state {
            padding: 40px;
            text-align: center;
        }

        @media(max-width:768px) {
            .custom-table thead {
                display: none;
            }

            .custom-table tbody tr {
                display: block;
                margin-bottom: 20px;
            }

            .custom-table tbody td {
                display: flex;
                justify-content: space-between;
                padding: 12px 15px;
                border-bottom: 1px solid #f1f5f9;
            }

            .custom-table tbody td:last-child {
                border-bottom: none;
            }
        }

        .custom-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .custom-btn:hover {
            background-color: #0056b3;
        }
    </style>
    <div>
        <div class="card-custom">
            <div class="d-flex justify-content-between mb-3">
                <h4>👨‍⚕️ Consultant Management</h4>
                @can('doctor_create')
                    <button class="custom-btn" data-bs-toggle="modal" data-bs-target="#addDoctorModal">+ Add Consultant</button>
                @endcan
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle custom-table">
                    <thead>
                        <tr>
                            <th>#ID</th>
                            <th>Photo</th>
                            <th>Consultant</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($counsellors as $counsellor)

                            @php
                                $name = $counsellor->name
                                    ?? ($counsellor->first_name . ' ' . $counsellor->last_name);

                                // Default User Image
                                $defaultImage = 'https://cdn-icons-png.flaticon.com/512/149/149071.png';

                                // Final Image
                                $image = !empty($counsellor->display_image_url)
                                    ? $counsellor->display_image_url
                                    : $defaultImage;
                            @endphp

                            <tr>

                                <!-- ID -->
                                <td>
                                    <span class="fw-bold text-primary">
                                        #{{ $counsellor->id }}
                                    </span>
                                </td>

                                <!-- PHOTO -->
                                <td>
                                    <img src="{{ $image }}" alt="{{ $name }}" class="doctor-img-sm rounded-circle border" style="
                                        width:60px;
                                        height:60px;
                                        object-fit:cover;
                                    " onerror="this.src='{{ $defaultImage }}'">
                                </td>

                                <!-- CONSULTANT INFO -->
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        <div>
                                            <h6 class="mb-0 fw-semibold">
                                                {{ $counsellor->first_name }}
                                                {{ $counsellor->last_name }}
                                            </h6>

                                            <small class="text-muted">
                                                {{ $counsellor->qualification ?? 'Consultant' }}
                                            </small>
                                        </div>
                                    </div>
                                </td>

                                <!-- EMAIL -->
                                <td>
                                    <span class="text-dark fw-medium">
                                        {{ $counsellor->email }}
                                    </span>
                                </td>

                                <!-- PHONE -->
                                <td>
                                    <span class="fw-medium">
                                        {{ $counsellor->phone_number ?? '-' }}
                                    </span>
                                </td>

                                <!-- STATUS -->
                                <td>
                                    @if ($counsellor->status)

                                        <span class="badge custom-badge-success">
                                            <i class="bi bi-check-circle-fill me-1"></i>
                                            Active
                                        </span>

                                    @else

                                        <span class="badge custom-badge-danger">
                                            <i class="bi bi-x-circle-fill me-1"></i>
                                            Inactive
                                        </span>

                                    @endif
                                </td>

                                <!-- ACTION -->
                                <td>
                                    <div class="d-flex justify-content-center gap-2">

                                        @can('doctor_edit')

                                            <button type="button" class="btn-action editBtn" data-bs-toggle="modal"
                                                data-bs-target="#editDoctorModal" data-id="{{ $counsellor->id }}"
                                                data-first_name="{{ $counsellor->first_name }}"
                                                data-last_name="{{ $counsellor->last_name }}" data-name="{{ $counsellor->name }}"
                                                data-email="{{ $counsellor->email }}" data-phone="{{ $counsellor->phone_number }}"
                                                data-status="{{ $counsellor->status }}" data-image_url="{{ $image }}">

                                                <i class="bi bi-pencil-square"></i>

                                            </button>

                                        @endcan


                                        @can('doctor_delete')

                                            <form action="{{ route('superadmin.doctor.delete', $counsellor->id) }}" method="POST"
                                                class="m-0">

                                                @csrf
                                                @method('DELETE')

                                                <button type="submit" class="btn-action delete"
                                                    onclick="return confirm('Delete this doctor?')">

                                                    <i class="bi bi-trash"></i>

                                                </button>

                                            </form>

                                        @endcan

                                    </div>
                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td colspan="7">

                                    <div class="empty-state text-center py-4">

                                        <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png" width="120"
                                            class="mb-3">

                                        <h5>No Doctors Found</h5>

                                        <p class="text-muted mb-0">
                                            No counsellor data available right now.
                                        </p>

                                    </div>

                                </td>
                            </tr>

                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- ================= ADD MODAL ================= -->
    <div class="modal fade" id="addDoctorModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="{{ route('superadmin.doctor.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Add Consultant</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body row g-3">
                        <!-- FIRST NAME -->
                        <div class="col-md-6">
                            <label class="form-label">First Name *</label>
                            <input type="text" name="first_name" class="form-control" placeholder="Enter first name"
                                required>
                        </div>
                        <!-- LAST NAME -->
                        <div class="col-md-6">
                            <label class="form-label">Last Name *</label>
                            <input type="text" name="last_name" class="form-control" placeholder="Enter last name" required>
                        </div>
                        <!-- FULL NAME -->
                        <div class="col-md-6">
                            <label class="form-label">Full Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Auto or manual">
                        </div>
                        <!-- EMAIL -->
                        <div class="col-md-6">
                            <label class="form-label">Email *</label>
                            <input type="email" name="email" class="form-control" placeholder="Enter email" required>
                        </div>
                        <!-- PASSWORD -->
                        <div class="col-md-6">
                            <label class="form-label">Password *</label>
                            <input type="password" name="password" class="form-control" placeholder="Enter password"
                                required>
                        </div>
                        <!-- PHONE -->
                        <div class="col-md-6">
                            <label class="form-label">Phone Number</label>
                            <input type="text" name="phone_number" class="form-control" placeholder="Enter phone">
                        </div>
                        <!-- LANGUAGES -->
                        {{-- <div class="col-md-6">
                            <label class="form-label">Languages</label>
                            <textarea name="languages" class="form-control" rows="2"
                                placeholder="e.g. English, Hindi"></textarea>
                        </div> --}}
                        <!-- SKILLS -->
                        {{-- <div class="col-md-6">
                            <label class="form-label">Skills</label>
                            <textarea name="skills" class="form-control" rows="2"
                                placeholder="e.g. Surgery, Therapy"></textarea>
                        </div> --}}
                        <!-- ACHIEVEMENTS -->
                        {{-- <div class="col-md-12">
                            <label class="form-label">Achievements</label>
                            <textarea name="achievements" class="form-control" rows="2"
                                placeholder="Write achievements"></textarea>
                        </div> --}}
                        <!-- QUALIFICATION -->
                        {{-- <div class="col-md-12">
                            <label class="form-label">Qualification</label>
                            <textarea name="qualification" class="form-control" rows="2"
                                placeholder="Write qualification"></textarea>
                        </div> --}}
                        <!-- RESUME -->
                        {{-- <div class="col-md-6">
                            <label class="form-label">📄 Resume</label>
                            <input type="file" name="resume" class="form-control" accept=".pdf,.doc,.docx">
                            <small class="text-muted">Allowed: PDF, DOC, DOCX</small>
                            <!-- OLD RESUME SHOW -->
                            <div id="old_resume" class="mt-2"></div>
                        </div> --}}
                        <!-- IMAGE -->
                        <div class="col-md-6">
                            <label class="form-label">🖼 Profile Image</label>
                            <input type="file" name="image" class="form-control" accept="image/*"
                                onchange="previewImage(event)">
                            <div class="mt-2">
                                <img id="imagePreview" src="{{ asset('uploads/default/no-image.png') }}" width="80"
                                    class="rounded border">
                            </div>
                        </div>
                        <!-- STATUS -->
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="1">Active</option>
                                <option value="0" selected>Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="custom-btn btn-success px-4">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>





    <!-- ================= EDIT MODAL ================= -->
    <!-- EDIT MODAL -->
    <div class="modal fade" id="editDoctorModal" tabindex="-1">

        <div class="modal-dialog modal-lg">

            <div class="modal-content">

                <form id="editForm" method="POST" enctype="multipart/form-data">

                    @csrf
                    @method('PUT')

                    <input type="hidden" id="edit_id" name="id">

                    <!-- HEADER -->
                    <div class="modal-header">

                        <h5 class="modal-title">
                            Edit Consultant
                        </h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>

                    </div>

                    <!-- BODY -->
                    <div class="modal-body row g-3">

                        <div class="col-md-6">

                            <label class="form-label">
                                First Name
                            </label>

                            <input type="text" id="edit_first_name" name="first_name" class="form-control">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Last Name
                            </label>

                            <input type="text" id="edit_last_name" name="last_name" class="form-control">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Full Name
                            </label>

                            <input type="text" id="edit_name" name="name" class="form-control">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Email
                            </label>

                            <input type="email" id="edit_email" name="email" class="form-control">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Phone
                            </label>

                            <input type="text" id="edit_phone" name="phone_number" class="form-control">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Status
                            </label>

                            <select id="edit_status" name="status" class="form-select">

                                <option value="1">
                                    Active
                                </option>

                                <option value="0">
                                    Inactive
                                </option>

                            </select>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Profile Image
                            </label>

                            <input type="file" id="edit_image" name="image" class="form-control" accept="image/*"
                                onchange="previewEditImage(event)">

                            <div class="mt-2">
                                <img id="editImagePreview" src="{{ asset('uploads/default/no-image.png') }}" width="80"
                                    class="rounded border">
                            </div>

                        </div>

                    </div>

                    <!-- FOOTER -->
                    <div class="modal-footer">


                        <button type="submit" class="custom-btn btn-success px-4">

                            Update

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
    <!-- ================= SCRIPT ================= -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            document.querySelectorAll('.editBtn').forEach(button => {

                button.addEventListener('click', function () {

                    let id = this.dataset.id;

                    // UPDATE ROUTE
                    let url =
                        "{{ route('superadmin.doctor.update', ':id') }}";

                    url = url.replace(':id', id);

                    document.getElementById('editForm').action = url;

                    // FILL FORM
                    document.getElementById('edit_id').value =
                        this.dataset.id || '';

                    document.getElementById('edit_first_name').value =
                        this.dataset.first_name || '';

                    document.getElementById('edit_last_name').value =
                        this.dataset.last_name || '';

                    document.getElementById('edit_name').value =
                        this.dataset.name || '';

                    document.getElementById('edit_email').value =
                        this.dataset.email || '';

                    document.getElementById('edit_phone').value =
                        this.dataset.phone || '';

                    document.getElementById('edit_status').value =
                        this.dataset.status || '0';

                    document.getElementById('editImagePreview').src =
                        this.dataset.image_url || "{{ asset('uploads/default/no-image.png') }}";

                });

            });

        });



        function previewEditImage(event) {
            let reader = new FileReader();
            reader.onload = function () {
                document.getElementById('editImagePreview').src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        }


        document.querySelectorAll('.editBtn').forEach(button => {
            button.addEventListener('click', function () {

                let resume = this.dataset.resume;
                let resumeDiv = document.getElementById('edit_old_resume');

                if (resume) {
                    let url = "/uploads/resume/" + resume;

                    resumeDiv.innerHTML = `
                       <a href="${url}" target="_blank" class="btn btn-sm btn-info mt-2">
                           📄 View Resume
                       </a>
                   `;
                } else {
                    resumeDiv.innerHTML = `<span class="text-muted">No Resume</span>`;
                }

            });
        });
        $(document).on("click", ".editBtn", function () {

            let id = $(this).data("id");
            let resume = $(this).data("resume");

            $("#edit_id").val(id);

            if (resume) {
                let url = "/uploads/resume/" + resume;

                $("#old_resume").html(`
                   <a href="${url}" target="_blank" class="btn btn-sm btn-info">
                       📄 View Resume
                   </a>
               `);
            } else {
                $("#old_resume").html(`<span class="text-muted">No Resume</span>`);
            }

            $("#editModal").modal("show");
        });
    </script>
@endsection