@include('header')


<!--**********************************
            Content body start
        ***********************************-->
<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">Reference Information</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">
                    Dashboard </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Add Reference</a></li>
        </ul>
    </div>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Reference</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-validation">

                            <form method="POST" action="{{ route('customer.store_reference') }}" id="lensForm"
                                class="p-3 border rounded shadow-sm bg-white">
                                @csrf
                                <input type="hidden" id="ref_id" name="id">

                                <div class="row g-3">
                                    <!-- Lens -->
                                    <div class="col-md-6">
                                        <label class="form-label">Organization <span
                                                class="text-danger"></span></label>
                                        <input type="text" name="organization" class="form-control text-capitalize"
                                            id="organization" placeholder="Enter Organization" >
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Contact Person <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control text-capitalize"
                                            id="name" placeholder="Enter Name" required>
                                    </div>
                                    <!-- Mobile -->
                                    <div class="col-md-6">
                                        <label class="form-label">Mobile No <span class="text-danger">*</span></label>
                                        <input type="text" name="mobile" class="form-control"  id="mobile" maxlength="10" required>
                                        <div class="invalid-feedback" id="error-mobile"></div>
                                    </div>

                                    <!-- Address -->
                                    <div class="col-md-6">
                                        <label class="form-label">Address <span class="text-danger">*</span></label>
                                        <textarea name="address" class="form-control" id="address" rows="3" required></textarea>
                                        <div class="invalid-feedback" id="error-address"></div>
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="col-12 text-end">
                                        <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                                            Submit
                                        </button>
                                    </div>
                                </div>
                            </form>

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

            </div>

        </div>
        <div class="col-xl-12">
            <div class="card dz-card" id="accordion-three">
                <div class="card-header flex-wrap d-flex justify-content-between border-0">
                    <div>
                        <h4 class="card-title">Reference</h4>

                    </div>

                </div>

                <!-- /tab-content -->
                <div class="tab-content" id="myTabContent-2">
                    <div class="tab-pane fade show active" id="withoutSpace" role="tabpanel"
                        aria-labelledby="home-tab-2">
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table id="example3" class="display table" style="min-width: 845px">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Organization</th>
                                            <th>Contact Person</th>
                                            <th>Mobile No</th>
                                            <th>Address</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $sno = 1; @endphp

                                        @foreach($reference as $reference1)
                                        <tr>
                                            <td>
                                                {{ $sno++ }}

                                            </td>
                                            <td>{{ $reference1->organization}}</td>
                                            <td>{{ $reference1->name }}</td>
                                            <td>{{ $reference1->mobile }}</td>
                                            <td>{{ $reference1->address }}</td>
                                            <td>
                                                <a href="javascript:void(0);"
                                                    class="badge bg-primary text-decoration-none edit-lens"
                                                    data-id="{{ $reference1->id }}"
                                                    data-organization-id="{{ $reference1->organization }}"
                                                    data-name-id="{{ $reference1->name }}"
                                                    data-mobile-id="{{ $reference1->mobile }}"
                                                    data-address-id="{{ $reference1->address }}">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /tab-content -->

            </div>
        </div>
    </div>
</div>
@include('footer')
<!-- Load SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Trigger Swal if session has success -->
@if(session('success_message'))
<script>
Swal.fire({
    title: 'Success!',
    text: {!! json_encode(session('success_message')) !!},
    icon: 'success'
}).then(() => {
    location.reload();
});
</script>
@endif


<script>
document.querySelectorAll('.edit-lens').forEach(function(button) {
    button.addEventListener('click', function() {
        const refId = this.getAttribute('data-id');
        const organization = this.getAttribute('data-organization-id');
        const name = this.getAttribute('data-name-id');
        const mobile = this.getAttribute('data-mobile-id');
        const address = this.getAttribute('data-address-id');
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });

       

        // ✅ Set the input value for editing
        $('#organization').val(organization);
        $('#ref_id').val(refId);
        $('#name').val(name);
        $('#mobile').val(mobile);
        $('#address').val(address);


        // ✅ Set form action
        $('#lensForm').attr('action', '{{ route("customer.store_reference") }}');

        // ✅ Change button label
        $('#submitBtn').text('Update');
    });
});
</script>