@extends('backend.layout.main')

@section('title','Judgement Management')

@section('content')

<style>
    .advocate-card {
        border: 2px solid #dee2e6;
        border-radius: 16px;
        transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .advocate-card:hover {
        border-color: #000;
        box-shadow: 0 8px 25px rgba(13, 110, 253, 0.2);
    }

    /* Image */
    .advocate-img {
        width: 120px;
        height: 120px;
        border: 3px solid #dee2e6;
        border-radius: 50%;
        overflow: hidden;
        transition: border-color 0.4s ease;
    }

    .advocate-card:hover .advocate-img {
        border-color: #000;
    }

    .advocate-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Social Icons */
    .social-link {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .social-link:hover {
        transform: translateY(-3px);
        opacity: 0.85;
    }

    .instagram {
        background: #E1306C;
    }

    .facebook {
        background: #1877F2;
    }

    .twitter {
        background: #1DA1F2;
    }

    .linkedin {
        background: #0A66C2;
    }


    table {
        padding: 15px;
        gap: 15px;
    }

    table tr td {
        border-bottom: 1px solid rgb(0, 0, 0);
        /* padding: 15px 0; */
        margin-bottom: 25px;
    }

    table tr td:nth-child(1) {
        text-align: left;
    }

    table tr td:nth-child(2) {
        text-align: right;
    }

    table {
        border-collapse: separate;
        border-spacing: 0 25px;
    }

</style>

<div class="page-wrapper">
    <div class="content">

        <div class="row">
            <div class="col-md-4">
                <div class="card advocate-card text-center p-3">

                    <!-- Image -->
                    <div class="advocate-img mx-auto">
                        <img src="{{ asset($advocate->image) }}" alt="Advocate">
                    </div>

                    <!-- Name -->
                    <h5 class="mt-3 mb-1 fw-bold">Adv. {{ $advocate->fullname }} </h5>
                    <p class="text-muted mb-3">{{ $advocate->court ?? ""}} Advocate</p>

                    <table>
                        <tr>
                            <td>Bar Enrollment No.</td>
                            <td>{{ $advocate->barEnrollmentNo ?? "N/A" }}</td>
                        </tr>
                        <tr>
                            <td>Phone</td>
                            <td>+91 {{ $advocate->phone }}</td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td>{{ $advocate->email }}</td>
                        </tr>
                    </table>

                    <!-- Social Icons -->
                    <div class="d-flex justify-content-center gap-3 pb-2">


                        @if(isset($advocate->instagram))
                        <a href="{{ $advocate->instagram ?? "#"}}" class="social-link instagram" target="_blank">
                            <i class="bi bi-instagram"></i>
                        </a>

                        @endif
                        @if(isset($advocate->facebook))
                        <a href="{{ $advocate->facebook ?? "#"}}" class="social-link facebook" target="_blank">
                            <i class="bi bi-facebook"></i>
                        </a>
                        @endif
                        @if(isset($advocate->twitter))
                        <a href="{{ $advocate->twitter ?? "#"}}" class="social-link twitter" target="_blank">
                            <i class="bi bi-twitter"></i>
                        </a>
                        @endif
                        @if(isset($advocate->linkedin))
                        <a href="{{ $advocate->linkedin ?? "#"}}" class="social-link linkedin" target="_blank">
                            <i class="bi bi-linkedin"></i>
                        </a>
                        @endif





                    </div>

                </div>
            </div>

            <div class="col-md-8">
                <!--  Tab Style-6 -->
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-header">
                                <ul class="nav nav-tabs tab-style-6" id="myTab-3" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="products-tab" data-bs-toggle="tab" data-bs-target="#products-tab-pane" type="button" role="tab" aria-controls="products-tab-pane" aria-selected="true"><i class="feather-gift me-1 align-middle d-inline-block"></i>Activity</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales-tab-pane" type="button" role="tab" aria-controls="sales-tab-pane" aria-selected="false"><i class="feather-file me-1 align-middle d-inline-block"></i>Personal Detail</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="profit-tab" data-bs-toggle="tab" data-bs-target="#profit-tab-pane" type="button" role="tab" aria-controls="profit-tab-pane" aria-selected="false"><i class="feather-file-text me-1 align-middle d-inline-block"></i>Contact Detail</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="expenses-tab" data-bs-toggle="tab" data-bs-target="#expenses-tab-pane" type="button" role="tab" aria-controls="expenses-tab-pane" aria-selected="false"><i class="feather-file-minus me-1 align-middle d-inline-block"></i>Professional Details</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="expenses-tab" data-bs-toggle="tab" data-bs-target="#social-tab-pane" type="button" role="tab" aria-controls="expenses-tab-pane" aria-selected="false"><i class="feather-file-minus me-1 align-middle d-inline-block"></i>Socials Links</button>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">

                                <div class="tab-content" id="myTabContent2">
                                    <div class="tab-pane fade show active p-0 border-bottom-0" id="products-tab-pane" role="tabpanel" aria-labelledby="products-tab" tabindex="0">
                                        <div class="table-responsive">
                                            <table class="table mb-0">

                                                <tbody>

                                                    <tr>
                                                        <td>Email</td>
                                                        <td>{{ $advocate->email ?? "N/A"  }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Phone No.</td>
                                                        <td>{{ $advocate->phone ?? "N/A"  }}</td>
                                                    </tr>

                                                    <tr>
                                                        <td>Address</td>
                                                        <td>{{ $advocate->address ?? "N/A"  }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>City</td>
                                                        <td>{{ $advocate->city ?? "N/A"  }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>State</td>
                                                        <td>{{ $advocate->state ?? "N/A"  }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="sales-tab-pane" role="tabpanel" aria-labelledby="sales-tab" tabindex="0">


                                        <form action="#" id="personalForm" method="post" enctype="multipart/form-data">
                                            @csrf
                                            <input type="hidden" name="advocate_id" value="{{ $advocate->id }}">
                                            <div class="border-bottom mb-3">
                                                <h6 class="mb-3">Basic Information</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Full Name</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" name="fullname" value="{{ $advocate->fullname }}" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Merital Status</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <select class="select" name="meritalStatus">
                                                                    <option value="" {{ ($advocate->meritalStatus =="null") ? 'selected' : '' }}   >Select</option>
                                                                    <option value="merried" {{ ($advocate->meritalStatus =='merried') ? 'selected' : '' }}    >Married</option>
                                                                    <option value="unmerried" {{ ($advocate->meritalStatus =="unmerried") ? 'selected' : '' }}   >Unmarried</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Aadhar No.</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->adharNo }}" name="adharNo" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Primary Practicing Area</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" name="primaryPracticeArea" value="{{ $advocate->primaryPracticeArea }}"class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Experience</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->experience }}" name="experience" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Cop No.</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->copNo }}" name="copNo" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-2">
                                                                <label class="form-label mb-md-0">DOB</label>
                                                            </div>
                                                            <div class="col-md-10">
                                                                <input type="date" name="dob" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="border-bottom mb-3">

                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div>
                                                            <h6 class="mb-3">Profile Image</h6>
                                                            <div class="d-flex align-items-center flex-wrap row-gap-3 bg-light w-100 rounded p-3 mb-4">
                                                                <div class="d-flex align-items-center justify-content-center avatar avatar-xxl rounded-circle border border-dashed me-2 flex-shrink-0 text-dark frames">
                                                                    <i class="ti ti-photo text-gray-3 fs-16"></i>
                                                                </div>
                                                                <div class="profile-upload">

                                                                    <div class="profile-uploader d-flex align-items-center">
                                                                        <div class="drag-upload-btn btn btn-sm btn-primary me-2">
                                                                            Upload
                                                                            <input type="file" name="image" class="form-control image-sign" multiple="">
                                                                        </div>
                                                                        <a href="javascript:void(0);" class="btn btn-light btn-sm">Cancel</a>
                                                                        <a href="javascript:void(0);" 
                                                                        class="btn btn-info btn-sm view-image"
                                                                        data-image="{{ asset($advocate->image ?? 'assets/img/no-image.png') }}">
                                                                            View
                                                                        </a>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div>
                                                            <h6 class="mb-3">Aadhar Front</h6>
                                                            <div class="d-flex align-items-center flex-wrap row-gap-3 bg-light w-100 rounded p-3 mb-4">
                                                                <div class="d-flex align-items-center justify-content-center avatar avatar-xxl rounded-circle border border-dashed me-2 flex-shrink-0 text-dark frames">
                                                                    <i class="ti ti-photo text-gray-3 fs-16"></i>
                                                                </div>
                                                                <div class="profile-upload">

                                                                    <div class="profile-uploader d-flex align-items-center">
                                                                        <div class="drag-upload-btn btn btn-sm btn-primary me-2">
                                                                            Upload
                                                                            <input type="file" name="adharFront" class="form-control image-sign" multiple="">
                                                                        </div>
                                                                        <a href="javascript:void(0);" class="btn btn-light btn-sm">Cancel</a>
                                                                        <a href="javascript:void(0);" 
                                                                            class="btn btn-info btn-sm view-image"
                                                                            data-image="{{ asset($advocate->adharFront ?? 'assets/img/no-image.png') }}">
                                                                                View
                                                                            </a>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div>
                                                            <h6 class="mb-3">Aadhar Back</h6>
                                                            <div class="d-flex align-items-center flex-wrap row-gap-3 bg-light w-100 rounded p-3 mb-4">
                                                                <div class="d-flex align-items-center justify-content-center avatar avatar-xxl rounded-circle border border-dashed me-2 flex-shrink-0 text-dark frames">
                                                                    <i class="ti ti-photo text-gray-3 fs-16"></i>
                                                                </div>
                                                                <div class="profile-upload">

                                                                    <div class="profile-uploader d-flex align-items-center">
                                                                        <div class="drag-upload-btn btn btn-sm btn-primary me-2">
                                                                            Upload
                                                                            <input type="file" name="adharBack" class="form-control image-sign" multiple="">
                                                                        </div>
                                                                        <a href="javascript:void(0);" class="btn btn-light btn-sm">Cancel</a>
                                                                        <a href="javascript:void(0);" 
                                                                            class="btn btn-info btn-sm view-image"
                                                                            data-image="{{ asset($advocate->adharBack ?? 'assets/img/no-image.png') }}">
                                                                                View
                                                                            </a>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-end">
                                                <button type="button" class="btn btn-outline-light border me-3">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane fade" id="profit-tab-pane" role="tabpanel" aria-labelledby="profit-tab" tabindex="0">
                                        <form action="#" id="contactForm">
                                            @csrf
                                            <input type="hidden" name="advocate_id" value="{{ $advocate->id }}">
                                            <div class="border-bottom mb-3">
                                                <h6 class="mb-3">Contact Information</h6>
                                                <div class="row">

                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Email</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->email }}" name="email" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Phone</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->phone }}" name="phone" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Alternate Phone</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->altPhone }}" name="altPhone" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Address</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->address }}" name="address" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">City</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <select class="select" name="city">
                                                                    <option>Select</option>

                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">State</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <div>
                                                                    <select class="select"  name="state"  >
                                                                        <option>Select</option>


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



                                                </div>
                                            </div>
                                            <div class="border-bottom mb-3">
                                                    <h6 class="mb-3">Description</h6>

                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <textarea
                                                                name="description"
                                                                id="description"
                                                                class="form-control summernote"
                                                                rows="6"
                                                                placeholder="Enter detailed description (30–40 words recommended)">
                                                            </textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            <div class="d-flex align-items-center justify-content-end">
                                                <button type="button" class="btn btn-outline-light border me-3">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane fade" id="expenses-tab-pane" role="tabpanel" aria-labelledby="expenses-tab" tabindex="0">

                                        <form action="#" id="professionalForm" method="post">
                                            @csrf
                                            <input type="hidden" name="advocate_id" value="{{ $advocate->id }}">

                                            <div class="border-bottom mb-3">

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-2">
                                                                <label class="form-label mb-md-0">Enrollment Number</label>
                                                            </div>
                                                            <div class="col-md-10">
                                                                <input type="text" value="{{ $advocate->barEnrolmentNo }}" name="barEnrollmentNo" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Practicing Since</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <select class="select form-control" name="practicingSince">
                                                                    <option value="">Select</option>
                                                                  @for($year = date('Y'); $year >= date('Y') - 50; $year--)
                                                                        <option value="{{ $year }}" {{ old('year', $advocate->year ?? '') == $year ? 'selected' : '' }}>
                                                                            {{ $year }}
                                                                        </option>
                                                                    @endfor

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

                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">State</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <div>
                                                                    <select class="select" name="barEnrollmentState">
                                                                        <option>Select</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Court / High Court / Supreme Court</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <div>
                                                                    <select class="select form-control" name="court">
                                                                        <option value="">Select High Court</option>
                                                                        <option value="andhra_pradesh_high_court">Andhra Pradesh High Court</option>
                                                                        <option value="bombay_high_court">Bombay High Court</option>
                                                                        <option value="calcutta_high_court">Calcutta High Court</option>
                                                                        <option value="chhattisgarh_high_court">Chhattisgarh High Court</option>
                                                                        <option value="delhi_high_court">Delhi High Court</option>
                                                                        <option value="gauhati_high_court">Gauhati High Court</option>
                                                                        <option value="gujarat_high_court">Gujarat High Court</option>
                                                                        <option value="himachal_pradesh_high_court">Himachal Pradesh High Court</option>
                                                                        <option value="jammu_kashmir_ladakh_high_court">Jammu &amp; Kashmir and Ladakh High Court</option>
                                                                        <option value="jharkhand_high_court">Jharkhand High Court</option>
                                                                        <option value="karnataka_high_court">Karnataka High Court</option>
                                                                        <option value="kerala_high_court">Kerala High Court</option>
                                                                        <option value="madhya_pradesh_high_court">Madhya Pradesh High Court</option>
                                                                        <option value="madras_high_court">Madras High Court</option>
                                                                        <option value="manipur_high_court">Manipur High Court</option>
                                                                        <option value="meghalaya_high_court">Meghalaya High Court</option>
                                                                        <option value="orissa_high_court">Orissa High Court</option>
                                                                        <option value="patna_high_court">Patna High Court</option>
                                                                        <option value="punjab_haryana_high_court">Punjab &amp; Haryana High Court</option>
                                                                        <option value="rajasthan_high_court">Rajasthan High Court</option>
                                                                        <option value="sikkim_high_court">Sikkim High Court</option>
                                                                        <option value="telangana_high_court">Telangana High Court</option>
                                                                        <option value="tripura_high_court">Tripura High Court</option>
                                                                        <option value="uttarakhand_high_court">Uttarakhand High Court</option>
                                                                        <option value="uttar_pradesh_high_court">Uttar Pradesh High Court</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Fess Amount ( Per 30 Minutes )</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" value="{{ $advocate->feesAmount }}" name="feesAmount" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-end">
                                                <button type="button" class="btn btn-outline-light border me-3">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane fade" id="social-tab-pane" role="tabpanel" aria-labelledby="expenses-tab" tabindex="0">
                                        <form action="#" id="socialForm" method="post">
                                            @csrf
                                            <input type="hidden" name="advocate_id" value="{{ $advocate->id }}">

                                            <div class="border-bottom mb-3">

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Facebook</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" name="facebook" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Instagram</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" name="instagram" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Twitter</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" name="twitter" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row align-items-center mb-3">
                                                            <div class="col-md-4">
                                                                <label class="form-label mb-md-0">Linkedin</label>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input type="text" name="linkedin" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="d-flex align-items-center justify-content-end">
                                                <button type="button" class="btn btn-outline-light border me-3">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection




