<div class="x-element" id="lead-date-added">
    <i class="mdi mdi-calendar-plus"></i>
    <span>İşlem Tarihi:</span>
    @if($lead->permission_edit_lead)
        <span class="datepicker"
            data-form-id="lead-date-added"
            data-hidden-field="lead_created"
            data-container="lead-date-added-container"
            id="lead-date-added-container">{{ runtimeDate($lead->lead_created) }}</span>
        <input type="hidden" name="lead_created" id="lead_created">
        <button id="update-date-btn" class="btn btn-primary btn-sm mt-2">Güncelle</button>
    @else
        <span class="x-highlight">{{ runtimeDate($lead->lead_created) }}</span>
    @endif
</div>

<script>
    // Default date picker
    $(document).find(".datepicker").datepicker({
        format: "dd.mm.yyyy",
        language: "tr",
        autoclose: true,
        class: "datepicker-sm",
        todayHighlight: true
    });

    // Update button click event
    $('#update-date-btn').on('click', function() {
        const selectedDate = $('#lead_created').val();
        const updateUrl = "{{ url('/leads/'.$lead->lead_id.'/update-date-added/') }}";

        // Manual update AJAX request
        $.post(updateUrl, { lead_created: selectedDate }, function(response) {
            alert("Tarih başarıyla güncellendi!");
        }).fail(function() {
            alert("Tarih güncellenirken bir hata oluştu.");
        });
    });
</script>