@extends('frontend.layout.main')
@section('content')
<style>
    .advocate-hero {
        background: linear-gradient(180deg, #0b0b0b, #101010);
        padding: 50px 0 100px;
        position: relative;
        overflow: hidden;
    }

    .advocate-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at top, rgba(209, 169, 86, 0.12), transparent 85%);
        pointer-events: none;
    }

    /* TITLE */
    .adv-hero-title {
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        max-width: 900px;
        margin: 0 auto 14px;
    }

    .adv-hero-sub {
        color: var(--muted);
        font-size: 18px;
        max-width: 820px;
        margin: 0 auto 40px;
    }

    /* SEARCH BOX */
    .adv-search-box {
        max-width: 900px;
        margin: 0 auto;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
        border: 1px solid var(--glass);
        border-radius: 18px;
        padding: 26px;
        backdrop-filter: blur(10px);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
    }

    .adv-search-form {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
    }

    /* INPUT */
    .adv-input {
        flex: 1;
        min-width: 220px;
        position: relative;
    }

    .adv-input i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gold);
        font-size: 16px;
    }

    .adv-input select {
        width: 100%;
        height: 54px;
        border-radius: 12px;
        padding-left: 44px;
        background: #fff;
        border: none;
        font-size: 15px;
        font-weight: 600;
        outline: none;
    }

    /* BUTTON */
    .adv-search-btn {
        height: 54px;
        padding: 0 34px;
        border-radius: 14px;
        border: none;
        font-weight: 800;
        font-size: 15px;
        background: linear-gradient(180deg, var(--gold-2), var(--gold));
        color: #111;
        transition: .25s;
        box-shadow: 0 10px 28px rgba(209, 169, 86, 0.25);
    }

    .adv-search-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 45px rgba(209, 169, 86, 0.35);
    }

    /* POPULAR SEARCHES */
    .adv-popular {
        margin-top: 26px;
        font-size: 14px;
        color: #ccc;
    }

    .adv-popular span {
        color: var(--gold);
        font-weight: 700;
        margin-right: 6px;
    }

    .adv-popular a {
        margin: 0 6px;
        color: #e6e6e6;
        transition: .2s;
    }

    .adv-popular a:hover {
        color: var(--gold);
        text-decoration: underline;
    }


    /* RESPONSIVE */
    @media(max-width:768px) {
        .adv-hero-title {
            font-size: 24px;
        }

        .adv-search-form {
            flex-direction: column;
        }

        .adv-search-btn {
            width: 100%;
        }

        .adv-input {
            width: 100%;
        }
    }



    /* ================= ADVOCATE LIST ================= */
    .adv-list-section {
        background: var(--black);
        padding: 80px 0;
    }

    /* CARD */
    .adv-card {
        background: linear-gradient(180deg, beige, #fff);
        border: 1px solid var(--glass);
        border-radius: 18px;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
        transition: .35s ease;
    }

    .adv-card:hover {
        background: linear-gradient(180deg, #fff, beige);
        transform: translateY(-8px);
        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.75);
    }

    /* TOP */
    .adv-top {
        position: relative;
        padding: 24px 24px 10px;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .adv-top img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--gold);
    }

    .adv-exp {
        position: absolute;
        right: 18px;
        top: 18px;
        background: linear-gradient(180deg, var(--gold-2), var(--gold));
        color: #111;
        font-size: 12px;
        font-weight: 800;
        padding: 6px 10px;
        border-radius: 20px;
    }

    /* BODY */
    .adv-body {
        padding: 10px 24px 16px;
        flex-grow: 1;
    }

    .adv-body h3 {
        font-size: 18px;
        font-weight: 800;
        color: var(--gold-2);
        margin-bottom: 6px;
    }

    .adv-location {
        font-size: 14px;
        color: #000;
        margin-bottom: 10px;
    }

    .adv-location i {
        color: var(--gold);
        margin-right: 6px;
    }

    .adv-tags {
        font-size: 14px;
        color: #0a0a0a;
        line-height: 1.6;
    }

    .adv-tags a {
        color: var(--gold);
        font-weight: 600;
        margin-left: 4px;
    }

    .adv-tags a:hover {
        color: #0a0a0a
    }

    /* FOOTER */
    .adv-footer {
        padding: 14px 24px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .view-profile {
        font-size: 14px;
        font-weight: 700;
        color: var(--gold);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: .25s;
    }

    .view-profile:hover {
        color: #000;
        gap: 10px;
    }

    .page-link {
        color: #000
    }


    /* ================= PRACTICE SEARCH ================= */
    .practice-search-section {
        background: beige;
        padding: 90px 0;
        text-align: center;
    }

    /* TITLE */
    .ps-title {
        font-size: 42px;
        font-weight: 800;
        color: var(--gold);
        margin-bottom: 8px;
        font-family: "Playfair Display";
    }

    .ps-sub {
        max-width: 720px;
        margin: 0 auto;
        color: #000;
        font-size: 17px;
        line-height: 1.7;
    }

    /* CARD */
    .ps-card {
        background: linear-gradient(180deg, #151515, #0f0f0f);
        border: 1px solid var(--glass);
        border-left: 5px solid var(--gold);
        border-radius: 18px;
        padding: 28px 24px;
        height: 100%;

        /* 🔥 ADD THESE */
        display: flex;
        flex-direction: column;

        text-align: left;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
        transition: .35s ease;
        position: relative;
        overflow: hidden;
    }



    /* HOVER */
    .ps-card:hover {
        transform: translateY(-8px);
        border-top: 5px solid var(--gold);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
    }

    /* TEXT */
    .ps-card h3 {
        font-size: 20px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 6px;
    }

    .ps-card p {
        font-size: 15px;
        color: #c9c9c9;
        margin-bottom: 16px;
        line-height: 1.6;
    }

    /* LINK */
    .ps-card a {
        font-size: 14px;
        font-weight: 700;
        color: var(--gold);
        display: inline-flex;
        align-items: center;

        gap: 6px;
        transition: .25s;

        /* 🔥 THIS IS THE KEY */
        margin-top: auto;
    }


    .ps-card a:hover {
        color: var(--gold-2);
        gap: 10px;
    }

    /* RESPONSIVE */
    @media(max-width:768px) {
        .ps-title {
            font-size: 30px;
        }

        .ps-card {
            text-align: center;
        }

        .ps-card::before {
            display: none;
        }

        .ps-card a {
            justify-content: center;
        }
    }

</style>
<section class="advocate-hero">
    <div class="container text-center border border-white  py-1  px-2 px-lg-4 py-lg-2 rounded">

        <h1 class="adv-hero-title">
            Top Lawyers, Advocates & Legal Advisors in India
        </h1>

        <p class="adv-hero-sub">
            We help you consult and hire the best lawyers for District Courts, High Courts & Supreme Court matters.
        </p>

        <div class="adv-search-box">

            <form class="adv-search-form row g-3">

                <!-- NAME SEARCH -->
                <div class="col-lg-4 adv-input">
                    <i class="fa-solid fa-user"></i>
                    <input type="text" id="nameFilter" class="form-control" placeholder="Search Advocate Name">
                </div>

                <!-- STATE -->
                <div class="col-lg-4 adv-input">
                    <i class="fa-solid fa-location-dot"></i>
                    <select id="stateFilter" class="searchable-select">
                        <option value="">Select State</option>
                        @foreach ($states as $state)
                        <option value="{{ $state->slug }}">{{ $state->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- CITY -->
                <div class="col-lg-4 adv-input">
                    <i class="fa-solid fa-city"></i>
                    <select id="cityFilter" class="searchable-select">
                        <option value="">Select City</option>
                    </select>
                </div>

                <div class="col-lg-8 adv-input">
                    <i class="fa-solid fa-scale-balanced"></i>
                    <select id="practiceFilter" class="searchable-select select">
                        <option value="">Select Practice Area</option>
                        <option value="arbitration">Arbitration</option>

                        <option value="aviationlaw">Aviation Law</option>
                        <option value="banking">Banking</option>
                        <option value="civil">Civil</option>
                        <option value="com_reg_complience">Company-Registration's Complience</option>
                        <option value="constitutional">Constitutional</option>
                        <option value="consumer">Consumer</option>
                        <option value="corporate">Corporate</option>
                        <option value="criminal">Criminal</option>
                        <option value="cyber_crime">Cyber Crime</option>
                        <option value="environment">Environment</option>
                        <option value="immigration">Immigration</option>
                        <option value="industrial_relations">Industrial Relations</option>
                        <option value="family">Family</option>
                        <option value="international">International</option>
                        <option value="ipr">I P R</option>
                        <option value="madid-laws">Madid Laws</option>
                        <option value="pil_rti_ngo">PIL | RTI | NGO</option>
                        <option value="property">Property</option>
                        <option value="sports_law">Sports Law</option>
                        <option value="taxation">Taxation</option>
                    </select>
                </div>
                <div class="col-lg-4 px-2">
                    <button type="submit" class="adv-search-btn btn btn-block w-100">
                        Search Advocate
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>

<section class="adv-list-section">
    <div class="container border-top">
        <h1 class="py-2 py-4">Our Skilled Advocates</h1>

        <div class="row g-4" id="advocateContainer">

        </div>
    </div>

</section>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('.adv-search-form').on('submit', function(e) {
            e.preventDefault();
            fetchAdvocates(1);
        });

        $('#nameFilter, #stateFilter, #cityFilter, #practiceFilter')
            .on('keyup change', function() {
                fetchAdvocates(1);
            });

        $(document).on('click', '.jobs-pagination a', function(e) {
            e.preventDefault();
            fetchAdvocates($(this).data('page'));
        });



     fetchAdvocates();

     function fetchAdvocates(page = 1) {
        $.ajax({
            url: "{{ route('ouradvocate.fetch') }}",
            type: "GET",
            data: {
                name: $('#nameFilter').val(),
                state: $('#stateFilter').val(),
                city: $('#cityFilter').val(),
                practice: $('#practiceFilter').val(),
                page: page
            },
            success: function(res) {
    
                let record = '';
    
                res.data.forEach(function(data) {
    
                    let imageUrl = data.image
                        ? `{{asset('')}}${data.image}`
                        : `{{asset('')}}frontend/images/advocate_dummy_img.jpg`;
    
                    let practiceHtml = '';
                    if (Array.isArray(data.practice_area) && data.practice_area.length) {
                        practiceHtml = `
                            <p class="adv-tags">
                                ${data.practice_area.join(', ')}
                            </p>`;
                    }
    
                    record += `
                    <div class="col-lg-3 col-md-6">
                        <div class="adv-card">
                            <div class="adv-top">
                                <img src="${imageUrl}">
                                <div class="adv-exp">${data.experience ?? 'N/A'} Yrs</div>
                            </div>
                            <div class="adv-body">
                                <h3>Advocate ${data.fullname}</h3>
                                <p class="adv-location">
                                    <i class="fa-solid fa-location-dot"></i>
                                    ${data.city}, ${data.state}
                                </p>
                                ${practiceHtml}
                            </div>
                            <div class="adv-footer">
                                <a href="/our-advocate/profile/${data.slug}" class="view-profile">
                                    View Profile →
                                </a>
                            </div>
                        </div>
                    </div>`;
                });
    
                $('#advocateContainer').html(record);
            }
        });
    }

        
        
        
        
        $('#stateFilter').on('change', function() {
            let stateSlug = $(this).val();

            $('#cityFilter').html('<option value="">Loading...</option>');

            if (stateSlug === '') {
                $('#cityFilter').html('<option value="">Select City</option>');
                return;
            }

            $.ajax({
                url: "{{ route('user.fetch.cities') }}"
                , type: "GET"
                , data: {
                    slug: stateSlug
                }
                , success: function(res) {
                    if (res.status === true) {
                        let options = '<option value="">Select City</option>';
                        res.data.forEach(function(item) {
                            options += `<option value="${item.slug}">${item.city}</option>`;
                        });
                        $('#cityFilter').html(options);
                    } else {
                        $('#cityFilter').html('<option value="">No City Found</option>');
                    }
                }
                , error: function() {
                    $('#cityFilter').html('<option value="">Error loading cities</option>');
                }
            });
        });
    });

</script>
@endpush