<!-- Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Document Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="previewImage" src="" class="img-fluid rounded" alt="Preview">
            </div>
        </div>
    </div>
</div>


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

        $.get("{{ route('advocate.states') }}")
            .done(function(data) {
                let stateSelect = $('select[name="state"], select[name="barEnrollmentState"]');
                stateSelect.empty().append('<option value="">Select State</option>');
                          console.log('state data', data);
                data.forEach(function(state) {
                    stateSelect.append(
                        `<option value="${state.slug}">${state.name}</option>`
                    );
                });
            })
            .fail(function() {
                alert('Failed to load states');
            });

        // CITIES
        $.get("{{ route('advocate.cities') }}")
            .done(function(data) {
                let citySelect = $('select[name="city"]');
                citySelect.empty().append('<option value="">Select City</option>');
                 console.log('city data', data);
                data.forEach(function(city) {
                    citySelect.append(
                        `<option value="${city.slug}">${city.city}</option>`
                    );
                });
            })
            .fail(function() {
                alert('Failed to load cities');
            });


        // AJAX Form Submit
        

        $(document).on('click', '.view-image', function () {
            let imageUrl = $(this).data('image');

            $('#previewImage').attr('src', imageUrl);
            $('#imagePreviewModal').modal('show');
        });
        
        
        function ajaxFormSubmit(formId, url) {
            $(formId).on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: url
                    , type: 'POST'
                    , data: formData
                    , contentType: false
                    , processData: false
                    , success: function(res) {
                        if (res.success) {
                            toastr.success(res.message);
                        }
                    }
                    , error: function(err) {
                        toastr.error('Something went wrong');
                    }
                });
            });
        }



        ajaxFormSubmit('#personalForm', "{{ route('advocate.personal.update') }}");
        ajaxFormSubmit('#contactForm', "{{ route('advocate.contact.update') }}");
        ajaxFormSubmit('#professionalForm', "{{ route('advocate.professional.update') }}");
        ajaxFormSubmit('#socialForm', "{{ route('advocate.social.update') }}");

    });

</script>
@endpush