@extends('frontend.layout.main')

@section('content')
    <style>
        :root {
            --black: #0b0b0b;
            --dark: #0f0f0f;
            --matte: #1a1a1a;
            --white: #ffffff;
            --cream: #f5f0e6;
            --gold: #d1a956;
            --gold-2: #e9c97a;
            --muted: #bfbfbf;
            --glass: rgba(255, 255, 255, 0.06);
            --success-green: #00c853;
        }

        body {
            background-color: var(--black);
            font-family: 'Inter', sans-serif;
            color: var(--white);
        }

        /* --- SIDEBAR CUSTOM CSS --- */
        .profile-sidebar-wrapper {
            position: sticky;
            top: 120px;
        }

        .profile-card {
            background: var(--matte);
            border-radius: 40px;
            border: 8px solid var(--matte);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: visible;
            /* Tag ko bahar dikhane ke liye visible */
        }

        .image-container {
            position: relative;
            height: 500px;
            background: var(--dark);
            border-radius: 32px;
            overflow: hidden;
        }

        .profile-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%) contrast(1.1);
            opacity: 0.8;
        }

        /* --- BADGE VERIFIED --- */
        .badge-verified {
            position: absolute;
            top: 25px;
            left: 25px;
            background: var(--white);
            padding: 6px 14px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 14px;
            z-index: 10;
        }

        .badge-verified .l {
            color: var(--gold);
        }

        .badge-verified .u {
            color: var(--black);
        }

        .badge-verified .text {
            color: #64748b;
            font-weight: 400;
            margin-left: 6px;
        }

        /* --- SHARE ICON --- */
        .share-icon {
            position: absolute;
            top: 25px;
            right: 25px;
            background: var(--white);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 10;
            color: var(--black);
        }

        /* --- FIXED AVAILABLE TAG (Sidebar Edge) --- */
        .available-tag {
            position: absolute;
            left: -69px;
            /* Exact edge alignment */
            top: 45%;
            transform: rotate(-90deg);
            background: var(--white);
            padding: 6px 15px;
            border-radius: 0 0 10px 10px;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--black);
            z-index: 11;
            white-space: nowrap;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
        }

        .dot {
            width: 8px;
            height: 8px;
            background: var(--success-green);
            border-radius: 50%;
        }

        /* Overlay text on image */
        .card-info-overlay {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 35px;
            background: linear-gradient(transparent, var(--black));
            color: var(--white);
        }

        .btn-talk {
            background: var(--gold);
            color: var(--black);
            border: none;
            padding: 14px;
            border-radius: 50px;
            font-weight: 700;
            width: 100%;
            margin-top: 15px;
            transition: 0.3s;
        }

        .btn-talk:hover {
            background: var(--gold-2);
            transform: translateY(-2px);
        }

        /* Support Section */
        .support-box {
            text-align: center;
            padding: 25px 0;
        }

        .btn-whatsapp {
            background: var(--glass);
            color: var(--white) !important;
            border: 1px solid var(--gold);
            padding: 15px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 600;
            text-decoration: none;
        }

        .btn-whatsapp:hover {
            background: var(--gold);
            color: var(--black) !important;
        }

        /* --- CONTENT AREA --- */
        .main-name {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--gold);
        }

        .tag {
            background: var(--glass);
            padding: 10px 22px;
            border-radius: 50px;
            font-size: 14px;
            color: var(--cream);
            border: 1px solid var(--gold);
            display: inline-block;
            margin-bottom: 10px;
        }

        .btn-contact-now {
            background: var(--gold);
            color: var(--black);
            padding: 15px 45px;
            border-radius: 50px;
            font-weight: 700;
            border: none;
        }

        @media (max-width: 991px) {
            .profile-sidebar-wrapper {
                position: static;
                margin-bottom: 40px;
            }

            .main-name {
                font-size: 2.5rem;
            }
        }

        /* --- ABOUT ME SECTION (New Card) --- */
        .about-card {
            background: var(--matte);
            /* Theme based background */
            color: var(--white);
            border-radius: 20px;
            padding: 40px;
            margin-top: 40px;
            border: 1px solid var(--glass);
        }

        .about-badge {
            background: var(--glass);
            color: var(--gold);
            padding: 8px 15px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
            border: 1px solid var(--gold);
        }

        .info-label {
            color: var(--gold);
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .info-value {
            font-weight: 700;
            color: var(--white);
            font-size: 18px;
            margin-bottom: 5px;
        }

        .lang-badge {
            background: var(--glass);
            color: var(--cream);
            padding: 8px 18px;
            border-radius: 8px;
            font-weight: 500;
            border: 1px solid var(--gold);
            display: inline-block;
            margin-right: 10px;
            margin-top: 10px;
        }


        /* Practice Card Specific Styling */
        .practice-card {
            background: var(--dark);
            /* Matte se thoda dark color */
            padding: 25px;
            border-radius: 15px;
            border: 1px solid var(--glass);
            height: 100%;
            transition: 0.3s ease;
        }

        .practice-card:hover {
            border-color: var(--gold);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(209, 169, 86, 0.1);
        }

        .practice-card h5 {
            margin-bottom: 15px;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
        }

        /* Court Pill Specific Styling */
        .court-pill {
            background: var(--glass);
            color: var(--white);
            padding: 12px 25px;
            border-radius: 50px;
            border: 1px solid var(--gold);
            font-weight: 500;
            font-size: 15px;
            transition: 0.3s all ease;
            cursor: default;
        }

        .court-pill:hover {
            background: var(--gold);
            color: var(--black);
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(209, 169, 86, 0.3);
        }

        /* Animation for smooth entrance */
        .court-pill {
            animation: fadeInScale 0.5s ease forwards;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }


        /* Luxury Form Styling */
        .luxury-input {
            background: var(--dark) !important;
            border: 1px solid var(--glass) !important;
            color: var(--white) !important;
            border-radius: 12px !important;
            padding: 15px 20px !important;
            transition: 0.3s all ease !important;
        }

        .luxury-input:focus {
            border-color: var(--gold) !important;
            box-shadow: 0 0 10px rgba(209, 169, 86, 0.2) !important;
            background: var(--matte) !important;
        }

        .luxury-input::placeholder {
            color: #555 !important;
            font-size: 14px;
        }

        .btn-send {
            background: var(--gold);
            color: var(--black);
            padding: 15px 40px;
            border-radius: 50px;
            font-weight: 700;
            border: none;
            transition: 0.3s all ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-send:hover {
            background: var(--gold-2);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(209, 169, 86, 0.3);
        }

        /* Label Styling */
        .contact-form .info-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            letter-spacing: 0.5px;
        }
    </style>

    <div class="container py-5">
        <div class="row g-5">

            <div class="col-lg-4">
                <div class="profile-sidebar-wrapper">
                    <div class="profile-card">
                        <div class="badge-verified">
                            <span class="l">Legal</span><span class="u">Forum Help</span>
                            <span class="text">Verified</span>
                        </div>
                        <div class="available-tag">
                            <div class="dot"></div> AVAILABLE FOR WORK
                        </div>
                        <div class="image-container">
                            <img src="{{ asset($advocate->image ?? 'frontend/default-avatar.jpg') }}"
                                onerror="this.src='{{ asset('frontend/default-avatar.jpg') }}'"
                                class="profile-img">
                            <div class="card-info-overlay">
                                <p class="mb-1 text-uppercase small letter-spacing-1" style="color: var(--gold);">Advocate
                                </p>
                                <h4 class="fw-bold mb-1">{{ $advocate->fullname }}</h4>
                                <p class="small mb-3 opacity-75">{{ $advocate->city }}, {{ $advocate->state }}</p>
                                {{-- <button class="btn-talk">Let's Talk</button> --}}
                            </div>
                        </div>
                    </div>

                    <div class="support-box">
                        <p style="color: var(--muted); font-size: 14px;" class="px-3 mb-4">
                            Connect with <strong>Advocate {{ $advocate->fullname }}</strong> on WhatsApp for quick legal guidance.
                        </p>
                        <a href="javascript:void(0)" class="btn-whatsapp" onclick="openWhatsApp()">
                                <i class="fa-brands fa-whatsapp fs-5"></i> Chat on WhatsApp
                            </a>

                            <script>
                            function openWhatsApp() {
                                let number = "919876543210";
                                let message = encodeURIComponent("Hello, I need support");

                                window.open(`https://wa.me/${number}?text=${message}`, "_blank");
                            }
                            </script>

                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="ps-lg-4">
                    <nav class="mb-4">
                        <span
                            style="color: var(--gold); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;">
                            <i class="fa-solid fa-house me-1"></i> Introduce
                        </span>
                    </nav>

                    <h2 class="h4 fw-normal mb-1" style="color: var(--cream);">Advocate</h2>
                    <h1 class="main-name mb-4">{{ $advocate->fullname }}</h1>

                    <p class="lead mb-4" style="color: var(--muted);">
                       {{ $advocate->shortDescription }}
                    </p>

                    <div class="d-flex align-items-center fw-bold mb-5" style="color: var(--gold-2);">
                        <i class="fa-solid fa-check-circle me-2"></i>
                        Legal Practitioner in {{ $advocate->city }}, {{ $advocate->state }}
                    </div>
                    <div class="pt-4" style="border-top: 1px solid var(--glass);">
                        <p style="color: var(--gold); font-size: 12px;" class="text-uppercase fw-bold mb-3">Practice Areas
                        </p>
                            <div class="d-flex flex-wrap gap-2">
                                @if(!empty($advocate->practice_area))
                                    @foreach($advocate->practice_area as $area)
                                        <span class="tag">{{ $area }}</span>
                                    @endforeach
                                @endif
                            </div>
                    </div>
                </div>
                <div class="about-card">
                    <div class="about-badge mb-4">
                        <i class="fa-regular fa-user me-2"></i> ABOUT ME
                    </div>

                    <h2 class="fw-bold mb-1">Advocate {{ $advocate->fullname }}</h2>
                    <h5 style="color: var(--gold-2);" class="mb-4">Legal Services & Expertise</h5>

                    <p class="mb-5" style="color: var(--muted);">
                        {!! $advocate->description !!}

                    </p>

     
                    <div class="row g-4 pt-4" style="border-top: 1px solid var(--glass);">
                        <div class="col-sm-6">
                            <p class="info-label">Experience</p>
                            <p class="info-value">{{ $advocate->experience }} Years</p>
                        </div>
                        <div class="col-sm-6">
                            <p class="info-label">Primary Practice Area</p>
                            <p class="info-value">{{ $advocate->primaryPracticeArea ?? "N/A" }}</p>
                        </div>
                        <div class="col-sm-6">
                            <p class="info-label">Enrollment Number</p>
                            <p class="info-value">{{ $advocate->barEnrollmentNo ?? 'N/A' }}</p>
                        </div>
                        <div class="col-sm-6">
                            <p class="info-label">Location & Address</p>
                            <p class="info-value">{{ $advocate->city }}, {{ $advocate->state }}</p>
                            <p class="small" style="color: var(--muted);">{{ $advocate->address }}</p>
                        </div>
                    </div>
                </div>
                <div class="about-card mt-5">
                    <div class="about-badge mb-4">
                        <i class="fa-solid fa-envelope me-2"></i> CONTACT
                    </div>

                    <h2 class="fw-bold mb-3">Contact to <span style="color: var(--gold);">Advocate {{ $advocate->fullname ?? "__" }}</span>
                    </h2>

                    <p class="mb-5" style="color: var(--muted); line-height: 1.8;">
                        For legal help, case-related questions, or expert guidance, feel free to contact <strong>Advocate {{ $advocate->fullname ?? "__" }}</strong>. With experience across multiple legal areas, R M Patwardhan provides
                        reliable advice and personalized legal representation.
                    </p>

                    <form action="#" method="POST" id="advocateEnquiryForm"  class="contact-form">
                        @csrf
                          <input type="hidden" name="adv_id" value="{{ $advocate->id }}" class="form-control luxury-input">
                        <div class="row g-4">
                            <div class="col-12">
                                <label class="info-label">Full Name</label>
                                <input type="text" name="fullname" class="form-control luxury-input" placeholder="Enter Your Name"
                                    required>
                            </div>

                            <div class="col-12">
                                <label class="info-label">Phone Number</label>
                                <input type="text" name="phone" class="form-control luxury-input" placeholder="Enter Your Number"
                                    required>
                            </div>
                            <div class="col-12">
                                <label class="info-label">Email</label>
                                <input type="email" name="email"  class="form-control luxury-input" placeholder="Enter Email"
                                    >
                            </div>

                            <div class="col-12">
                                <label class="info-label">Message</label>
                                <textarea class="form-control luxury-input" name="msg" rows="5" placeholder="Tell me about your question" required></textarea>
                            </div>

                            <div class="col-12 mt-4">
                                <button type="submit" class="btn-send">
                                    Send Message <i class="fa-solid fa-paper-plane ms-2"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection


@push('scripts')
<script>
$(document).ready(function () {

    $(document).on('submit', '#advocateEnquiryForm', function (e) {
        e.preventDefault();

        let form = this;
        let formData = new FormData(form);

        $.ajax({
            url: "{{ route('advocate-enquiry-submission') }}",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.success) {
                    toastr.success(res.message);
                    form.reset();
                }
            },
            error: function (xhr) {
                let message = 'Something went wrong!';

                if (xhr.responseJSON?.message) {
                    if (typeof xhr.responseJSON.message === 'object') {
                        message = Object.values(xhr.responseJSON.message)[0][0];
                    } else {
                        message = xhr.responseJSON.message;
                    }
                }

                toastr.error(message);
                console.log(xhr.responseJSON);
            }
        });
    });

});
</script>
@endpush